1. 从浏览器自动化到个人效率工具为什么油猴脚本依然是我的首选在AI Agent、RAG开发、智能体这些概念满天飞的今天你可能觉得一个运行在浏览器里的、用JavaScript写的用户脚本也就是油猴脚本有点“古典”了。确实现在有更“高级”的玩法比如用LangChain搭建知识库用Cursor进行远程开发或者搞一套企业级的ReactNode.js全栈应用。但作为一个干了十多年开发的老兵我依然会把油猴脚本作为解决日常效率问题的第一把“瑞士军刀”。原因很简单它足够轻、足够快、足够直接能让你在几分钟内用最少的代码解决一个最具体的痛点。想象一下这些场景你每天要登录一个内部老旧的管理系统操作繁琐没有批量功能你常逛的某个论坛或内容网站页面广告太多、排版混乱影响阅读你需要从某个不支持导出功能的网页上定期抓取一些数据手动复制粘贴到Excel里……这些“小麻烦”不值得你启动一个全栈项目也不值得你去研究复杂的浏览器插件开发那涉及manifest.json、background scripts、content scripts、popup页面等一系列概念。而油猴脚本就像一个精准的外科手术刀直接对目标网页的DOM进行操作注入你需要的功能或样式。它的核心价值在于“用户脚本”这个定位。它不是为了上架Chrome应用商店而生的“产品”而是为你自己、或小范围团队服务的“工具”。开发门槛极低只需要懂一些JavaScript和DOM操作就能立刻开始。发布也极其简单一个.user.js文件分享出去别人一点就能安装。这种即时反馈和极简的闭环是任何“重型”开发流程都无法比拟的。今天我就结合自己多年的经验把从零开始开发一个实用油猴脚本到最终发布分享的完整流程以及其中那些官方文档不会写的“坑”和技巧给你彻底讲透。2. 环境准备与第一个脚本不仅仅是安装Tampermonkey很多人以为开发油猴脚本就是装个Tampermonkey插件然后新建一个脚本开始写。这没错但如果你想开发得更专业、调试得更顺畅还需要一些额外的准备。2.1 核心工具脚本管理器的选择与进阶配置首先你需要一个用户脚本管理器。Tampermonkey是目前最流行、功能最强大的选择支持Chrome、Edge、Firefox、Safari等几乎所有主流浏览器。另一个常见的选项是Violentmonkey它更轻量、开源但功能上稍逊于Tampermonkey。对于绝大多数开发者我推荐直接使用Tampermonkey。安装好Tampermonkey后点击浏览器工具栏上的图标选择“仪表盘”。这里是你所有脚本的管理中心。但作为开发者我强烈建议你打开“设置”页面关注这两个选项“编辑器”配置Tampermonkey内置了一个简单的代码编辑器但对于复杂脚本它远远不够。我习惯将“编辑器”设置为“外部编辑器”。这样当你在仪表盘点击“添加新脚本”或编辑现有脚本时它会直接在VSCode或你喜欢的任何编辑器中打开一个临时文件进行编辑。保存后Tampermonkey会自动检测到更改并重新加载脚本。这让你能享受到IDE的代码高亮、自动补全和错误提示。“实验性”功能在设置中开启“允许访问本地文件”。这能让你在脚本开发初期直接通过file://协议加载本地的CSS、图片或其他资源方便调试。但请注意脚本发布给他人使用时这个功能是无效的因为他们的脚本是从远程加载的。2.2 项目结构与现代开发流程的接轨虽然一个油猴脚本本质上就是一个.user.js文件但当你开发稍微复杂一点的脚本时直接在一个文件里堆砌所有代码会变得难以维护。我们可以借鉴现代前端开发的一些思路。我通常的目录结构是这样的my-userscript/ ├── src/ │ ├── main.js // 脚本主逻辑入口 │ ├── utils.js // 工具函数 │ ├── styles.css // 注入的样式 │ └── ... ├── dist/ │ └── my-script.user.js // 构建后生成的最终脚本文件 ├── package.json // 可选用于管理构建依赖 └── build.js // 可选简单的构建脚本是的你可以为油猴脚本项目初始化一个package.json使用npm来管理依赖比如代码压缩工具、CSS预处理器等。然后写一个简单的Node.js构建脚本build.js它负责将src/下的多个JS文件合并。将CSS文件内容通过GM_addStyle或动态创建style标签的方式内联到最终的JS代码中。在脚本头部添加正确的元数据块UserScript。最终输出一个单一的、干净的my-script.user.js到dist/目录。这样做的好处是你可以在src/里用ES6的语法写模块化的代码然后用构建工具如Webpack、Rollup或简单的自写脚本进行转译和打包生成浏览器兼容的最终产物。这大大提升了开发体验和代码质量。2.3 编写你的“Hello World”脚本让我们抛开构建工具先写一个最简单的脚本感受一下流程。在Tampermonkey仪表盘点击“添加新脚本”你会看到一个预设模板。// UserScript // name My First Script // namespace http://tampermonkey.net/ // version 0.1 // description try to take over the world! // author You // match https://www.example.com/* // grant none // /UserScript (function() { use strict; // Your code here... console.log(Hello from Tampermonkey!); })();这个模板包含了几个关键部分元数据块 (UserScript): 这是脚本的“身份证”管理器靠它来识别脚本。我们稍后会详细解读每一个指令。IIFE (立即调用函数表达式):(function() { ... })();这是为了避免污染目标网页的全局命名空间。你所有的代码都应该写在这个函数里。现在把match改成你经常访问的一个网站比如https://www.baidu.com/*。保存脚本CtrlS然后打开百度首页。打开开发者工具F12的控制台你应该能看到输出的“Hello from Tampermonkey!”。恭喜你的第一个脚本已经成功运行了注意在脚本开发过程中每次修改代码并保存后需要刷新目标页面才能让新代码生效。Tampermonkey虽然会重新加载脚本但已经注入到页面中的旧脚本实例需要页面刷新才能被替换。3. 深入解析元数据块脚本的“控制中枢”元数据块是油猴脚本的灵魂它定义了脚本在何时、何地、以何种方式运行以及拥有什么权限。理解每一个指令的含义至关重要。3.1 核心匹配指令精确控制脚本的生效范围match: 这是最常用、最推荐的匹配指令。它使用Chrome扩展匹配模式语法更精确。例如https://www.google.com/*匹配所有以https://www.google.com/开头的URL。https://*.github.com/*匹配github.com的所有子域名。*://*.example.com/path/*匹配example.com下/path/路径的所有协议http/https。限制match不能匹配file://协议本地文件或特定的端口如:8080除非显式写出。include/exclude: 这两个指令使用更简单的通配符模式*。include定义匹配规则exclude定义排除规则。它们比match更灵活但精度稍差。通常与match结合使用用于微调。include *://*/*匹配所有URL慎用。include /^https?://www\.example\.com/\d/使用正则表达式匹配功能强大但需谨慎。最佳实践优先使用match来定义核心匹配域因为它更安全、意图更清晰。如果需要排除某个特定子路径再结合使用exclude。绝对避免使用过于宽泛的匹配规则如*://*/*除非你的脚本是全局工具如网页翻译、暗色模式否则会严重影响浏览器性能和安全。3.2 权限授予指令解锁GM_* API的强大能力grant指令用于声明脚本需要使用的特殊APIGM_* API。这些API由脚本管理器提供允许脚本执行超出普通JavaScript沙箱范围的操作是油猴脚本强大功能的来源。grant none: 脚本不需要任何特殊权限完全在网页的沙箱中运行。这是最安全的模式但功能受限。grant GM_*: 声明需要特定的GM API。例如grant GM_getValue/grant GM_setValue: 用于在本地存储键值对数据实现配置持久化。grant GM_xmlhttpRequest: 这是最重要的API之一。它允许脚本向任何域发送HTTP请求跨域这是实现数据抓取、与自有API交互的关键。它比原生的fetch或XMLHttpRequest更强大可以绕过CORS限制。grant GM_addStyle: 方便地向页面注入CSS样式。grant GM_notification: 发送桌面通知。grant GM_openInTab: 在新标签页打开链接。一个常见的误区很多人会写成grant GM_*或列出所有可能用到的API。正确的做法是只声明你确实会用到的API。例如// UserScript // grant GM_getValue // grant GM_setValue // grant GM_xmlhttpRequest // /UserScript如果声明了但未使用可能会引发警告如果使用了但未声明脚本会运行失败。3.3 其他重要指令name/description: 脚本的名称和描述。描述要清晰让别人一眼知道这个脚本是干什么的。namespace: 一个唯一的标识符通常是你个人域名倒写如com.github.yourname用于区分不同作者的脚本。version: 版本号。遵循语义化版本如1.2.3每次发布更新时递增。用户脚本管理器靠这个来判断是否有更新。author: 你的名字。updateURL/downloadURL: 用于脚本自动更新。updateURL指向一个元数据文件通常也是一个.user.js但可以只包含元数据管理器定期检查该文件获取新版本信息。downloadURL是新版本脚本的直接下载链接。如果两者一致可以只写updateURL。require: 引入外部JS库如jQuery、Lodash等。慎用因为这会让你的脚本依赖第三方资源如果该资源不可用你的脚本也会失效。尽量将所需库函数内联或使用GM_xmlhttpRequest动态获取并eval安全性要求高。connect: 配合GM_xmlhttpRequest使用声明脚本会连接的域名。这是一个安全特性让管理器和用户知道脚本会访问哪些外部资源。例如connect api.example.com。4. 核心开发技巧从DOM操作到异步通信掌握了基础我们来深入脚本开发的核心环节。这里面的坑可比写一个console.log多多了。4.1 等待页面元素加载不要依赖DOMContentLoaded这是新手最容易踩的坑。你写了一段代码去操作页面上的一个按钮但运行时却报错“找不到元素”。原因是你脚本的执行时机可能早于那个按钮被加载到DOM中。错误示范(function() { use strict; const button document.getElementById(myButton); // 可能为null button.addEventListener(click, () {...}); })();解决方案使用MutationObserver监听DOM变化这是最可靠、最现代的方法。它监听指定节点子树的变化当目标元素出现时触发回调。function waitForElement(selector, callback) { if (document.querySelector(selector)) { callback(document.querySelector(selector)); return; } const observer new MutationObserver((mutations, obs) { if (document.querySelector(selector)) { callback(document.querySelector(selector)); obs.disconnect(); // 找到后停止观察 } }); observer.observe(document.body, { childList: true, subtree: true }); } waitForElement(#myButton, (button) { button.addEventListener(click, () { console.log(Button clicked!); }); // 还可以在这里修改按钮样式等 button.style.backgroundColor red; });你可以把这个waitForElement函数封装成工具函数在脚本中反复使用。使用setInterval轮询这是一种传统但有效的方法在简单场景下可以使用。const checkInterval setInterval(() { const element document.querySelector(.dynamic-content); if (element) { clearInterval(checkInterval); // 操作element doSomethingWith(element); } }, 500); // 每500毫秒检查一次注意要设置一个上限比如最多检查10次避免无限循环。针对SPA单页应用的特殊处理像React、Vue构建的应用页面内容动态切换但URL不变。此时除了监听DOM还需要监听前端路由的变化。可以监听window的popstate和hashchange事件或者在SPA框架的全局钩子里执行你的脚本逻辑如果框架暴露了相关API。4.2 安全地使用GM_xmlhttpRequest进行跨域请求GM_xmlhttpRequest是油猴脚本的“王牌”功能。它的用法和原生XMLHttpRequest类似但更强大。基本用法GM_xmlhttpRequest({ method: GET, url: https://api.example.com/data, headers: { User-Agent: Mozilla/5.0 ..., Custom-Header: MyValue }, onload: function(response) { // 请求成功 console.log(Status:, response.status); console.log(Response:, response.responseText); try { const data JSON.parse(response.responseText); processData(data); } catch (e) { console.error(Parse JSON error:, e); } }, onerror: function(error) { // 请求失败网络错误等 console.error(Request failed:, error); }, ontimeout: function() { // 请求超时 console.error(Request timeout); } });关键细节与避坑指南connect指令如果你的请求URL不在脚本当前运行的页面域名下必须在元数据块中使用connect声明目标域名如connect api.example.com。否则在默认的安全设置下请求会被Tampermonkey阻止。你可以声明多个connect甚至使用通配符connect *不推荐安全性差。处理JSONonload回调中的response.responseText永远是字符串。即使服务器返回Content-Type: application/json你也需要手动调用JSON.parse。务必用try...catch包裹因为服务器可能返回非JSON数据如错误HTML页面。同步请求GM_xmlhttpRequest不支持同步模式async: false。所有请求都是异步的你必须使用回调函数或Promise封装来处理后续逻辑。封装为Promise为了更好的代码可读性我强烈建议将GM_xmlhttpRequest封装成一个返回Promise的函数。function gmRequest(options) { return new Promise((resolve, reject) { GM_xmlhttpRequest({ ...options, onload: (resp) { if (resp.status 200 resp.status 300) { resolve(resp); } else { reject(new Error(HTTP ${resp.status}: ${resp.statusText})); } }, onerror: reject, ontimeout: reject }); }); } // 使用示例 async function fetchData() { try { const resp await gmRequest({ method: GET, url: https://api.example.com/data }); const data JSON.parse(resp.responseText); return data; } catch (error) { console.error(Failed to fetch data:, error); return null; } }4.3 样式注入与UI构建保持对页面的“友好”入侵油猴脚本经常需要修改页面样式或添加自己的UI元素。目标是增强体验而不是破坏原有页面。使用GM_addStyle注入CSSGM_addStyle( /* 隐藏烦人的广告 */ .ad-container, #sidebar-ads { display: none !important; } /* 美化某个区域 */ .my-enhanced-area { border: 2px solid #4CAF50; padding: 10px; border-radius: 5px; } /* 确保自定义UI在最上层 */ #my-custom-ui { z-index: 999999 !important; position: fixed !important; } );!important在这里是你的好朋友因为你需要覆盖页面原有的样式。但要谨慎使用避免过度影响页面其他部分。创建自定义UI元素直接在页面上添加按钮、面板等。function createControlPanel() { const panel document.createElement(div); panel.id my-script-panel; panel.innerHTML h3脚本控制台/h3 button idbtn-action执行操作/button input typerange idslider min0 max100 p状态: span idstatus就绪/span/p ; // 应用样式 Object.assign(panel.style, { position: fixed, top: 20px, right: 20px, background: white, border: 1px solid #ccc, padding: 15px, borderRadius: 8px, boxShadow: 0 2px 10px rgba(0,0,0,0.1), zIndex: 10000 }); document.body.appendChild(panel); // 绑定事件 document.getElementById(btn-action).addEventListener(click, handleAction); document.getElementById(slider).addEventListener(input, handleSliderChange); } // 等待页面主体加载后创建UI waitForElement(body, () { createControlPanel(); });关键点将UI元素直接附加到document.body并设置较高的z-index和position: fixed可以确保它悬浮在页面内容之上。同时记得为元素添加一个唯一ID方便后续查找和操作也避免与其他脚本冲突。5. 调试、测试与发布让脚本稳定可靠脚本写好了但在你自己的浏览器上跑通只是第一步。如何确保它在不同环境下都能工作如何分享给别人5.1 高效的调试方法论油猴脚本的调试主要依靠浏览器自带的开发者工具。源代码查看在开发者工具的“源代码”面板你可以找到“Tampermonkey”或“Violentmonkey”的虚拟目录里面列出了所有正在运行的脚本。你可以在这里直接打断点、单步调试就像调试普通网页JS一样。控制台输出脚本中的console.log、console.error会输出到页面的控制台。强烈建议为你的日志加上特定前缀便于在纷杂的页面日志中快速定位。const LOG_PREFIX [MyScript]; console.log(LOG_PREFIX, 元素加载完成:, element); console.error(LOG_PREFIX, 请求失败:, error);网络请求监控使用GM_xmlhttpRequest发起的请求可以在开发者工具的“网络”面板中看到。检查请求头、响应状态和内容是否正确。脚本开关与隔离测试在Tampermonkey仪表盘中可以方便地启用/禁用某个脚本。在测试时可以禁用其他所有脚本排除干扰。对于匹配多个站点的脚本要逐一在不同站点测试其行为是否符合预期。5.2 版本管理与更新策略元数据块中的version是脚本更新的关键。当用户安装的脚本版本低于你服务器上发布的版本时Tampermonkey会提示更新。更新流程你修改了脚本代码。更新元数据块中的version例如从1.0.0到1.0.1。将新的.user.js文件上传到你的发布地址如GitHub Gist、GitHub Releases、自建服务器等。确保元数据块中的updateURL指向这个最新文件的地址如果和downloadURL相同可只写updateURL。已安装的用户会在下次打开浏览器或等待Tampermonkey自动检查更新可设置检查间隔时收到更新提示。一个实用的发布技巧——使用GitHub Gist在GitHub上创建一个Gist需要登录将你的脚本代码粘贴进去。文件名最好以.user.js结尾例如my-script.user.js。创建后你会得到一个Gist的URL如https://gist.githubusercontent.com/yourname/gist_id/raw/...。点击Gist页面的“Raw”按钮获取纯文本文件的原始URL。这个URL就是你的updateURL和downloadURL。以后更新脚本只需在Gist中编辑文件并保存新的原始URL不变Gist ID不变但内容已更新。用户端的Tampermonkey会根据版本号检测到更新。5.3 发布到脚本社区除了直接分享.user.js文件的链接你还可以将脚本发布到专门的用户脚本社区如Greasy Fork或OpenUserJS。这些平台提供了更规范的发布流程、版本管理、用户反馈和安装统计。以Greasy Fork为例注册账号并登录。点击“发布新脚本”。粘贴你的脚本代码。平台会自动解析元数据块。填写额外的信息如更详细的描述、分类、标签等。提交后脚本会经过一次自动的代码质量扫描主要是安全检查然后就可以公开安装了。后续更新时只需在脚本页面点击“更新脚本”粘贴新代码即可。发布到社区的好处曝光度高容易被有相同需求的用户发现。自动更新用户安装后社区平台会替你管理更新推送。反馈渠道用户可以在页面留言报告bug或提出建议。注意事项确保你的脚本不违反目标网站的服务条款。一些网站明确禁止自动化脚本。在脚本描述中清晰说明功能、使用方法和注意事项。尊重用户隐私不要在脚本中收集不必要的用户数据。如果确实需要要明确告知并征得同意。6. 进阶实战构建一个带配置界面的网页优化脚本让我们综合以上所有知识实战一个稍微复杂点的例子一个用于某内容网站假设为example.com的优化脚本。功能包括1) 隐藏侧边栏广告2) 增强文章阅读体验调整字体、行高3) 添加一个“夜间模式”切换按钮。并且所有这些功能都是可配置的。6.1 设计配置存储与加载我们将使用GM_getValue和GM_setValue来存储用户配置。// UserScript // name Example.com Enhancer // namespace https://github.com/yourname // version 1.0.0 // description 优化Example.com的阅读体验支持隐藏广告、调整版式、夜间模式。 // author YourName // match https://www.example.com/* // grant GM_getValue // grant GM_setValue // grant GM_addStyle // /UserScript (function() { use strict; // 默认配置 const DEFAULT_CONFIG { hideAds: true, fontSize: 18px, lineHeight: 1.8, nightMode: false }; // 加载配置如果没有则使用默认值 const CONFIG (() { const saved GM_getValue(config); return saved ? { ...DEFAULT_CONFIG, ...saved } : DEFAULT_CONFIG; })(); // 保存配置的函数 function saveConfig(newConfig) { Object.assign(CONFIG, newConfig); GM_setValue(config, CONFIG); applyConfig(); // 保存后立即应用新配置 } })();6.2 应用配置并创建UI接下来我们根据配置应用样式并创建一个浮动的控制面板让用户修改配置。// 应用当前配置到页面 function applyConfig() { // 清理之前可能添加的样式 const oldStyle document.getElementById(example-enhancer-style); if (oldStyle) oldStyle.remove(); let css ; if (CONFIG.hideAds) { css .ad-unit, .sponsored-content { display: none !important; }; } css article { font-size: ${CONFIG.fontSize} !important; line-height: ${CONFIG.lineHeight} !important; }; if (CONFIG.nightMode) { css body { background-color: #1a1a1a !important; color: #e0e0e0 !important; }; css article { color: #f0f0f0 !important; }; } GM_addStyle(style idexample-enhancer-style${css}/style); } // 创建控制面板UI function createControlPanel() { const panel document.createElement(div); panel.id example-enhancer-panel; panel.innerHTML div styledisplay: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; strong页面优化器/strong button idenhancer-close styleborder:none; background:none; cursor:pointer; font-size:1.2em;×/button /div div stylemargin-bottom: 10px; labelinput typecheckbox idenhancer-hide-ads ${CONFIG.hideAds ? checked : } 隐藏广告/label /div div stylemargin-bottom: 10px; label字体大小 select idenhancer-font-size option value16px ${CONFIG.fontSize 16px ? selected : }小/option option value18px ${CONFIG.fontSize 18px ? selected : }中/option option value20px ${CONFIG.fontSize 20px ? selected : }大/option /select /label /div div stylemargin-bottom: 10px; label行高 input typerange idenhancer-line-height min1.2 max2.4 step0.1 value${CONFIG.lineHeight} span idenhancer-line-height-value${CONFIG.lineHeight}/span /label /div div stylemargin-bottom: 15px; labelinput typecheckbox idenhancer-night-mode ${CONFIG.nightMode ? checked : } 夜间模式/label /div button idenhancer-reset stylewidth:100%;恢复默认设置/button ; // 样式 Object.assign(panel.style, { position: fixed, top: 60px, right: 20px, width: 250px, backgroundColor: white, border: 1px solid #ddd, borderRadius: 8px, padding: 15px, boxShadow: 0 4px 12px rgba(0,0,0,0.15), zIndex: 10000, fontFamily: sans-serif, fontSize: 14px }); document.body.appendChild(panel); // 绑定事件 document.getElementById(enhancer-close).addEventListener(click, () panel.style.display none); document.getElementById(enhancer-hide-ads).addEventListener(change, (e) saveConfig({ hideAds: e.target.checked })); document.getElementById(enhancer-font-size).addEventListener(change, (e) saveConfig({ fontSize: e.target.value })); const lineHeightSlider document.getElementById(enhancer-line-height); const lineHeightValue document.getElementById(enhancer-line-height-value); lineHeightSlider.addEventListener(input, (e) { lineHeightValue.textContent e.target.value; }); lineHeightSlider.addEventListener(change, (e) saveConfig({ lineHeight: e.target.value })); document.getElementById(enhancer-night-mode).addEventListener(change, (e) saveConfig({ nightMode: e.target.checked })); document.getElementById(enhancer-reset).addEventListener(click, () { if (confirm(确定要恢复所有默认设置吗)) { GM_setValue(config, DEFAULT_CONFIG); Object.assign(CONFIG, DEFAULT_CONFIG); applyConfig(); // 刷新UI状态 document.getElementById(enhancer-hide-ads).checked CONFIG.hideAds; document.getElementById(enhancer-font-size).value CONFIG.fontSize; document.getElementById(enhancer-line-height).value CONFIG.lineHeight; lineHeightValue.textContent CONFIG.lineHeight; document.getElementById(enhancer-night-mode).checked CONFIG.nightMode; } }); // 添加一个显示/隐藏面板的触发器按钮可以放在角落 const toggleBtn document.createElement(button); toggleBtn.textContent ⚙️; Object.assign(toggleBtn.style, { position: fixed, top: 20px, right: 20px, zIndex: 9999, fontSize: 20px, background: #4CAF50, color: white, border: none, borderRadius: 50%, width: 40px, height: 40px, cursor: pointer }); toggleBtn.addEventListener(click, () { panel.style.display panel.style.display none ? block : none; }); document.body.appendChild(toggleBtn); } // 主初始化函数 function init() { applyConfig(); // 首次加载应用配置 waitForElement(body, () { createControlPanel(); }); } // 启动 init();这个脚本展示了油猴脚本开发的几个关键进阶点配置的持久化存储、动态样式的应用与清理、交互式UI的创建与事件绑定以及如何将多个功能模块化地组织在一起。用户的所有偏好设置都会被保存在本地下次访问同一网站时自动生效体验非常连贯。7. 安全、伦理与最佳实践开发油猴脚本赋予了你强大的能力但随之而来的是责任。最后我们来谈谈那些比技术更重要的东西。7.1 安全第一保护自己与用户最小权限原则在grant中只声明你真正需要的API。不要为了“可能用到”而请求GM_xmlhttpRequest或GM_getResourceURL等敏感权限。谨慎处理外部资源使用require加载外部库时确保来源可信如知名CDN。更好的做法是将必要的库函数内联到你的脚本中避免因第三方资源失效导致脚本瘫痪。避免eval尽量不要使用eval()函数来执行动态代码这有严重的安全风险。如果必须执行动态代码比如从自己信任的服务器获取配置务必对内容进行严格的校验和清理。数据存储安全GM_getValue/GM_setValue存储的数据虽然相对安全存储在扩展本地但也不要在其中保存密码、密钥等极度敏感的信息。7.2 伦理与法律边界尊重robots.txt如果你用脚本进行网页抓取请遵守目标网站的robots.txt协议。过于频繁的请求可能会对对方服务器造成压力甚至导致你的IP被封锁。遵守服务条款许多网站尤其是社交平台、付费内容平台在其服务条款中明确禁止自动化脚本。使用脚本绕过付费墙、自动发送消息、批量采集受版权保护的内容等行为可能违反法律或平台规则。明确脚本意图在脚本描述中清晰、诚实地说明脚本的功能。如果是为了辅助学习、提升可访问性或工作效率通常更容易被接受。避免开发用于作弊、欺诈或恶意攻击的脚本。考虑性能影响你的脚本不应显著降低页面的加载速度或浏览器的响应性能。避免在滚动等高频事件中执行复杂操作合理使用setTimeout或requestAnimationFrame进行节流。7.3 代码质量与维护性添加注释尤其是复杂的逻辑或针对特定网站结构的Hack要写清楚为什么这么做。处理错误使用try...catch包裹可能出错的操作如DOM操作、网络请求、JSON解析并在控制台输出有意义的错误信息方便自己调试。模块化随着脚本功能增多将代码拆分成不同的函数或文件通过构建工具合并提高可读性和可维护性。版本日志在发布更新时在脚本的顶部或发布页面写清楚更新日志Changelog让用户知道这次更新了什么、修复了什么。油猴脚本的世界充满了创造力和可能性。它把改造互联网的权力交到了每一个懂一点代码的用户手中。从屏蔽一个恼人的弹窗到打造一个高度定制化的信息聚合面板其边界只取决于你的想象力和对网页技术的理解。希望这份从开发到发布的详细指南能帮你更顺手地打造属于自己的浏览器增强工具在纷繁复杂的网络世界中为自己争取那么一点点的效率与优雅。 油猴脚本开发全攻略：从自动化到效率工具，掌握浏览器扩展核心技能
1. 从浏览器自动化到个人效率工具为什么油猴脚本依然是我的首选在AI Agent、RAG开发、智能体这些概念满天飞的今天你可能觉得一个运行在浏览器里的、用JavaScript写的用户脚本也就是油猴脚本有点“古典”了。确实现在有更“高级”的玩法比如用LangChain搭建知识库用Cursor进行远程开发或者搞一套企业级的ReactNode.js全栈应用。但作为一个干了十多年开发的老兵我依然会把油猴脚本作为解决日常效率问题的第一把“瑞士军刀”。原因很简单它足够轻、足够快、足够直接能让你在几分钟内用最少的代码解决一个最具体的痛点。想象一下这些场景你每天要登录一个内部老旧的管理系统操作繁琐没有批量功能你常逛的某个论坛或内容网站页面广告太多、排版混乱影响阅读你需要从某个不支持导出功能的网页上定期抓取一些数据手动复制粘贴到Excel里……这些“小麻烦”不值得你启动一个全栈项目也不值得你去研究复杂的浏览器插件开发那涉及manifest.json、background scripts、content scripts、popup页面等一系列概念。而油猴脚本就像一个精准的外科手术刀直接对目标网页的DOM进行操作注入你需要的功能或样式。它的核心价值在于“用户脚本”这个定位。它不是为了上架Chrome应用商店而生的“产品”而是为你自己、或小范围团队服务的“工具”。开发门槛极低只需要懂一些JavaScript和DOM操作就能立刻开始。发布也极其简单一个.user.js文件分享出去别人一点就能安装。这种即时反馈和极简的闭环是任何“重型”开发流程都无法比拟的。今天我就结合自己多年的经验把从零开始开发一个实用油猴脚本到最终发布分享的完整流程以及其中那些官方文档不会写的“坑”和技巧给你彻底讲透。2. 环境准备与第一个脚本不仅仅是安装Tampermonkey很多人以为开发油猴脚本就是装个Tampermonkey插件然后新建一个脚本开始写。这没错但如果你想开发得更专业、调试得更顺畅还需要一些额外的准备。2.1 核心工具脚本管理器的选择与进阶配置首先你需要一个用户脚本管理器。Tampermonkey是目前最流行、功能最强大的选择支持Chrome、Edge、Firefox、Safari等几乎所有主流浏览器。另一个常见的选项是Violentmonkey它更轻量、开源但功能上稍逊于Tampermonkey。对于绝大多数开发者我推荐直接使用Tampermonkey。安装好Tampermonkey后点击浏览器工具栏上的图标选择“仪表盘”。这里是你所有脚本的管理中心。但作为开发者我强烈建议你打开“设置”页面关注这两个选项“编辑器”配置Tampermonkey内置了一个简单的代码编辑器但对于复杂脚本它远远不够。我习惯将“编辑器”设置为“外部编辑器”。这样当你在仪表盘点击“添加新脚本”或编辑现有脚本时它会直接在VSCode或你喜欢的任何编辑器中打开一个临时文件进行编辑。保存后Tampermonkey会自动检测到更改并重新加载脚本。这让你能享受到IDE的代码高亮、自动补全和错误提示。“实验性”功能在设置中开启“允许访问本地文件”。这能让你在脚本开发初期直接通过file://协议加载本地的CSS、图片或其他资源方便调试。但请注意脚本发布给他人使用时这个功能是无效的因为他们的脚本是从远程加载的。2.2 项目结构与现代开发流程的接轨虽然一个油猴脚本本质上就是一个.user.js文件但当你开发稍微复杂一点的脚本时直接在一个文件里堆砌所有代码会变得难以维护。我们可以借鉴现代前端开发的一些思路。我通常的目录结构是这样的my-userscript/ ├── src/ │ ├── main.js // 脚本主逻辑入口 │ ├── utils.js // 工具函数 │ ├── styles.css // 注入的样式 │ └── ... ├── dist/ │ └── my-script.user.js // 构建后生成的最终脚本文件 ├── package.json // 可选用于管理构建依赖 └── build.js // 可选简单的构建脚本是的你可以为油猴脚本项目初始化一个package.json使用npm来管理依赖比如代码压缩工具、CSS预处理器等。然后写一个简单的Node.js构建脚本build.js它负责将src/下的多个JS文件合并。将CSS文件内容通过GM_addStyle或动态创建style标签的方式内联到最终的JS代码中。在脚本头部添加正确的元数据块UserScript。最终输出一个单一的、干净的my-script.user.js到dist/目录。这样做的好处是你可以在src/里用ES6的语法写模块化的代码然后用构建工具如Webpack、Rollup或简单的自写脚本进行转译和打包生成浏览器兼容的最终产物。这大大提升了开发体验和代码质量。2.3 编写你的“Hello World”脚本让我们抛开构建工具先写一个最简单的脚本感受一下流程。在Tampermonkey仪表盘点击“添加新脚本”你会看到一个预设模板。// UserScript // name My First Script // namespace http://tampermonkey.net/ // version 0.1 // description try to take over the world! // author You // match https://www.example.com/* // grant none // /UserScript (function() { use strict; // Your code here... console.log(Hello from Tampermonkey!); })();这个模板包含了几个关键部分元数据块 (UserScript): 这是脚本的“身份证”管理器靠它来识别脚本。我们稍后会详细解读每一个指令。IIFE (立即调用函数表达式):(function() { ... })();这是为了避免污染目标网页的全局命名空间。你所有的代码都应该写在这个函数里。现在把match改成你经常访问的一个网站比如https://www.baidu.com/*。保存脚本CtrlS然后打开百度首页。打开开发者工具F12的控制台你应该能看到输出的“Hello from Tampermonkey!”。恭喜你的第一个脚本已经成功运行了注意在脚本开发过程中每次修改代码并保存后需要刷新目标页面才能让新代码生效。Tampermonkey虽然会重新加载脚本但已经注入到页面中的旧脚本实例需要页面刷新才能被替换。3. 深入解析元数据块脚本的“控制中枢”元数据块是油猴脚本的灵魂它定义了脚本在何时、何地、以何种方式运行以及拥有什么权限。理解每一个指令的含义至关重要。3.1 核心匹配指令精确控制脚本的生效范围match: 这是最常用、最推荐的匹配指令。它使用Chrome扩展匹配模式语法更精确。例如https://www.google.com/*匹配所有以https://www.google.com/开头的URL。https://*.github.com/*匹配github.com的所有子域名。*://*.example.com/path/*匹配example.com下/path/路径的所有协议http/https。限制match不能匹配file://协议本地文件或特定的端口如:8080除非显式写出。include/exclude: 这两个指令使用更简单的通配符模式*。include定义匹配规则exclude定义排除规则。它们比match更灵活但精度稍差。通常与match结合使用用于微调。include *://*/*匹配所有URL慎用。include /^https?://www\.example\.com/\d/使用正则表达式匹配功能强大但需谨慎。最佳实践优先使用match来定义核心匹配域因为它更安全、意图更清晰。如果需要排除某个特定子路径再结合使用exclude。绝对避免使用过于宽泛的匹配规则如*://*/*除非你的脚本是全局工具如网页翻译、暗色模式否则会严重影响浏览器性能和安全。3.2 权限授予指令解锁GM_* API的强大能力grant指令用于声明脚本需要使用的特殊APIGM_* API。这些API由脚本管理器提供允许脚本执行超出普通JavaScript沙箱范围的操作是油猴脚本强大功能的来源。grant none: 脚本不需要任何特殊权限完全在网页的沙箱中运行。这是最安全的模式但功能受限。grant GM_*: 声明需要特定的GM API。例如grant GM_getValue/grant GM_setValue: 用于在本地存储键值对数据实现配置持久化。grant GM_xmlhttpRequest: 这是最重要的API之一。它允许脚本向任何域发送HTTP请求跨域这是实现数据抓取、与自有API交互的关键。它比原生的fetch或XMLHttpRequest更强大可以绕过CORS限制。grant GM_addStyle: 方便地向页面注入CSS样式。grant GM_notification: 发送桌面通知。grant GM_openInTab: 在新标签页打开链接。一个常见的误区很多人会写成grant GM_*或列出所有可能用到的API。正确的做法是只声明你确实会用到的API。例如// UserScript // grant GM_getValue // grant GM_setValue // grant GM_xmlhttpRequest // /UserScript如果声明了但未使用可能会引发警告如果使用了但未声明脚本会运行失败。3.3 其他重要指令name/description: 脚本的名称和描述。描述要清晰让别人一眼知道这个脚本是干什么的。namespace: 一个唯一的标识符通常是你个人域名倒写如com.github.yourname用于区分不同作者的脚本。version: 版本号。遵循语义化版本如1.2.3每次发布更新时递增。用户脚本管理器靠这个来判断是否有更新。author: 你的名字。updateURL/downloadURL: 用于脚本自动更新。updateURL指向一个元数据文件通常也是一个.user.js但可以只包含元数据管理器定期检查该文件获取新版本信息。downloadURL是新版本脚本的直接下载链接。如果两者一致可以只写updateURL。require: 引入外部JS库如jQuery、Lodash等。慎用因为这会让你的脚本依赖第三方资源如果该资源不可用你的脚本也会失效。尽量将所需库函数内联或使用GM_xmlhttpRequest动态获取并eval安全性要求高。connect: 配合GM_xmlhttpRequest使用声明脚本会连接的域名。这是一个安全特性让管理器和用户知道脚本会访问哪些外部资源。例如connect api.example.com。4. 核心开发技巧从DOM操作到异步通信掌握了基础我们来深入脚本开发的核心环节。这里面的坑可比写一个console.log多多了。4.1 等待页面元素加载不要依赖DOMContentLoaded这是新手最容易踩的坑。你写了一段代码去操作页面上的一个按钮但运行时却报错“找不到元素”。原因是你脚本的执行时机可能早于那个按钮被加载到DOM中。错误示范(function() { use strict; const button document.getElementById(myButton); // 可能为null button.addEventListener(click, () {...}); })();解决方案使用MutationObserver监听DOM变化这是最可靠、最现代的方法。它监听指定节点子树的变化当目标元素出现时触发回调。function waitForElement(selector, callback) { if (document.querySelector(selector)) { callback(document.querySelector(selector)); return; } const observer new MutationObserver((mutations, obs) { if (document.querySelector(selector)) { callback(document.querySelector(selector)); obs.disconnect(); // 找到后停止观察 } }); observer.observe(document.body, { childList: true, subtree: true }); } waitForElement(#myButton, (button) { button.addEventListener(click, () { console.log(Button clicked!); }); // 还可以在这里修改按钮样式等 button.style.backgroundColor red; });你可以把这个waitForElement函数封装成工具函数在脚本中反复使用。使用setInterval轮询这是一种传统但有效的方法在简单场景下可以使用。const checkInterval setInterval(() { const element document.querySelector(.dynamic-content); if (element) { clearInterval(checkInterval); // 操作element doSomethingWith(element); } }, 500); // 每500毫秒检查一次注意要设置一个上限比如最多检查10次避免无限循环。针对SPA单页应用的特殊处理像React、Vue构建的应用页面内容动态切换但URL不变。此时除了监听DOM还需要监听前端路由的变化。可以监听window的popstate和hashchange事件或者在SPA框架的全局钩子里执行你的脚本逻辑如果框架暴露了相关API。4.2 安全地使用GM_xmlhttpRequest进行跨域请求GM_xmlhttpRequest是油猴脚本的“王牌”功能。它的用法和原生XMLHttpRequest类似但更强大。基本用法GM_xmlhttpRequest({ method: GET, url: https://api.example.com/data, headers: { User-Agent: Mozilla/5.0 ..., Custom-Header: MyValue }, onload: function(response) { // 请求成功 console.log(Status:, response.status); console.log(Response:, response.responseText); try { const data JSON.parse(response.responseText); processData(data); } catch (e) { console.error(Parse JSON error:, e); } }, onerror: function(error) { // 请求失败网络错误等 console.error(Request failed:, error); }, ontimeout: function() { // 请求超时 console.error(Request timeout); } });关键细节与避坑指南connect指令如果你的请求URL不在脚本当前运行的页面域名下必须在元数据块中使用connect声明目标域名如connect api.example.com。否则在默认的安全设置下请求会被Tampermonkey阻止。你可以声明多个connect甚至使用通配符connect *不推荐安全性差。处理JSONonload回调中的response.responseText永远是字符串。即使服务器返回Content-Type: application/json你也需要手动调用JSON.parse。务必用try...catch包裹因为服务器可能返回非JSON数据如错误HTML页面。同步请求GM_xmlhttpRequest不支持同步模式async: false。所有请求都是异步的你必须使用回调函数或Promise封装来处理后续逻辑。封装为Promise为了更好的代码可读性我强烈建议将GM_xmlhttpRequest封装成一个返回Promise的函数。function gmRequest(options) { return new Promise((resolve, reject) { GM_xmlhttpRequest({ ...options, onload: (resp) { if (resp.status 200 resp.status 300) { resolve(resp); } else { reject(new Error(HTTP ${resp.status}: ${resp.statusText})); } }, onerror: reject, ontimeout: reject }); }); } // 使用示例 async function fetchData() { try { const resp await gmRequest({ method: GET, url: https://api.example.com/data }); const data JSON.parse(resp.responseText); return data; } catch (error) { console.error(Failed to fetch data:, error); return null; } }4.3 样式注入与UI构建保持对页面的“友好”入侵油猴脚本经常需要修改页面样式或添加自己的UI元素。目标是增强体验而不是破坏原有页面。使用GM_addStyle注入CSSGM_addStyle( /* 隐藏烦人的广告 */ .ad-container, #sidebar-ads { display: none !important; } /* 美化某个区域 */ .my-enhanced-area { border: 2px solid #4CAF50; padding: 10px; border-radius: 5px; } /* 确保自定义UI在最上层 */ #my-custom-ui { z-index: 999999 !important; position: fixed !important; } );!important在这里是你的好朋友因为你需要覆盖页面原有的样式。但要谨慎使用避免过度影响页面其他部分。创建自定义UI元素直接在页面上添加按钮、面板等。function createControlPanel() { const panel document.createElement(div); panel.id my-script-panel; panel.innerHTML h3脚本控制台/h3 button idbtn-action执行操作/button input typerange idslider min0 max100 p状态: span idstatus就绪/span/p ; // 应用样式 Object.assign(panel.style, { position: fixed, top: 20px, right: 20px, background: white, border: 1px solid #ccc, padding: 15px, borderRadius: 8px, boxShadow: 0 2px 10px rgba(0,0,0,0.1), zIndex: 10000 }); document.body.appendChild(panel); // 绑定事件 document.getElementById(btn-action).addEventListener(click, handleAction); document.getElementById(slider).addEventListener(input, handleSliderChange); } // 等待页面主体加载后创建UI waitForElement(body, () { createControlPanel(); });关键点将UI元素直接附加到document.body并设置较高的z-index和position: fixed可以确保它悬浮在页面内容之上。同时记得为元素添加一个唯一ID方便后续查找和操作也避免与其他脚本冲突。5. 调试、测试与发布让脚本稳定可靠脚本写好了但在你自己的浏览器上跑通只是第一步。如何确保它在不同环境下都能工作如何分享给别人5.1 高效的调试方法论油猴脚本的调试主要依靠浏览器自带的开发者工具。源代码查看在开发者工具的“源代码”面板你可以找到“Tampermonkey”或“Violentmonkey”的虚拟目录里面列出了所有正在运行的脚本。你可以在这里直接打断点、单步调试就像调试普通网页JS一样。控制台输出脚本中的console.log、console.error会输出到页面的控制台。强烈建议为你的日志加上特定前缀便于在纷杂的页面日志中快速定位。const LOG_PREFIX [MyScript]; console.log(LOG_PREFIX, 元素加载完成:, element); console.error(LOG_PREFIX, 请求失败:, error);网络请求监控使用GM_xmlhttpRequest发起的请求可以在开发者工具的“网络”面板中看到。检查请求头、响应状态和内容是否正确。脚本开关与隔离测试在Tampermonkey仪表盘中可以方便地启用/禁用某个脚本。在测试时可以禁用其他所有脚本排除干扰。对于匹配多个站点的脚本要逐一在不同站点测试其行为是否符合预期。5.2 版本管理与更新策略元数据块中的version是脚本更新的关键。当用户安装的脚本版本低于你服务器上发布的版本时Tampermonkey会提示更新。更新流程你修改了脚本代码。更新元数据块中的version例如从1.0.0到1.0.1。将新的.user.js文件上传到你的发布地址如GitHub Gist、GitHub Releases、自建服务器等。确保元数据块中的updateURL指向这个最新文件的地址如果和downloadURL相同可只写updateURL。已安装的用户会在下次打开浏览器或等待Tampermonkey自动检查更新可设置检查间隔时收到更新提示。一个实用的发布技巧——使用GitHub Gist在GitHub上创建一个Gist需要登录将你的脚本代码粘贴进去。文件名最好以.user.js结尾例如my-script.user.js。创建后你会得到一个Gist的URL如https://gist.githubusercontent.com/yourname/gist_id/raw/...。点击Gist页面的“Raw”按钮获取纯文本文件的原始URL。这个URL就是你的updateURL和downloadURL。以后更新脚本只需在Gist中编辑文件并保存新的原始URL不变Gist ID不变但内容已更新。用户端的Tampermonkey会根据版本号检测到更新。5.3 发布到脚本社区除了直接分享.user.js文件的链接你还可以将脚本发布到专门的用户脚本社区如Greasy Fork或OpenUserJS。这些平台提供了更规范的发布流程、版本管理、用户反馈和安装统计。以Greasy Fork为例注册账号并登录。点击“发布新脚本”。粘贴你的脚本代码。平台会自动解析元数据块。填写额外的信息如更详细的描述、分类、标签等。提交后脚本会经过一次自动的代码质量扫描主要是安全检查然后就可以公开安装了。后续更新时只需在脚本页面点击“更新脚本”粘贴新代码即可。发布到社区的好处曝光度高容易被有相同需求的用户发现。自动更新用户安装后社区平台会替你管理更新推送。反馈渠道用户可以在页面留言报告bug或提出建议。注意事项确保你的脚本不违反目标网站的服务条款。一些网站明确禁止自动化脚本。在脚本描述中清晰说明功能、使用方法和注意事项。尊重用户隐私不要在脚本中收集不必要的用户数据。如果确实需要要明确告知并征得同意。6. 进阶实战构建一个带配置界面的网页优化脚本让我们综合以上所有知识实战一个稍微复杂点的例子一个用于某内容网站假设为example.com的优化脚本。功能包括1) 隐藏侧边栏广告2) 增强文章阅读体验调整字体、行高3) 添加一个“夜间模式”切换按钮。并且所有这些功能都是可配置的。6.1 设计配置存储与加载我们将使用GM_getValue和GM_setValue来存储用户配置。// UserScript // name Example.com Enhancer // namespace https://github.com/yourname // version 1.0.0 // description 优化Example.com的阅读体验支持隐藏广告、调整版式、夜间模式。 // author YourName // match https://www.example.com/* // grant GM_getValue // grant GM_setValue // grant GM_addStyle // /UserScript (function() { use strict; // 默认配置 const DEFAULT_CONFIG { hideAds: true, fontSize: 18px, lineHeight: 1.8, nightMode: false }; // 加载配置如果没有则使用默认值 const CONFIG (() { const saved GM_getValue(config); return saved ? { ...DEFAULT_CONFIG, ...saved } : DEFAULT_CONFIG; })(); // 保存配置的函数 function saveConfig(newConfig) { Object.assign(CONFIG, newConfig); GM_setValue(config, CONFIG); applyConfig(); // 保存后立即应用新配置 } })();6.2 应用配置并创建UI接下来我们根据配置应用样式并创建一个浮动的控制面板让用户修改配置。// 应用当前配置到页面 function applyConfig() { // 清理之前可能添加的样式 const oldStyle document.getElementById(example-enhancer-style); if (oldStyle) oldStyle.remove(); let css ; if (CONFIG.hideAds) { css .ad-unit, .sponsored-content { display: none !important; }; } css article { font-size: ${CONFIG.fontSize} !important; line-height: ${CONFIG.lineHeight} !important; }; if (CONFIG.nightMode) { css body { background-color: #1a1a1a !important; color: #e0e0e0 !important; }; css article { color: #f0f0f0 !important; }; } GM_addStyle(style idexample-enhancer-style${css}/style); } // 创建控制面板UI function createControlPanel() { const panel document.createElement(div); panel.id example-enhancer-panel; panel.innerHTML div styledisplay: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; strong页面优化器/strong button idenhancer-close styleborder:none; background:none; cursor:pointer; font-size:1.2em;×/button /div div stylemargin-bottom: 10px; labelinput typecheckbox idenhancer-hide-ads ${CONFIG.hideAds ? checked : } 隐藏广告/label /div div stylemargin-bottom: 10px; label字体大小 select idenhancer-font-size option value16px ${CONFIG.fontSize 16px ? selected : }小/option option value18px ${CONFIG.fontSize 18px ? selected : }中/option option value20px ${CONFIG.fontSize 20px ? selected : }大/option /select /label /div div stylemargin-bottom: 10px; label行高 input typerange idenhancer-line-height min1.2 max2.4 step0.1 value${CONFIG.lineHeight} span idenhancer-line-height-value${CONFIG.lineHeight}/span /label /div div stylemargin-bottom: 15px; labelinput typecheckbox idenhancer-night-mode ${CONFIG.nightMode ? checked : } 夜间模式/label /div button idenhancer-reset stylewidth:100%;恢复默认设置/button ; // 样式 Object.assign(panel.style, { position: fixed, top: 60px, right: 20px, width: 250px, backgroundColor: white, border: 1px solid #ddd, borderRadius: 8px, padding: 15px, boxShadow: 0 4px 12px rgba(0,0,0,0.15), zIndex: 10000, fontFamily: sans-serif, fontSize: 14px }); document.body.appendChild(panel); // 绑定事件 document.getElementById(enhancer-close).addEventListener(click, () panel.style.display none); document.getElementById(enhancer-hide-ads).addEventListener(change, (e) saveConfig({ hideAds: e.target.checked })); document.getElementById(enhancer-font-size).addEventListener(change, (e) saveConfig({ fontSize: e.target.value })); const lineHeightSlider document.getElementById(enhancer-line-height); const lineHeightValue document.getElementById(enhancer-line-height-value); lineHeightSlider.addEventListener(input, (e) { lineHeightValue.textContent e.target.value; }); lineHeightSlider.addEventListener(change, (e) saveConfig({ lineHeight: e.target.value })); document.getElementById(enhancer-night-mode).addEventListener(change, (e) saveConfig({ nightMode: e.target.checked })); document.getElementById(enhancer-reset).addEventListener(click, () { if (confirm(确定要恢复所有默认设置吗)) { GM_setValue(config, DEFAULT_CONFIG); Object.assign(CONFIG, DEFAULT_CONFIG); applyConfig(); // 刷新UI状态 document.getElementById(enhancer-hide-ads).checked CONFIG.hideAds; document.getElementById(enhancer-font-size).value CONFIG.fontSize; document.getElementById(enhancer-line-height).value CONFIG.lineHeight; lineHeightValue.textContent CONFIG.lineHeight; document.getElementById(enhancer-night-mode).checked CONFIG.nightMode; } }); // 添加一个显示/隐藏面板的触发器按钮可以放在角落 const toggleBtn document.createElement(button); toggleBtn.textContent ⚙️; Object.assign(toggleBtn.style, { position: fixed, top: 20px, right: 20px, zIndex: 9999, fontSize: 20px, background: #4CAF50, color: white, border: none, borderRadius: 50%, width: 40px, height: 40px, cursor: pointer }); toggleBtn.addEventListener(click, () { panel.style.display panel.style.display none ? block : none; }); document.body.appendChild(toggleBtn); } // 主初始化函数 function init() { applyConfig(); // 首次加载应用配置 waitForElement(body, () { createControlPanel(); }); } // 启动 init();这个脚本展示了油猴脚本开发的几个关键进阶点配置的持久化存储、动态样式的应用与清理、交互式UI的创建与事件绑定以及如何将多个功能模块化地组织在一起。用户的所有偏好设置都会被保存在本地下次访问同一网站时自动生效体验非常连贯。7. 安全、伦理与最佳实践开发油猴脚本赋予了你强大的能力但随之而来的是责任。最后我们来谈谈那些比技术更重要的东西。7.1 安全第一保护自己与用户最小权限原则在grant中只声明你真正需要的API。不要为了“可能用到”而请求GM_xmlhttpRequest或GM_getResourceURL等敏感权限。谨慎处理外部资源使用require加载外部库时确保来源可信如知名CDN。更好的做法是将必要的库函数内联到你的脚本中避免因第三方资源失效导致脚本瘫痪。避免eval尽量不要使用eval()函数来执行动态代码这有严重的安全风险。如果必须执行动态代码比如从自己信任的服务器获取配置务必对内容进行严格的校验和清理。数据存储安全GM_getValue/GM_setValue存储的数据虽然相对安全存储在扩展本地但也不要在其中保存密码、密钥等极度敏感的信息。7.2 伦理与法律边界尊重robots.txt如果你用脚本进行网页抓取请遵守目标网站的robots.txt协议。过于频繁的请求可能会对对方服务器造成压力甚至导致你的IP被封锁。遵守服务条款许多网站尤其是社交平台、付费内容平台在其服务条款中明确禁止自动化脚本。使用脚本绕过付费墙、自动发送消息、批量采集受版权保护的内容等行为可能违反法律或平台规则。明确脚本意图在脚本描述中清晰、诚实地说明脚本的功能。如果是为了辅助学习、提升可访问性或工作效率通常更容易被接受。避免开发用于作弊、欺诈或恶意攻击的脚本。考虑性能影响你的脚本不应显著降低页面的加载速度或浏览器的响应性能。避免在滚动等高频事件中执行复杂操作合理使用setTimeout或requestAnimationFrame进行节流。7.3 代码质量与维护性添加注释尤其是复杂的逻辑或针对特定网站结构的Hack要写清楚为什么这么做。处理错误使用try...catch包裹可能出错的操作如DOM操作、网络请求、JSON解析并在控制台输出有意义的错误信息方便自己调试。模块化随着脚本功能增多将代码拆分成不同的函数或文件通过构建工具合并提高可读性和可维护性。版本日志在发布更新时在脚本的顶部或发布页面写清楚更新日志Changelog让用户知道这次更新了什么、修复了什么。油猴脚本的世界充满了创造力和可能性。它把改造互联网的权力交到了每一个懂一点代码的用户手中。从屏蔽一个恼人的弹窗到打造一个高度定制化的信息聚合面板其边界只取决于你的想象力和对网页技术的理解。希望这份从开发到发布的详细指南能帮你更顺手地打造属于自己的浏览器增强工具在纷繁复杂的网络世界中为自己争取那么一点点的效率与优雅。