从0开发、发布油猴脚本(保姆级)

概览

项目中使用conify集成图标,有些内网用户只能使用离线图标,但是如何判断使用的conify集成图标是在线还是离线呢?这个时候就需要一个油猴脚本,作用于iconify官网,对离线图标进行标识。
此篇文章主要从如下几点去梳理:

  1. 安装油猴脚本管理器扩展程序
  2. 开发、发布一个油猴脚本
  3. 引入自己开发的油猴脚本

一. 安装油猴脚本管理器程序

1. 下载地址:
https://www.tampermonkey.net/index.php?browser=chrome&locale=zh

在这里插入图片描述

点击去应用商店直接添加扩展程序即可

2. 公司内网访问不了谷歌应用商店怎么办?

可以通过文件引入的方式安装程序

  1. 将扩展程序压缩包解压
  2. 引入扩展程序文件
    在这里插入图片描述
    注意: 选择的是里层的版本文件夹
    在这里插入图片描述

二 . 自己开发、发布一个油猴脚本

开发平台:
https://greasyfork.org/zh-CN

在这里插入图片描述
在这里就可以将自己开发油猴脚本上传和发布

开发油猴脚本示例如下

// ==UserScript==
// @name         Icon test
// @namespace    http://tampermonkey.net/
// @version      0.1
// @license      MIT
// @description  Check icon support in purge icon or not.
// @author       zhan.huixian
// @match        https://icon-sets.iconify.design/*
// @icon         https://icon-sets.iconify.design/favicon.svg
// @grant        none
// ==/UserScript==(function() {'use strict';const CollectionIds = ["ic","mdi","ph","ri","carbon","bi","tabler","ion","uil","teenyicons","clarity","iconoir","majesticons","zondicons","ant-design","bx","bxs","gg","cil","lucide","pixelarticons","system-uicons","ci","akar-icons","typcn","radix-icons","ep","mdi-light","fe","eos-icons","line-md","charm","prime","heroicons-outline","heroicons-solid","uiw","uim","uit","uis","maki","gridicons","mi","quill","gala","fluent","icon-park-outline","icon-park","vscode-icons","jam","codicon","pepicons","bytesize","ei","fa6-solid","fa6-regular","octicon","ooui","nimbus","openmoji","twemoji","noto","noto-v1","emojione","emojione-monotone","emojione-v1","fxemoji","bxl","logos","simple-icons","cib","fa6-brands","arcticons","file-icons","brandico","entypo-social","cryptocurrency","flag","circle-flags","flagpack","cif","gis","map","geo","fad","academicons","wi","healthicons","medical-icon","la","eva","dashicons","flat-color-icons","entypo","foundation","raphael","icons8","iwwa","fa-solid","fa-regular","fa-brands","fa","fontisto","icomoon-free","ps","subway","oi","wpf","simple-line-icons","et","el","vaadin","grommet-icons","whh","si-glyph","zmdi","ls","bpmn","flat-ui","vs","topcoat","il","websymbol","fontelico","feather","mono-icons",]function checkPureIcon() {Array.from(document.querySelectorAll('.if--items-grid-rows a')).forEach(a => {if(CollectionIds.includes(a.href.split('/').slice(-3)[0])) {a.style.border = '1px dashed red';}})}const timer = setInterval(() => {if (!document.querySelector('.if--items-grid-row.items')) return;clearInterval(timer);const observe = new MutationObserver(function(mutations, observer){checkPureIcon();});observe.observe(document.querySelector('.if--items-grid-row.items'),{ childList: true });checkPureIcon();}, 500);
})();

这个脚本的功能就是将iconify的离线图标进行标识。

三. 引入自己开发的油猴脚本

发布完之后,可能需要提供给其它人使用。提供对于的下载地址即可。

在这里插入图片描述
点击发布的脚本列表,分享链接,就可以供其他人安装使用了。

在管理面板中,可以看已安装的脚本
在这里插入图片描述

如果单纯自己测试用,那么就不需要在greasyfork平台发布,直接在扩展中添加脚本即可

