🔥 油猴脚本开发指南：从基础API到发布全流程

写此文章的起因是自己会在工作的闲暇之余习惯性的刷刷掘金的沸点吃吃瓜，但是因为我工位升降台比较高，每次领导或者同事从我身后路过时，总有一种自己摸鱼被抓的感觉，摸鱼都摸的不痛快。

掘金首页打开黑暗模式后跳转沸点详情页等页面黑暗模式失效，感觉这是系统bug，就算是反馈bug也需要处理时间，不如自己直接写个油猴脚本来解决这个问题。脚本链接

一个完整的油猴脚本包括元数据和控制代码两个部分，其中元数据是用来声明脚本的名称、版本、生效的网址规则以及一些脚本执行所需要的前置信息等，控制代码就是脚本的主逻辑信息。

一： 元数据配置：你必须知道的完整规则

1.1 核心指令详解

// ==UserScript==
// @name         脚本名称（必填）
// @namespace    命名空间（建议用域名）
// @version      版本号（必填，如1.0.0）
// @description  描述（必填，简短说明）
// @author       作者
// @match        URL匹配规则（必填）
// @exclude      排除URL
// @grant        特殊API权限
// @require      外部JS依赖
// @icon         脚本图标URL
// @connect      允许跨域访问的域名
// @run-at       脚本注入时机
// @license      MIT (建议MIT)
// ==/UserScript==

1.2 @match规则深度解析

// 匹配知乎所有页面
@match *://www.zhihu.com/*

// 匹配HTTPS协议的百度搜索页
@match https://www.baidu.com/s?*

// 匹配子域名
@match *://*.google.com/*

// 匹配URL带hash的情况
@match *://example.com/path#*

// 精确匹配特定路径
@match *://example.com/exact/path

常见踩坑点​​：

• ❌ 错误：@match www.example.com（缺少协议）
• ✅ 正确：@match *://www.example.com/*
• ❌ 错误：@match *://example.com/path（缺少结尾通配符）
• ✅ 正确：@match *://example.com/path*

1.3 @grant权限系统完全指南

// 存储相关
@grant GM_setValue
@grant GM_getValue
@grant GM_deleteValue
@grant GM_listValues

// 网络请求
@grant GM_xmlhttpRequest
@grant GM_download

// 界面操作
@grant GM_notification
@grant GM_setClipboard

权限使用示例​​：

// 存储数据
GM_setValue('token', 'abc123');
const token = GM_getValue('token');

// 跨域请求
GM_xmlhttpRequest({
  method: "GET",
  url: "https://api.example.com/data",
  onload: function(response) {
    console.log(response.responseText);
  }
});

二、脚本逻辑编写技巧

DOM操作

// 错误示范（直接操作可能失败）
document.querySelector('.btn').click();

// 正确做法（等待DOM加载）
function waitForElement(selector, callback) {
  if (document.querySelector(selector)) {
    callback();
  } else {
    setTimeout(() => waitForElement(selector, callback), 500);
  }
}

waitForElement('.btn', () => {
  document.querySelector('.btn').click();
});
// 或者使用MutationObserver监听DOM变化
const observer = new MutationObserver(() => {
    const btn = document.querySelector('.load-more');
    if(btn) btn.click();
});
observer.observe(document.body, { childList: true, subtree: true });

使用GM函数

// 跨域请求
GM_xmlhttpRequest({
    method: "GET",
    url: "https://api.example.com/data",
    onload: function(response) {
        console.log(response.responseText);
    }
});

// 存储数据
GM_setValue('lastVisit', new Date().toISOString());
const lastVisit = GM_getValue('lastVisit', '从未访问');

三、发布全流程详解（GreasyFork为例）

• 访问 GreasyFork脚本提交页面
• 登录/注册
• 脚本发布：登录后 首页-更多-用户列表（搜索自己的账户名）- 点击发布脚本即可

如果不声明@license 发布时会有弹窗警告，建议MIT