从0开发、发布油猴脚本（保姆级）

news2024/11/17 20:43:41

概览

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

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

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

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

在这里插入图片描述

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

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);
})();