在这里插入图片描述

注: 安装的脚本都可以自主去编辑修改,在原先脚本的基础上,完成一些定制化的功能。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/835878.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HIVE调优-分区分桶,合并小文件

HIVE调优-分区分桶,合并小文件 目录 HIVE调优-分区分桶,合并小文件 1.分区分桶,合并小文件 1)为什么小文件需要合并? 2)如何合并小文件: 1.分区分桶,合并小文件 1)为什…

MySQL数据库的初始化(创建库、创建表、向数据库添加测试数据)

MySQL数据库的初始化(创建库、创建表、向数据库添加测试数据) MySQL数据库简介MySQL创建一个新的数据库MySQL创建一张新的数据表简单(设置)表复杂(设置)表 填充测试数据SQL语句mysql>模式下输入的每句sq…

现代信号处理9_正则化(CSDN_20240512)

正则化的引入 解线性方程组: 这项工作有很多种做法,下面介绍两种,如下图所示,有一些数据点需要拟合,拟合的方法有很多。 1) 构造线性函数①,这种函数比较简单,此时 2) 构…

跟TED演讲学英文:Why US politics is broken — and how to fix it by Andrew Yang

Why US politics is broken — and how to fix it Link: https://www.ted.com/talks/andrew_yang_why_us_politics_is_broken_and_how_to_fix_it? Speaker: Andrew Yang Date: April 2024 文章目录 Why US politics is broken — and how to fix itIntroductionVocabularyTr…

物联网与JavaScript:JavaScript在物联网领域中的应用,使用Node.js和JavaScript来控制硬件设备

当我们谈到物联网(IoT)时,我们通常会想到硬件和嵌入式编程语言,比如C或C。然而,JavaScript通过Node.js,也能够在物联网领域发挥作用。 Node.js是一个能够在服务器端运行JavaScript的平台,这使得…

wordpress主题 7B2 PRO主题5.4.2免授权直接安装

内容目录 一、详细介绍二、效果展示1.部分代码2.效果图展示 三、学习资料下载 一、详细介绍 WordPress 资讯、资源、社交、商城、圈子、导航等多功能商用主题:B2 PRO 其设计风格专业且时尚,功能十分强大,包括多栏布局、自定义页面、强大的主…

初始化VUE项目Sorry, name can no longer contain capital letters

安装过VUE脚手架,创建项目 vue init webpack vueDemoOne 报错 Sorry, name can no longer contain capital letters 翻译了一下,意思就是项目名不能包含大写字母,修改原来的驼峰命名,修改后成功创建。 vue init webpack vue_de…

【JavaEE网络】HTTPS详解:从对称与非对称加密到证书认证

目录 HTTPSHTTPS 是什么“加密” 是什么HTTTPS 的工作过程引入对称加密引入非对称加密引入证书完整流程总结 HTTPS HTTPS 是什么 HTTPS 也是一个应用层协议. 是在 HTTP 协议的基础上引入了一个加密层. HTTP 协议内容都是按照文本的方式明文传输的. 这就导致在传输过程中出现…

LeetCode - 0088 合并两个有序数组

题目地址:https://leetcode.cn/problems/merge-sorted-array/description/ 引言:话接上回,由于上次面试官着急下班,面试不得不提前终止,这不,他又找我去面试了 面试官:你好,小伙子&a…

Redis——Java三种客户端(Jedis、Lettuce和Redisson)

Redis在Java领域有着广泛的应用,为了更方便地与Redis进行交互,开发者们创建了多种Java客户端。其中,Jedis、Lettuce和Redisson是三种最为流行的Redis Java客户端。以下是关于这三种客户端的简要介绍: Jedis: Jedis是…

C++入门——命名空间、缺省参数、函数重载、引用、内敛函数、auto关键字

目录 前言 一、什么是C 1.1 C关键字(C98) 二、命名空间 2.1 命名空间定义 1.正常命名空间的定义 2.命名空间的定义可以嵌套 3.同名的命名空间会合并 2.2 命名空间的使用 三、C输入&输出 四、缺省参数 4.1 缺省参数概念 4.2 缺省参数分类 五、函数重载 5.1 …

