1. 项目概述为什么你需要了解油猴脚本如果你经常在电脑前工作大概率遇到过这样的场景某个网站的设计让你用起来很不顺手广告多得眼花缭乱或者某个重复性的操作需要你手动点击几十次。你可能会想“要是能改一改这个网页就好了。” 没错油猴脚本Tampermonkey就是为此而生的。它不是一个独立的软件而是一个浏览器扩展一个能让你在网页上“为所欲为”的神奇工具。简单来说它允许你运行自己或他人编写的JavaScript代码片段即“用户脚本”来修改网页的外观、功能甚至自动化操作。无论是屏蔽烦人的广告、一键下载视频、优化页面布局还是自动填写表单油猴脚本都能办到。它让你的浏览器从一个被动的信息接收器变成一个可以主动改造网络环境的强大平台。对于前端开发者或对技术有兴趣的用户油猴脚本是学习JavaScript和Web技术的绝佳沙盒。对于普通用户它是提升上网效率、净化浏览体验的利器。它支持的浏览器几乎覆盖了主流选择Chrome、Edge、Firefox、Safari等通过安装Tampermonkey扩展即可使用。网络上已经有成千上万个现成的脚本覆盖了国内外主流网站你几乎可以“开箱即用”。但更深层的价值在于理解它如何工作能让你从“使用者”变为“创造者”真正掌控自己的浏览体验。2. 核心原理与架构拆解脚本如何“注入”网页要驾驭油猴脚本必须理解它的工作原理。这不像安装一个普通软件那么简单它涉及浏览器扩展、内容脚本、DOM操作等多个层面的交互。2.1 浏览器扩展与内容脚本的桥梁Tampermonkey本身是一个浏览器扩展。浏览器为扩展提供了强大的API允许它们与浏览器本身以及用户访问的网页进行交互。油猴脚本的核心功能是通过“内容脚本”实现的。内容脚本是扩展的一部分它被注入到用户访问的网页中与网页共享同一个DOM文档对象模型但通常运行在一个独立的、隔离的JavaScript执行环境中这被称为“隔离世界”。这种设计既保证了脚本能操作页面元素又避免了与页面原有的JavaScript代码发生冲突提升了安全性。当你在Tampermonkey的管理面板中启用一个脚本时扩展会根据脚本头部元数据match,include等指令中定义的URL匹配规则在用户访问对应网页时自动将脚本代码作为内容脚本注入到页面中。这个过程对用户是无感的你只会看到网页按照脚本的设定发生了变化。2.2 用户脚本的元数据控制脚本行为的“说明书”每个油猴脚本的开头都是一段由// UserScript注释包裹的元数据块。这是脚本的“身份证”和“说明书”Tampermonkey依靠它来管理脚本。关键的元数据标签包括name与namespace脚本的名称和唯一命名空间用于区分不同作者的脚本。version版本号用于更新判断。description脚本功能的简要描述。author作者信息。match/include/exclude这是核心中的核心。它们定义了脚本在哪些网页上运行。match使用Chrome扩展匹配模式类似*://*.example.com/*更精确。include和exclude使用更简单的通配符模式。一个脚本可以同时有多个匹配规则。grant声明脚本需要使用的特殊Tampermonkey API或浏览器API如GM_addStyle,GM_xmlhttpRequest。如果脚本不需要这些高级API则应声明grant none让脚本以页面本身的权限运行性能更好。require声明脚本运行前需要预先加载的第三方JavaScript库如jQueryTampermonkey会负责下载并注入。run-at控制脚本注入的时机如document-start文档开始加载时、document-endDOM加载完成后默认、document-idle页面空闲时。正确编写元数据是脚本稳定运行的第一步。一个常见的错误是匹配规则过于宽泛或狭窄导致脚本在不该运行的页面运行或在该运行的页面不运行。2.3 脚本执行流程与生命周期从用户访问一个网页到脚本生效大致流程如下URL匹配浏览器加载网页Tampermonkey扩展检测当前URL。规则筛选扩展将URL与所有已启用脚本的match/include规则进行比对。脚本注入对于匹配成功的脚本Tampermonkey根据其run-at设定在合适的时机将脚本内容包括require的库作为内容脚本注入页面。环境初始化脚本在隔离的执行环境中开始运行。如果声明了grant相应的API会在此环境中可用。执行主函数脚本中通常包含一个自执行函数或监听DOM加载的事件开始执行修改页面的核心逻辑。持续监听很多脚本会监听页面变化如AJAX加载新内容并做出相应调整。理解这个流程有助于你在编写或调试脚本时准确定位问题所在。例如如果脚本需要操作的元素是通过AJAX动态加载的那么你就需要在脚本中监听DOM变化而不是只在页面初始加载时执行一次。3. 从使用到创作手把手编写你的第一个脚本仅仅安装使用现成脚本只发挥了油猴一半的威力。自己动手写一个哪怕功能很简单也能让你彻底明白其运作机制。下面我们以一个实际需求为例移除某个技术博客网站侧边栏的“热门文章”模块假设它干扰阅读。3.1 开发环境与工具准备你不需要复杂的IDE。任何一个文本编辑器如VS Code、Sublime Text、甚至记事本都可以。浏览器开发者工具F12是你最好的朋友。Tampermonkey扩展本身也提供了便捷的脚本创建和管理面板。首先点击浏览器工具栏中的Tampermonkey图标选择“管理面板”。在打开的页面中点击“”号创建新脚本。你会看到一个预设好元数据模板的新脚本编辑器。3.2 编写脚本元数据与框架我们将模板修改为我们的需求// UserScript // name 移除XX博客侧边栏热门文章 // namespace http://tampermonkey.net/ // version 0.1 // description 尝试移除特定博客侧边栏的干扰模块专注于文章内容。 // author You // match https://example-tech-blog.com/article/* // grant none // /UserScript (function() { use strict; // 你的代码将写在这里 })();代码解析与注意事项match: 我们假设博客文章页面的URL模式是https://example-tech-blog.com/article/...。这个规则确保了脚本只在这些页面运行。grant none: 我们这个简单脚本不需要任何特殊API声明此项可以让脚本以页面原生权限运行效率更高。(function() { ... })();: 这是一个立即执行函数表达式。它将我们的代码包裹在一个局部作用域中避免污染页面的全局命名空间是编写用户脚本的最佳实践。‘use strict’;声明启用严格模式帮助避免常见的编码错误。3.3 实现核心功能DOM操作实战我们的目标是找到侧边栏的“热门文章”模块并将其移除。这需要用到DOM查询和操作。第一步定位目标元素打开目标博客的一篇文章按F12打开开发者工具。使用“元素选择器”箭头图标点击侧边栏的“热门文章”区域。开发者工具会高亮显示对应的HTML代码。你需要仔细观察找到包裹这个模块的最外层容器的选择器。假设我们通过检查发现这个模块有一个idhot-posts-sidebar。这是最理想的情况因为ID选择器是唯一且高效的。第二步编写移除代码在我们的脚本框架内添加代码(function() { use strict; // 方案1如果目标有唯一ID直接移除 const hotPostsElement document.getElementById(hot-posts-sidebar); if (hotPostsElement) { hotPostsElement.remove(); console.log(已移除侧边栏热门文章模块。); } else { console.warn(未找到ID为“hot-posts-sidebar”的元素尝试其他选择器。); } })();第三步处理更复杂的情况现实中元素可能没有ID只有类名或其他属性。例如它可能是一个div classwidget widget_popular_posts。这时我们需要使用querySelector// 方案2使用更灵活的选择器 const hotPostsElement document.querySelector(div.widget.widget_popular_posts); if (hotPostsElement) { hotPostsElement.remove(); } else { // 如果类名也不唯一可以尝试通过父元素定位 const sidebar document.querySelector(#secondary); // 假设侧边栏有ID if (sidebar) { const target sidebar.querySelector(h3:contains(热门文章))?.closest(.widget); if (target) target.remove(); } }实操心得console.log是你的调试利器在脚本中适当添加日志可以在浏览器控制台看到脚本运行状态方便排查问题。选择器的稳定性网页结构可能会更新。依赖过于具体或脆弱的CSS选择器如div:nth-child(3) a的脚本容易失效。优先使用ID其次是具有明确语义的类名或数据属性。执行时机很重要如果侧边栏是动态加载的我们的脚本在document-end运行时可能仍找不到元素。这时需要监听DOM变化MutationObserver或等待特定事件。这是一个进阶话题但非常常见。3.4 保存、测试与调试在Tampermonkey编辑器中完成代码后按CtrlS保存。刷新目标博客页面侧边栏的对应模块应该消失了。打开开发者工具的控制台可以看到我们打印的日志。如果脚本没生效按以下步骤排查检查脚本是否启用在Tampermonkey管理面板确保脚本右侧开关是打开的。检查匹配规则当前页面URL是否完全符合match中的模式检查控制台错误在F12控制台中查看是否有JavaScript报错。红色错误信息会明确指出代码哪一行出了问题。检查元素是否存在在控制台输入你脚本中使用的document.querySelector(...)语句看是否能正确找到元素。可能元素选择器写错了或者元素名称/结构和你观察时不同。4. 进阶技巧与强大API应用当你掌握了基础DOM操作后Tampermonkey提供的一系列GM_*API 将为你打开新世界的大门。这些API需要通过在元数据中grant声明来获取权限。4.1 存储数据GM_setValue/GM_getValue脚本可能需要记住用户的选择或状态。例如一个用于折叠网页评论区的脚本可以记住用户上次是展开还是折叠状态。// UserScript // grant GM_setValue // grant GM_getValue // /UserScript (function() { use strict; const isCommentsCollapsed GM_getValue(commentsCollapsed, false); // 默认展开 const toggleButton document.createElement(button); toggleButton.textContent isCommentsCollapsed ? 展开评论 : 折叠评论; // ... 将按钮添加到页面并绑定点击事件 ... toggleButton.addEventListener(click, () { const newState !isCommentsCollapsed; // 切换评论区域显示/隐藏的逻辑 ... GM_setValue(commentsCollapsed, newState); toggleButton.textContent newState ? 展开评论 : 折叠评论; }); })();注意GM_setValue存储的是键值对且与脚本关联。不同脚本的数据彼此隔离。存储的值可以是字符串、数字、布尔值或可序列化的对象。4.2 跨域网络请求GM_xmlhttpRequest这是油猴脚本最强大的功能之一。它允许脚本向其他域名发送HTTP请求从而获取数据、与API交互。这突破了浏览器普通内容脚本的同源策略限制。场景编写一个脚本在GitHub仓库页面显示该仓库在另一个第三方分析网站上的星标历史图表数据。// UserScript // grant GM_xmlhttpRequest // /UserScript (function() { use strict; // 假设我们从页面URL解析出仓库作者和名 const repoPath window.location.pathname.split(/).slice(1,3).join(/); // 如 user/repo const apiUrl https://api.example-analytics.com/stars/history/${repoPath}; GM_xmlhttpRequest({ method: GET, url: apiUrl, onload: function(response) { if (response.status 200) { const data JSON.parse(response.responseText); // 处理数据并在页面上创建一个图表元素来展示 console.log(获取到星标数据, data); renderChart(data); } else { console.error(请求失败, response.status); } }, onerror: function(error) { console.error(请求发生错误, error); } }); function renderChart(data) { // 使用如Chart.js或简单DOM操作来渲染图表 const chartContainer document.createElement(div); // ... 渲染逻辑 ... document.querySelector(.repository-content).prepend(chartContainer); } })();重要安全与实践提示权限申请使用此API必须在grant中声明。错误处理务必实现onerror回调并检查onload中的response.status网络请求失败是常态。遵守Robots协议与法律法规不要滥用此功能对网站进行恶意爬取或攻击频率要合理尊重目标服务器的负载。绝对禁止用于获取、传播违法违规信息。处理异步GM_xmlhttpRequest是异步操作后续处理代码应写在回调函数内。4.3 添加样式GM_addStyle如果你想大规模修改页面样式比起用JavaScript逐个修改元素的style属性直接注入CSS样式表更高效。// UserScript // grant GM_addStyle // /UserScript (function() { use strict; GM_addStyle( /* 隐藏所有广告 */ div[class*ad-], iframe[src*ads] { display: none !important; } /* 优化阅读区域 */ .article-content { max-width: 800px !important; margin: 0 auto !important; line-height: 1.8 !important; font-size: 18px !important; } /* 暗色模式支持 */ media (prefers-color-scheme: dark) { body { background-color: #1a1a1a; color: #e0e0e0; } } ); })();使用!important是为了覆盖页面原有样式可能设置的更高优先级规则。但需谨慎使用避免样式冲突失控。4.4 菜单与通知GM_registerMenuCommand与GM_notification让脚本与用户交互。GM_registerMenuCommand: 在Tampermonkey图标的下拉菜单中注册一个自定义命令。// grant GM_registerMenuCommand GM_registerMenuCommand(一键执行任务, function() { alert(任务开始执行); // ... 执行复杂操作 ... });GM_notification: 显示桌面通知需要浏览器权限。// grant GM_notification GM_notification({ text: 脚本已完成数据抓取, title: 任务通知, timeout: 3000 // 3秒后自动关闭 });5. 脚本发布、维护与安全须知5.1 在哪里寻找和分享脚本Greasy Fork目前最活跃、最主流的用户脚本分享平台。它提供脚本自动更新、代码混淆查看、安全审核基础等功能。发布脚本时清晰的描述、合适的标签和开源协议非常重要。OpenUserJS另一个开源脚本平台。GitHub Gist很多开发者将脚本代码存放在Gist通过原始链接在Tampermonkey中安装。安装脚本在以上平台找到脚本页面点击“安装”按钮Tampermonkey会弹出安装确认框显示脚本的元信息和代码确认无误后点击安装即可。5.2 脚本维护与更新版本管理每次对脚本进行功能修改或修复后务必更新version元数据。Tampermonkey和Greasy Fork等平台依靠版本号来判断更新。处理网站改版这是脚本维护最常见的挑战。当目标网站更新HTML结构后你的选择器可能失效。解决方法是使用更健壮的选择器避免依赖绝对路径尝试使用属性选择器、语义化类名。添加容错逻辑如果找不到元素给出友好提示而非让脚本报错崩溃。建立反馈渠道在脚本描述中留下问题反馈方式如GitHub Issues。性能考量避免在脚本中使用setInterval进行高频DOM查询。对于监听动态加载内容优先使用MutationObserver并设置合理的观察选项避免过度回调导致页面卡顿。5.3 安全风险与防范指南油猴脚本能力强大但正因如此也带来了安全风险。脚本本质上是在你访问的网页上下文中执行任意代码拥有与该网页几乎相同的权限。主要风险恶意脚本可能窃取你的Cookie、会话密钥、表单输入内容如密码、浏览历史甚至进行加密货币挖矿挖矿脚本。隐私泄露脚本作者可能通过GM_xmlhttpRequest将你的浏览数据发送到第三方服务器。脚本冲突多个脚本修改同一页面可能导致冲突功能异常或页面崩溃。自我保护守则审查代码尤其是新脚本安装前务必点击“预览”或“查看源代码”快速浏览代码。警惕以下危险信号大量混淆、难以阅读的代码。包含明显的数据外发请求向不明域名发送GM_xmlhttpRequest。使用eval()或Function构造函数执行动态代码。请求过多不必要的grant权限如一个简单样式脚本却要求GM_xmlhttpRequest。信任来源优先从Greasy Fork等有基础审核的平台安装并查看脚本的评分、安装量和用户评论。知名作者维护的脚本通常更可靠。最小权限原则自己编写脚本时只申请必要的grant权限。grant none是最安全的。定期审计定期检查已安装的脚本列表禁用或卸载长期不用或来源不明的脚本。使用脚本管理器Tampermonkey是经过市场检验的管理器。避免使用不知名的或破解版的脚本管理扩展。6. 常见问题与故障排查实录在实际使用和编写油猴脚本的过程中你会遇到各种各样的问题。下面是一些典型场景及解决方案。6.1 脚本不运行检查清单Tampermonkey扩展图标是否显示为彩色启用状态该脚本是否在管理面板中已启用当前网页URL是否完全匹配脚本的match或include规则在Tampermonkey仪表盘点击脚本查看“生效的页面”列表浏览器控制台F12是否有JavaScript错误红色错误可能阻止脚本执行6.2 脚本运行了但没效果DOM选择器问题这是最常见的原因。网站更新了HTML结构。排查在控制台手动执行你的document.querySelector(...)语句看能否找到元素。解决使用开发者工具重新检查元素更新选择器。考虑使用更通用的选择器或组合选择器。执行时机问题脚本在目标元素加载之前就执行完了。排查在脚本开头加console.log(脚本开始执行);在操作DOM的代码前后也加日志观察顺序。解决将run-at改为document-start或使用DOMContentLoaded/window.onload事件或使用MutationObserver监听元素出现。样式优先级问题你用GM_addStyle或element.style添加的样式被页面内联样式或更高优先级规则覆盖。解决在CSS规则末尾添加!important或使用更具体的选择器来提高优先级。6.3 脚本导致页面卡顿或崩溃性能问题原因在循环或高频事件如scroll,mousemove中执行了复杂的DOM查询或操作。解决使用函数节流throttle或防抖debounce技术限制执行频率。优化选择器避免在循环中重复查询同一元素。内存泄漏原因注册了全局事件监听器但未在脚本失效时移除或者MutationObserver未断开连接。解决对于长期存在的监听考虑在脚本中提供手动关闭的开关。对于单页应用SPA脚本可能需要在页面路由变化时清理旧监听器。6.4GM_xmlhttpRequest请求失败跨域问题虽然GM_xmlhttpRequest可以跨域但目标服务器可能返回CORS错误。现象控制台报CORS错误onload回调中response.status为0。解决尝试在请求头中添加Origin或Referer需谨慎尊重目标服务器。有些API可能需要特定的Header。对于公开API查阅其文档。HTTPS/HTTP混合内容在HTTPS页面上请求HTTP资源可能被浏览器阻止。解决尽可能请求HTTPS资源或考虑使用grant中的GM_getResourceURL配合本地资源。6.5 脚本与其他扩展或脚本冲突现象页面行为异常但单独禁用某个脚本或扩展后恢复正常。排查使用浏览器的“无痕模式”或新建一个干净的配置文件只安装Tampermonkey和该脚本进行测试。解决调整脚本执行顺序如果支持或修改脚本逻辑以避免操作同一元素。有时需要联系另一个脚本的作者进行协调。掌握油猴脚本就像获得了一把定制互联网的瑞士军刀。从简单的页面美化到复杂的自动化工具其可能性仅受限于你的想象力和JavaScript技能。安全、谨慎地使用它持续学习与实践你将能打造出一个完全贴合个人习惯、极致高效纯净的浏览环境。
1. 项目概述为什么你需要了解油猴脚本如果你经常在电脑前工作大概率遇到过这样的场景某个网站的设计让你用起来很不顺手广告多得眼花缭乱或者某个重复性的操作需要你手动点击几十次。你可能会想“要是能改一改这个网页就好了。” 没错油猴脚本Tampermonkey就是为此而生的。它不是一个独立的软件而是一个浏览器扩展一个能让你在网页上“为所欲为”的神奇工具。简单来说它允许你运行自己或他人编写的JavaScript代码片段即“用户脚本”来修改网页的外观、功能甚至自动化操作。无论是屏蔽烦人的广告、一键下载视频、优化页面布局还是自动填写表单油猴脚本都能办到。它让你的浏览器从一个被动的信息接收器变成一个可以主动改造网络环境的强大平台。对于前端开发者或对技术有兴趣的用户油猴脚本是学习JavaScript和Web技术的绝佳沙盒。对于普通用户它是提升上网效率、净化浏览体验的利器。它支持的浏览器几乎覆盖了主流选择Chrome、Edge、Firefox、Safari等通过安装Tampermonkey扩展即可使用。网络上已经有成千上万个现成的脚本覆盖了国内外主流网站你几乎可以“开箱即用”。但更深层的价值在于理解它如何工作能让你从“使用者”变为“创造者”真正掌控自己的浏览体验。2. 核心原理与架构拆解脚本如何“注入”网页要驾驭油猴脚本必须理解它的工作原理。这不像安装一个普通软件那么简单它涉及浏览器扩展、内容脚本、DOM操作等多个层面的交互。2.1 浏览器扩展与内容脚本的桥梁Tampermonkey本身是一个浏览器扩展。浏览器为扩展提供了强大的API允许它们与浏览器本身以及用户访问的网页进行交互。油猴脚本的核心功能是通过“内容脚本”实现的。内容脚本是扩展的一部分它被注入到用户访问的网页中与网页共享同一个DOM文档对象模型但通常运行在一个独立的、隔离的JavaScript执行环境中这被称为“隔离世界”。这种设计既保证了脚本能操作页面元素又避免了与页面原有的JavaScript代码发生冲突提升了安全性。当你在Tampermonkey的管理面板中启用一个脚本时扩展会根据脚本头部元数据match,include等指令中定义的URL匹配规则在用户访问对应网页时自动将脚本代码作为内容脚本注入到页面中。这个过程对用户是无感的你只会看到网页按照脚本的设定发生了变化。2.2 用户脚本的元数据控制脚本行为的“说明书”每个油猴脚本的开头都是一段由// UserScript注释包裹的元数据块。这是脚本的“身份证”和“说明书”Tampermonkey依靠它来管理脚本。关键的元数据标签包括name与namespace脚本的名称和唯一命名空间用于区分不同作者的脚本。version版本号用于更新判断。description脚本功能的简要描述。author作者信息。match/include/exclude这是核心中的核心。它们定义了脚本在哪些网页上运行。match使用Chrome扩展匹配模式类似*://*.example.com/*更精确。include和exclude使用更简单的通配符模式。一个脚本可以同时有多个匹配规则。grant声明脚本需要使用的特殊Tampermonkey API或浏览器API如GM_addStyle,GM_xmlhttpRequest。如果脚本不需要这些高级API则应声明grant none让脚本以页面本身的权限运行性能更好。require声明脚本运行前需要预先加载的第三方JavaScript库如jQueryTampermonkey会负责下载并注入。run-at控制脚本注入的时机如document-start文档开始加载时、document-endDOM加载完成后默认、document-idle页面空闲时。正确编写元数据是脚本稳定运行的第一步。一个常见的错误是匹配规则过于宽泛或狭窄导致脚本在不该运行的页面运行或在该运行的页面不运行。2.3 脚本执行流程与生命周期从用户访问一个网页到脚本生效大致流程如下URL匹配浏览器加载网页Tampermonkey扩展检测当前URL。规则筛选扩展将URL与所有已启用脚本的match/include规则进行比对。脚本注入对于匹配成功的脚本Tampermonkey根据其run-at设定在合适的时机将脚本内容包括require的库作为内容脚本注入页面。环境初始化脚本在隔离的执行环境中开始运行。如果声明了grant相应的API会在此环境中可用。执行主函数脚本中通常包含一个自执行函数或监听DOM加载的事件开始执行修改页面的核心逻辑。持续监听很多脚本会监听页面变化如AJAX加载新内容并做出相应调整。理解这个流程有助于你在编写或调试脚本时准确定位问题所在。例如如果脚本需要操作的元素是通过AJAX动态加载的那么你就需要在脚本中监听DOM变化而不是只在页面初始加载时执行一次。3. 从使用到创作手把手编写你的第一个脚本仅仅安装使用现成脚本只发挥了油猴一半的威力。自己动手写一个哪怕功能很简单也能让你彻底明白其运作机制。下面我们以一个实际需求为例移除某个技术博客网站侧边栏的“热门文章”模块假设它干扰阅读。3.1 开发环境与工具准备你不需要复杂的IDE。任何一个文本编辑器如VS Code、Sublime Text、甚至记事本都可以。浏览器开发者工具F12是你最好的朋友。Tampermonkey扩展本身也提供了便捷的脚本创建和管理面板。首先点击浏览器工具栏中的Tampermonkey图标选择“管理面板”。在打开的页面中点击“”号创建新脚本。你会看到一个预设好元数据模板的新脚本编辑器。3.2 编写脚本元数据与框架我们将模板修改为我们的需求// UserScript // name 移除XX博客侧边栏热门文章 // namespace http://tampermonkey.net/ // version 0.1 // description 尝试移除特定博客侧边栏的干扰模块专注于文章内容。 // author You // match https://example-tech-blog.com/article/* // grant none // /UserScript (function() { use strict; // 你的代码将写在这里 })();代码解析与注意事项match: 我们假设博客文章页面的URL模式是https://example-tech-blog.com/article/...。这个规则确保了脚本只在这些页面运行。grant none: 我们这个简单脚本不需要任何特殊API声明此项可以让脚本以页面原生权限运行效率更高。(function() { ... })();: 这是一个立即执行函数表达式。它将我们的代码包裹在一个局部作用域中避免污染页面的全局命名空间是编写用户脚本的最佳实践。‘use strict’;声明启用严格模式帮助避免常见的编码错误。3.3 实现核心功能DOM操作实战我们的目标是找到侧边栏的“热门文章”模块并将其移除。这需要用到DOM查询和操作。第一步定位目标元素打开目标博客的一篇文章按F12打开开发者工具。使用“元素选择器”箭头图标点击侧边栏的“热门文章”区域。开发者工具会高亮显示对应的HTML代码。你需要仔细观察找到包裹这个模块的最外层容器的选择器。假设我们通过检查发现这个模块有一个idhot-posts-sidebar。这是最理想的情况因为ID选择器是唯一且高效的。第二步编写移除代码在我们的脚本框架内添加代码(function() { use strict; // 方案1如果目标有唯一ID直接移除 const hotPostsElement document.getElementById(hot-posts-sidebar); if (hotPostsElement) { hotPostsElement.remove(); console.log(已移除侧边栏热门文章模块。); } else { console.warn(未找到ID为“hot-posts-sidebar”的元素尝试其他选择器。); } })();第三步处理更复杂的情况现实中元素可能没有ID只有类名或其他属性。例如它可能是一个div classwidget widget_popular_posts。这时我们需要使用querySelector// 方案2使用更灵活的选择器 const hotPostsElement document.querySelector(div.widget.widget_popular_posts); if (hotPostsElement) { hotPostsElement.remove(); } else { // 如果类名也不唯一可以尝试通过父元素定位 const sidebar document.querySelector(#secondary); // 假设侧边栏有ID if (sidebar) { const target sidebar.querySelector(h3:contains(热门文章))?.closest(.widget); if (target) target.remove(); } }实操心得console.log是你的调试利器在脚本中适当添加日志可以在浏览器控制台看到脚本运行状态方便排查问题。选择器的稳定性网页结构可能会更新。依赖过于具体或脆弱的CSS选择器如div:nth-child(3) a的脚本容易失效。优先使用ID其次是具有明确语义的类名或数据属性。执行时机很重要如果侧边栏是动态加载的我们的脚本在document-end运行时可能仍找不到元素。这时需要监听DOM变化MutationObserver或等待特定事件。这是一个进阶话题但非常常见。3.4 保存、测试与调试在Tampermonkey编辑器中完成代码后按CtrlS保存。刷新目标博客页面侧边栏的对应模块应该消失了。打开开发者工具的控制台可以看到我们打印的日志。如果脚本没生效按以下步骤排查检查脚本是否启用在Tampermonkey管理面板确保脚本右侧开关是打开的。检查匹配规则当前页面URL是否完全符合match中的模式检查控制台错误在F12控制台中查看是否有JavaScript报错。红色错误信息会明确指出代码哪一行出了问题。检查元素是否存在在控制台输入你脚本中使用的document.querySelector(...)语句看是否能正确找到元素。可能元素选择器写错了或者元素名称/结构和你观察时不同。4. 进阶技巧与强大API应用当你掌握了基础DOM操作后Tampermonkey提供的一系列GM_*API 将为你打开新世界的大门。这些API需要通过在元数据中grant声明来获取权限。4.1 存储数据GM_setValue/GM_getValue脚本可能需要记住用户的选择或状态。例如一个用于折叠网页评论区的脚本可以记住用户上次是展开还是折叠状态。// UserScript // grant GM_setValue // grant GM_getValue // /UserScript (function() { use strict; const isCommentsCollapsed GM_getValue(commentsCollapsed, false); // 默认展开 const toggleButton document.createElement(button); toggleButton.textContent isCommentsCollapsed ? 展开评论 : 折叠评论; // ... 将按钮添加到页面并绑定点击事件 ... toggleButton.addEventListener(click, () { const newState !isCommentsCollapsed; // 切换评论区域显示/隐藏的逻辑 ... GM_setValue(commentsCollapsed, newState); toggleButton.textContent newState ? 展开评论 : 折叠评论; }); })();注意GM_setValue存储的是键值对且与脚本关联。不同脚本的数据彼此隔离。存储的值可以是字符串、数字、布尔值或可序列化的对象。4.2 跨域网络请求GM_xmlhttpRequest这是油猴脚本最强大的功能之一。它允许脚本向其他域名发送HTTP请求从而获取数据、与API交互。这突破了浏览器普通内容脚本的同源策略限制。场景编写一个脚本在GitHub仓库页面显示该仓库在另一个第三方分析网站上的星标历史图表数据。// UserScript // grant GM_xmlhttpRequest // /UserScript (function() { use strict; // 假设我们从页面URL解析出仓库作者和名 const repoPath window.location.pathname.split(/).slice(1,3).join(/); // 如 user/repo const apiUrl https://api.example-analytics.com/stars/history/${repoPath}; GM_xmlhttpRequest({ method: GET, url: apiUrl, onload: function(response) { if (response.status 200) { const data JSON.parse(response.responseText); // 处理数据并在页面上创建一个图表元素来展示 console.log(获取到星标数据, data); renderChart(data); } else { console.error(请求失败, response.status); } }, onerror: function(error) { console.error(请求发生错误, error); } }); function renderChart(data) { // 使用如Chart.js或简单DOM操作来渲染图表 const chartContainer document.createElement(div); // ... 渲染逻辑 ... document.querySelector(.repository-content).prepend(chartContainer); } })();重要安全与实践提示权限申请使用此API必须在grant中声明。错误处理务必实现onerror回调并检查onload中的response.status网络请求失败是常态。遵守Robots协议与法律法规不要滥用此功能对网站进行恶意爬取或攻击频率要合理尊重目标服务器的负载。绝对禁止用于获取、传播违法违规信息。处理异步GM_xmlhttpRequest是异步操作后续处理代码应写在回调函数内。4.3 添加样式GM_addStyle如果你想大规模修改页面样式比起用JavaScript逐个修改元素的style属性直接注入CSS样式表更高效。// UserScript // grant GM_addStyle // /UserScript (function() { use strict; GM_addStyle( /* 隐藏所有广告 */ div[class*ad-], iframe[src*ads] { display: none !important; } /* 优化阅读区域 */ .article-content { max-width: 800px !important; margin: 0 auto !important; line-height: 1.8 !important; font-size: 18px !important; } /* 暗色模式支持 */ media (prefers-color-scheme: dark) { body { background-color: #1a1a1a; color: #e0e0e0; } } ); })();使用!important是为了覆盖页面原有样式可能设置的更高优先级规则。但需谨慎使用避免样式冲突失控。4.4 菜单与通知GM_registerMenuCommand与GM_notification让脚本与用户交互。GM_registerMenuCommand: 在Tampermonkey图标的下拉菜单中注册一个自定义命令。// grant GM_registerMenuCommand GM_registerMenuCommand(一键执行任务, function() { alert(任务开始执行); // ... 执行复杂操作 ... });GM_notification: 显示桌面通知需要浏览器权限。// grant GM_notification GM_notification({ text: 脚本已完成数据抓取, title: 任务通知, timeout: 3000 // 3秒后自动关闭 });5. 脚本发布、维护与安全须知5.1 在哪里寻找和分享脚本Greasy Fork目前最活跃、最主流的用户脚本分享平台。它提供脚本自动更新、代码混淆查看、安全审核基础等功能。发布脚本时清晰的描述、合适的标签和开源协议非常重要。OpenUserJS另一个开源脚本平台。GitHub Gist很多开发者将脚本代码存放在Gist通过原始链接在Tampermonkey中安装。安装脚本在以上平台找到脚本页面点击“安装”按钮Tampermonkey会弹出安装确认框显示脚本的元信息和代码确认无误后点击安装即可。5.2 脚本维护与更新版本管理每次对脚本进行功能修改或修复后务必更新version元数据。Tampermonkey和Greasy Fork等平台依靠版本号来判断更新。处理网站改版这是脚本维护最常见的挑战。当目标网站更新HTML结构后你的选择器可能失效。解决方法是使用更健壮的选择器避免依赖绝对路径尝试使用属性选择器、语义化类名。添加容错逻辑如果找不到元素给出友好提示而非让脚本报错崩溃。建立反馈渠道在脚本描述中留下问题反馈方式如GitHub Issues。性能考量避免在脚本中使用setInterval进行高频DOM查询。对于监听动态加载内容优先使用MutationObserver并设置合理的观察选项避免过度回调导致页面卡顿。5.3 安全风险与防范指南油猴脚本能力强大但正因如此也带来了安全风险。脚本本质上是在你访问的网页上下文中执行任意代码拥有与该网页几乎相同的权限。主要风险恶意脚本可能窃取你的Cookie、会话密钥、表单输入内容如密码、浏览历史甚至进行加密货币挖矿挖矿脚本。隐私泄露脚本作者可能通过GM_xmlhttpRequest将你的浏览数据发送到第三方服务器。脚本冲突多个脚本修改同一页面可能导致冲突功能异常或页面崩溃。自我保护守则审查代码尤其是新脚本安装前务必点击“预览”或“查看源代码”快速浏览代码。警惕以下危险信号大量混淆、难以阅读的代码。包含明显的数据外发请求向不明域名发送GM_xmlhttpRequest。使用eval()或Function构造函数执行动态代码。请求过多不必要的grant权限如一个简单样式脚本却要求GM_xmlhttpRequest。信任来源优先从Greasy Fork等有基础审核的平台安装并查看脚本的评分、安装量和用户评论。知名作者维护的脚本通常更可靠。最小权限原则自己编写脚本时只申请必要的grant权限。grant none是最安全的。定期审计定期检查已安装的脚本列表禁用或卸载长期不用或来源不明的脚本。使用脚本管理器Tampermonkey是经过市场检验的管理器。避免使用不知名的或破解版的脚本管理扩展。6. 常见问题与故障排查实录在实际使用和编写油猴脚本的过程中你会遇到各种各样的问题。下面是一些典型场景及解决方案。6.1 脚本不运行检查清单Tampermonkey扩展图标是否显示为彩色启用状态该脚本是否在管理面板中已启用当前网页URL是否完全匹配脚本的match或include规则在Tampermonkey仪表盘点击脚本查看“生效的页面”列表浏览器控制台F12是否有JavaScript错误红色错误可能阻止脚本执行6.2 脚本运行了但没效果DOM选择器问题这是最常见的原因。网站更新了HTML结构。排查在控制台手动执行你的document.querySelector(...)语句看能否找到元素。解决使用开发者工具重新检查元素更新选择器。考虑使用更通用的选择器或组合选择器。执行时机问题脚本在目标元素加载之前就执行完了。排查在脚本开头加console.log(脚本开始执行);在操作DOM的代码前后也加日志观察顺序。解决将run-at改为document-start或使用DOMContentLoaded/window.onload事件或使用MutationObserver监听元素出现。样式优先级问题你用GM_addStyle或element.style添加的样式被页面内联样式或更高优先级规则覆盖。解决在CSS规则末尾添加!important或使用更具体的选择器来提高优先级。6.3 脚本导致页面卡顿或崩溃性能问题原因在循环或高频事件如scroll,mousemove中执行了复杂的DOM查询或操作。解决使用函数节流throttle或防抖debounce技术限制执行频率。优化选择器避免在循环中重复查询同一元素。内存泄漏原因注册了全局事件监听器但未在脚本失效时移除或者MutationObserver未断开连接。解决对于长期存在的监听考虑在脚本中提供手动关闭的开关。对于单页应用SPA脚本可能需要在页面路由变化时清理旧监听器。6.4GM_xmlhttpRequest请求失败跨域问题虽然GM_xmlhttpRequest可以跨域但目标服务器可能返回CORS错误。现象控制台报CORS错误onload回调中response.status为0。解决尝试在请求头中添加Origin或Referer需谨慎尊重目标服务器。有些API可能需要特定的Header。对于公开API查阅其文档。HTTPS/HTTP混合内容在HTTPS页面上请求HTTP资源可能被浏览器阻止。解决尽可能请求HTTPS资源或考虑使用grant中的GM_getResourceURL配合本地资源。6.5 脚本与其他扩展或脚本冲突现象页面行为异常但单独禁用某个脚本或扩展后恢复正常。排查使用浏览器的“无痕模式”或新建一个干净的配置文件只安装Tampermonkey和该脚本进行测试。解决调整脚本执行顺序如果支持或修改脚本逻辑以避免操作同一元素。有时需要联系另一个脚本的作者进行协调。掌握油猴脚本就像获得了一把定制互联网的瑞士军刀。从简单的页面美化到复杂的自动化工具其可能性仅受限于你的想象力和JavaScript技能。安全、谨慎地使用它持续学习与实践你将能打造出一个完全贴合个人习惯、极致高效纯净的浏览环境。
