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

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

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

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

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

1.1 核心指令详解

js 复制代码
// ==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规则深度解析

js 复制代码
// 匹配知乎所有页面
@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权限系统完全指南

js 复制代码
// 存储相关
@grant GM_setValue
@grant GM_getValue
@grant GM_deleteValue
@grant GM_listValues

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

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

权限使用示例​​:

js 复制代码
// 存储数据
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操作

js 复制代码
// 错误示范(直接操作可能失败)
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函数

js 复制代码
// 跨域请求
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为例)

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

相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina3 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js