C++数据抽象:构建安全且灵活的软件组件

目录标题 1. 数据抽象简介2. 抽象类与纯虚函数3. 实现数据抽象的步骤4. 示例:抽象基类与具体派生类5. 结论 在C编程语言中,数据抽象是一种核心的编程概念,它允许我们创建简单且易于管理的代码结构。通过数据抽象,我们可以隐藏复杂…

Vue11 Vue3完结撒花

shallowRef和shallowReactive shallowRef 作用&#xff1a;创建一个响应式数据&#xff0c;但只对顶层属性进行响应式处理 用法 let myVar shallowRef(initialValue)特点&#xff1a;只跟踪引用值变化&#xff0c;不关心值内部的属性变化 案例 <template><div c…

Springboot集成Netflix-ribbon、Enreka实现负载均衡-12

Netflix Ribbon简介 Netflix Ribbon是Netflix发布的云中间层服务开源项目&#xff0c;主要功能是提供客户端的软件负载均衡算法&#xff0c;将Netflix的中间层服务连接在一起。 具体来说&#xff0c;Ribbon是一个客户端负载均衡器&#xff0c;可以在配置文件中列出所有的服务…

ORACLE数据库一主多备DG环境(一对多)主备切换

本文主要分享一对多(一主多备)的DG环境主备切换的案例,我们的一套生产环境,一主四备,其中3个备库承载着查询业务,还有一个DG没有任务业务,由于主库的存储性能不给力,公司采购了新的存储,这个DG就是为了切换到新存储而搭建的,数据量1.5TB。 本文是在测试环境操作,之前…

【信息系统项目管理师】复习~第十五章

15.项目风险管理 每个项目都存在两个层面上的风险&#xff1a;①每个项目都有会影响项目达成目标的单个风险&#xff1b;②由单个风险和不确定性的其他来源联合导致的整体项目风险。项目风险会对项目目标产生负面或正面的影响&#xff0c;也就是风险与机会。项目风险管理旨在利…

PostgreSQL的学习心得和知识总结(一百四十三)|深入理解PostgreSQL数据库之Support event trigger for logoff

目录结构 注&#xff1a;提前言明 本文借鉴了以下博主、书籍或网站的内容&#xff0c;其列表如下&#xff1a; 1、参考书籍&#xff1a;《PostgreSQL数据库内核分析》 2、参考书籍&#xff1a;《数据库事务处理的艺术&#xff1a;事务管理与并发控制》 3、PostgreSQL数据库仓库…

VirtualBox7安装ubantu server 22.04通过NAT+Only-Host双网卡实现宿主机与虚拟机互通

目录 背景环境安装虚拟机配置网卡修改ssh端口遇到的坑参考文章 背景 时间长没用docker了&#xff0c;有些命令都快忘了&#xff0c;心血来潮想着搞个docker玩一玩&#xff0c;所以需要先搞一个虚拟机&#xff0c;因为之前CentOS用的比较多&#xff0c;所以这次想试一试ubantu。…

『大模型笔记』AI教母李飞飞谈人工智能的前景与危险!

AI教母李飞飞谈人工智能的前景与危险! 文章目录 一. AI教母李飞飞谈人工智能的前景与危险!1. 总结2. 全文内容二. 参考文献油管原视频:https://www.youtube.com/watch?v=FW5CypL1XOY一. AI教母李飞飞谈人工智能的前景与危险! 1. 总结 以下是整理后的中文内容: 李飞飞博…

openlayers实现绘制图标,并实现图标的聚合功能

点聚合说明 点聚合功能是指将地图上密集的点数据聚合成一个更大的点或者其他形状&#xff0c;以改善地图的可视化效果和性能。点聚合功能通常用于在地图上显示大量的点标记&#xff0c;例如地图上的POI&#xff08;兴趣点&#xff09;、传感器数据等。通过点聚合功能&#xff…