自己的第一个Greasy Fork脚本

最新推荐文章于 2025-03-04 20:25:33 发布

有舍亦有得

最新推荐文章于 2025-03-04 20:25:33 发布

阅读量7k

点赞数 3

分类专栏：前端文章标签： chrome 前端 javascript

本文链接：https://blog.csdn.net/cxlmap/article/details/122121493

版权

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何通过安装Tampermonkey插件并编写用户脚本来修改特定网站的标题和图标，实现个性化浏览体验。文中详细讲解了从插件安装到脚本发布的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初始环境准备

需要在浏览器安装好Tampermonkey插件，这个插件的主要功能是管理各类脚本。我们后续写好的脚本将会在这里看到，并且能控制是否开启等操作。大家可以去这里下载Tampermonkey，极简插件_Chrome扩展插件商店_优质crx应用

准备步骤

完成后能在插件列表中找到。

正式开始

1、打开并登录Greasy Fork - 安全、实用的用户脚本大全，如果只使用里面已发布的脚本，可以不用登录。我们要使用自己的脚本，需要登录。

2、点击右上角的你的用户名，然后选择“发布你编写的脚本”，则可以看到一下界面。

3、上代码（代码功能是对某些网址的标题、logo图片等修改，方便上班刷题）

// ==UserScript==
// @name         SKB模糊标题
// @namespace    
// @version      3.1
// @description  对部分网站的tab页标题做修改
// @author       cxlmap
// @match        *://*.shikaobang.cn/*
// @grant        none
// @license MIT
// ==/UserScript==

(function () {
    'use strict';
    setTimeout(() => {
        document.title = "前端ES小技巧"

        var link = document.querySelector("link[rel*='icon']")
        document.head.removeChild(link)
        var newlink = document.createElement('link')
        newlink.rel = 'shortcut icon';
        newlink.href = 'https://scpic.chinaz.net/Files/pic/icons128/8310/n1.png';
        
        document.head.appendChild(newlink);
        document.getElementsByClassName('select-text')[0].innerText = "xxx"
        document.getElementsByClassName('logo-link')[0].removeChild(document.getElementsByClassName('logo-link')[0].firstElementChild)    
    }, 1000);
})();

前面注释中，最重要的是match，决定对那些网址匹配，匹配上了之后则运行后续代码。

4、发布后按照提示安装，然后刷新对应页面，就可以运行。

写在最后，看提示还有对GitHub、Bitbucket、gitlab的webhook，可以实现在代码库里提交代码就自动更新脚本。不错，不错，味道好极了。