1. 项目概述为什么你需要了解油猴脚本如果你经常在电脑前工作或学习大概率遇到过这样的场景某个网页的广告多得让你心烦意乱或者某个在线工具的操作流程繁琐得令人抓狂又或者你希望某个网站能多一个你梦寐以求的小功能。通常我们只能忍受或者寻找一些专门的浏览器插件。但今天我要聊的是一个能让你从“忍受者”变成“改造者”的神器——油猴脚本。油猴脚本它的官方名称是“用户脚本”而“油猴”是国内用户对浏览器扩展Tampermonkey或Violentmonkey的昵称。简单来说它允许你运行自己编写或他人分享的 JavaScript 代码来修改任何你访问的网页。这就像给你的浏览器装上了一把万能钥匙你可以用它来解锁网页的隐藏功能、屏蔽烦人元素、自动填充信息甚至整合不同网站的数据。它不是某个特定的软件而是一种基于浏览器扩展的运行环境配合海量的用户脚本构成了一个极其强大的浏览器增强生态。我最初接触油猴是为了解决一个具体问题批量下载某个论坛的图片。手动一张张点开保存效率低到令人发指。在寻找解决方案时我发现了油猴脚本。一个几十行代码的脚本让我一键就能获取页面所有图片链接并打包下载。那一刻的震撼让我意识到浏览器还能这么玩。从那以后无论是去除视频网站的“暂停广告”还是为购物网站添加历史价格曲线亦或是优化搜索引擎的界面油猴都成了我的首选工具。它轻量、灵活且完全由用户掌控这种“我的浏览器我做主”的感觉是任何预制插件都无法比拟的。2. 核心原理与生态拆解脚本如何“附身”于浏览器要玩转油猴必须理解它的工作原理。这并非高深莫测的黑科技而是浏览器开放能力的一种巧妙运用。2.1 运行机制从扩展注入到脚本执行整个过程可以类比为一场“外科手术”扩展油猴作为“手术台”你首先需要安装 Tampermonkey 或 Violentmonkey 这样的用户脚本管理器扩展。它本身不提供具体功能而是搭建了一个安全、可控的运行平台负责脚本的安装、管理、启用/禁用以及最重要的——权限控制。脚本.js文件作为“手术方案”用户脚本本质上是一个纯文本的 JavaScript 文件其中包含了要执行的代码逻辑。它通过一系列特定的注释块称为“元数据”来声明自己的信息例如脚本名称、命名空间、描述、版本以及最关键的——match或include规则用来指定这个脚本应该在哪些网页地址上自动运行。注入与执行当你访问一个符合脚本匹配规则的网页时油猴扩展会像主刀医生一样将这份“手术方案”脚本代码精准地“注射”到该网页的上下文中。此后脚本代码就仿佛是这个网页原生的一部分可以自由地读取和修改页面的 DOM文档对象模型、监听事件、发起网络请求受跨域规则限制等。一个关键的安全设计油猴扩展在注入脚本时通常会创建一个独立的“沙盒”环境或者使用内容脚本Content Script的方式。这在一定程度上隔离了脚本与网页原有 JavaScript 以及扩展本身避免了恶意脚本对浏览器或扩展造成直接破坏。同时脚本能访问的浏览器 API 也受到严格限制比普通网页 JavaScript 多但比扩展本身的权限少在功能与安全之间取得了平衡。2.2 生态构成脚本从哪里来到哪里去油猴的活力源于其丰富的脚本生态主要由以下几部分构成脚本仓库最著名的当属Greasy Fork和OpenUserJS。这些网站就像“脚本应用商店”开发者在此发布脚本用户可以方便地搜索、安装和更新。Greasy Fork 在国内访问相对顺畅且有中文界面和大量中文脚本是大多数国内用户的首选。脚本管理器如前所述Tampermonkey是目前功能最全面、用户最多的商业扩展支持 Chrome、Edge、Firefox、Safari 等几乎所有主流浏览器。Violentmonkey则是一个开源免费的选择功能同样强大在隐私方面更受一些用户青睐。它们是连接用户与脚本的桥梁。脚本开发者与用户社区全球数以万计的开发者贡献了涵盖各种需求的脚本。从简单的样式调整到复杂的自动化工具应有尽有。社区用户通过评分、评论和反馈驱动着脚本的迭代和完善。注意安装来源不明的脚本存在风险。脚本本质上是一段代码恶意脚本可能窃取你的表单数据、Cookie甚至进行加密货币挖矿。务必从 Greasy Fork 等可信仓库安装并关注脚本的更新频率、用户评价和代码公开情况。3. 从安装到实战手把手打造你的强化浏览器理论说得再多不如动手实操。下面我将以 Chrome 浏览器和 Tampermonkey 为例带你完成从零开始到使用第一个脚本的全过程。3.1 环境准备安装脚本管理器打开 Chrome 网上应用店在 Chrome 浏览器中访问 Chrome Web Store。搜索并安装在商店内搜索“Tampermonkey”。认准开发者为“Tampermonkey.net”的官方扩展点击“添加到 Chrome”。确认安装安装成功后浏览器工具栏通常地址栏右侧会出现一个油猴的图标两个圆圈叠在一起。点击图标可以打开油猴的管理面板。此时你的“手术台”就搭建好了。3.2 寻找与安装你的第一个脚本假设我们的需求是去除主流视频网站的播放前广告和页面悬浮广告。访问脚本仓库打开浏览器访问Greasy Fork网站。搜索脚本在搜索框输入关键词如“广告 去除 视频”。一个非常知名且维护积极的脚本是“AC-baidu-重定向优化百度搜狗谷歌必应搜索_favicon_双列”虽然名字主要提搜索但其去广告功能很强或者更专门的“广告终结者”等。我们以安装一个通用的去广告脚本为例。评估脚本进入脚本页面后不要急着点安装。先看更新日期最近是否有更新长期未更新的脚本可能因网站改版而失效。安装数/评分安装量大、评分高的脚本通常更可靠。代码点击“查看源代码”可以粗略看看代码是否整洁、注释是否清晰。完全开源是安全的重要保障。安装脚本点击绿色的“安装此脚本”按钮。Tampermonkey 会弹出一个安装页面详细展示了该脚本的元信息名称、描述、匹配的网站等和完整的代码。这是最后的安全确认环节。确认安装滚动到底部点击“安装”按钮。脚本就会被添加到你的 Tampermonkey 管理列表中。3.3 管理你的脚本军团安装多个脚本后高效管理至关重要。点击浏览器工具栏的油猴图标选择“管理面板”。启用/禁用每个脚本左侧都有一个复选框可以快速开关。当某个脚本导致网页异常时可以暂时禁用它来排查问题。编辑对于有编程基础的用户可以点击脚本名称进入编辑界面查看或修改代码。这是学习和自定义的起点。设置Tampermonkey 的设置项非常丰富。我建议重点关注通用配置更新检查频率建议“每日”开启“允许访问私有地址”如果你需要在本地或内网使用脚本。安全可以设置只信任特定仓库如 Greasy Fork的自动更新。编辑器可以关联外部代码编辑器如 VS Code方便高级用户编写脚本。4. 经典脚本场景深度解析与推荐了解了基础操作我们来看看油猴脚本究竟能在哪些场景下大显身手。以下是我多年使用中积累的、经久不衰的几类脚本和应用实例。4.1 内容净化与体验优化这是油猴最基础也最受欢迎的应用。网页上的干扰元素无处不在。去广告不仅仅是视频前贴片广告还包括网页横幅、弹窗、侧边栏广告甚至搜索引擎结果页的推广链接。脚本通过 CSS 选择器或 JavaScript 定位这些广告元素的 HTML 节点并将其display属性设置为none或者直接从 DOM 树中移除。实操心得纯前端去广告脚本与广告拦截扩展如 uBlock Origin原理不同。后者基于过滤规则列表更底层、更全面。油猴脚本则更灵活可以处理一些规则拦截不了的、动态生成的广告。我通常两者配合使用。解除限制有些网站禁止复制文本、禁止右键菜单、强制登录阅读全文。油猴脚本可以移除这些限制性的事件监听器或直接修改相关的 CSS 样式如将user-select: none改为user-select: text。界面美化为老旧网站更换现代化主题、调整字体和排版、隐藏不需要的侧边栏模块。这主要通过注入自定义的 CSS 样式表来实现。推荐脚本示例解除网页限制精简版。这个脚本轻量且有效能处理大部分网站的复制、右键、选中限制。4.2 功能增强与自动化这是油猴脚本的“高玩”领域能极大提升工作效率。网盘直链助手对于某些网盘脚本可以自动填写提取码、绕过扫码验证、甚至获取直接下载链接配合多线程下载器实现满速下载。技术点这类脚本需要分析网盘页面的复杂交互逻辑和网络请求模拟用户点击并从服务器响应中解析出真实的文件下载地址。需要一定的逆向工程能力。购物比价与历史价格在电商商品页面自动显示该商品在其他平台的价格或绘制本平台的历史价格曲线帮你判断最佳入手时机。技术点脚本需要从当前页面抓取商品ID或名称然后向比价网站或价格追踪网站的 API 发起请求获取数据后再动态插入到页面中显示。这涉及到跨域请求和数据可视化。视频下载与解析获取视频播放页面的 m3u8 地址或 mp4 直链。这对于学习资料备份非常有用。重要提示请务必遵守网站的服务条款和版权法规仅将此类脚本用于个人学习或存档合法拥有的内容不得用于传播盗版。表单自动填充自动填写重复性的表单信息如地址、联系方式。脚本可以将常用信息存储在浏览器的本地存储中在检测到对应输入框时自动填入。推荐脚本示例购物党自动比价工具。在京东、淘宝、亚马逊等页面自动显示历史价格和全网比价信息是网购必备神器。4.3 信息聚合与效率工具将多个来源的信息整合到同一界面减少切换成本。搜索引擎优化在百度、谷歌的搜索结果页直接显示来自知乎、豆瓣、维基百科等站点的摘要信息去除搜索结果中的广告和低质站点增加一键切换多个搜索引擎的按钮。音乐聚合搜索在一个页面内同时搜索QQ音乐、网易云音乐、Spotify等平台的歌曲并生成播放列表。学术辅助在知网、Google Scholar 等页面自动添加文献的 BibTeX 引用格式按钮或显示其在 Sci-Hub 上的可用性。推荐脚本示例AC-baidu-重定向优化百度搜狗谷歌必应搜索_favicon_双列。这个脚本功能极其强大不仅优化搜索界面、去除广告还能直接显示搜索结果网站的 favicon 图标并支持双列显示大幅提升信息获取效率。5. 进阶之路如何编写与调试你自己的脚本当你发现现有脚本无法满足你的特定需求时就是时候尝试自己动手了。编写油猴脚本的门槛并不像想象中那么高。5.1 脚本的基本结构一个标准的油猴脚本由两部分组成元数据块和执行代码。// UserScript // name 我的第一个脚本 // namespace http://tampermonkey.net/ // version 1.0.0 // description 尝试修改百度首页 // author You // match https://www.baidu.com/ // grant none // /UserScript (function() { use strict; // 你的代码写在这里 console.log(Hello, 百度); // 例如将百度Logo的标题改掉 const logo document.getElementById(lg); if (logo) { logo.title 被我修改了的百度; } })();元数据 (// UserScript与// /UserScript之间)这是脚本的“身份证”和“说明书”。match指定脚本生效的网址模式支持通配符*grant声明脚本需要使用的特殊油猴 API如GM_setValue用于存储数据。执行代码包裹在(function() { ... })();中。这是一个立即执行函数表达式目的是创建一个独立的作用域避免变量污染网页原有的全局空间。use strict;启用严格模式让代码更规范错误更易发现。5.2 开发工具与调试技巧编辑器任何文本编辑器都可以但推荐使用 VS Code、Sublime Text 等代码编辑器它们有语法高亮和代码提示。调试这是编写脚本中最关键的环节。油猴内置编辑器Tampermonkey 管理面板中点击“添加新脚本”或编辑已有脚本它提供了一个基础的编辑和调试环境。修改代码后按CtrlS保存然后刷新目标网页即可看到效果。浏览器开发者工具在脚本生效的网页上按F12打开开发者工具。Console控制台查看脚本中console.log()输出的信息这是最常用的调试手段。如果脚本报错错误信息也会在这里显示。Sources源代码在这里可以找到你的油猴脚本文件通常位于top-Tampermonkey或Violentmonkey目录下可以设置断点进行单步调试这对于理解复杂逻辑至关重要。Elements元素实时查看和修改网页的 DOM 结构。你可以在这里找到你想操作的元素并测试 CSS 选择器是否正确。5.3 常用API与实战案例油猴提供了一些增强型的 API以GM_开头需要在元数据中用grant声明后才能使用。GM_setValue/GM_getValue在浏览器本地存储中保存和读取数据。适合保存用户配置。// grant GM_setValue // grant GM_getValue (function() { use strict; // 保存一个值 GM_setValue(theme, dark); // 读取一个值如果不存在则返回默认值light const currentTheme GM_getValue(theme, light); console.log(当前主题是${currentTheme}); })();GM_addStyle向页面动态添加 CSS 样式。这是美化页面的核心。// grant GM_addStyle (function() { use strict; GM_addStyle( /* 隐藏所有广告 */ .ad-container, [class*ad-] { display: none !important; } /* 修改全局字体 */ body { font-family: Microsoft YaHei, sans-serif !important; } ); })();GM_xmlhttpRequest发起跨域网络请求。这是实现比价、聚合等功能的关键。// grant GM_xmlhttpRequest (function() { use strict; GM_xmlhttpRequest({ method: GET, url: https://api.example.com/data, onload: function(response) { if (response.status 200) { const data JSON.parse(response.responseText); console.log(获取到的数据, data); // 将数据插入到当前页面中... } }, onerror: function(error) { console.error(请求失败, error); } }); })();一个简单实战为任意网页添加一个“返回顶部”按钮// UserScript // name 简易返回顶部按钮 // namespace http://tampermonkey.net/ // version 1.0 // description 在页面右下角添加一个返回顶部的浮动按钮 // author You // match *://*/* // grant none // /UserScript (function() { use strict; // 1. 创建按钮元素 const backToTopBtn document.createElement(button); backToTopBtn.innerHTML ↑; // 按钮文字 backToTopBtn.style.cssText position: fixed; bottom: 40px; right: 40px; width: 50px; height: 50px; border-radius: 50%; background-color: #007bff; color: white; border: none; font-size: 24px; cursor: pointer; box-shadow: 2px 2px 10px rgba(0,0,0,0.2); z-index: 9999; display: none; /* 默认隐藏 */ transition: opacity 0.3s; ; // 2. 将按钮添加到页面 document.body.appendChild(backToTopBtn); // 3. 监听滚动事件控制按钮显示/隐藏 window.addEventListener(scroll, function() { if (window.scrollY 300) { // 滚动超过300px显示 backToTopBtn.style.display block; backToTopBtn.style.opacity 0.7; } else { backToTopBtn.style.opacity 0; setTimeout(() { backToTopBtn.style.display none; }, 300); // 淡出后隐藏 } }); // 4. 为按钮添加点击事件 backToTopBtn.addEventListener(click, function() { window.scrollTo({ top: 0, behavior: smooth }); // 平滑滚动到顶部 }); // 5. 鼠标悬停效果 backToTopBtn.addEventListener(mouseenter, () backToTopBtn.style.opacity 1); backToTopBtn.addEventListener(mouseleave, () { if (window.scrollY 300) backToTopBtn.style.opacity 0.7; }); })();这个脚本涵盖了创建元素、样式设置、事件监听等基础操作是一个很好的入门练习。你可以修改match规则让它只在你指定的网站上生效。6. 避坑指南与安全须知强大的能力伴随着责任和风险。在使用和编写油猴脚本时以下几点必须牢记。6.1 常见问题与排查脚本不生效检查是否启用首先去油猴管理面板确认脚本已勾选启用。检查匹配规则确认当前访问的网址完全符合脚本match或include的规则。规则是大小写敏感且必须完全匹配的。检查网站更新很多网站会频繁改版HTML 结构一变依赖 CSS 选择器定位元素的脚本就失效了。这是脚本失效最常见的原因。查看控制台错误按F12打开控制台看是否有红色报错信息。根据错误信息定位问题。脚本冲突多个脚本同时修改同一个页面元素可能导致冲突。尝试禁用其他脚本单独测试。脚本导致网页卡顿或崩溃检查循环和监听器脚本中的死循环或未正确移除的事件监听器会严重消耗性能。确保setInterval有终止条件addEventListener在必要时用removeEventListener清理。优化DOM操作频繁直接操作 DOM如循环内修改样式非常耗性能。尽量批量操作或使用DocumentFragment。脚本权限问题如果脚本需要使用GM_xmlhttpRequest访问特定域名但被跨域策略阻止可能需要检查目标网站的 CORS 策略。有些公开 API 是允许的但很多网站会禁止。6.2 安全与隐私红线这是最重要的一部分必须时刻警惕。只从可信来源安装绝对不要安装来源不明的.js文件尤其是通过论坛、网盘分享的链接。Greasy Fork 等仓库会对脚本进行基础的安全扫描如检测已知的恶意代码模式。审查脚本代码安装前花一分钟快速浏览一下脚本源代码。重点关注是否有向陌生域名发送网络请求GM_xmlhttpRequest调用是否读取敏感的表单数据、Cookie 或 localStorage代码是否混淆一团乱码混淆的代码极有可能是恶意的。最小权限原则在油猴的设置中可以配置脚本的默认运行模式。对于不熟悉的脚本可以尝试先在“沙盒模式”下运行限制其部分能力。警惕“全能”脚本如果一个脚本声称能解决所有问题代码量却很小这很可疑。功能强大的脚本通常有较长的代码和清晰的逻辑。定期审计与更新定期查看已安装的脚本禁用那些长期不用的。确保脚本保持更新以应对网站变化和安全漏洞。个人经验我曾安装过一个声称能“增强下载功能”的脚本安装后发现它偷偷在后台向一个统计域名发送我访问的所有页面 URL。我立即在代码中发现了可疑的GM_xmlhttpRequest调用并删除了该脚本。从此以后我对任何请求网络权限的脚本都格外小心。7. 未来展望与社区资源油猴脚本的生命力在于社区。随着 Web 技术的发展特别是现代前端框架如 React, Vue构建的单页应用SPA越来越普及传统的通过 DOM 选择器操作页面的脚本有时会面临挑战因为元素可能是动态生成、异步加载的。这就需要脚本作者使用更高级的技巧如监听MutationObserver来捕获 DOM 变化或者分析网站的网络请求来获取数据。对于想深入学习的朋友我建议阅读优秀脚本源码在 Greasy Fork 上找那些星标多、更新频繁的脚本学习它们的代码组织和问题解决思路。掌握现代 JavaScript了解 ES6 语法、Promise、async/await等能让你的脚本代码更简洁高效。参与社区在相关论坛或仓库的 Issues 区提问、反馈 bug、甚至提交 Pull Request 帮助改进脚本。油猴脚本的世界就像一个巨大的乐高积木仓库海量的脚本是现成的模块而你自己编写脚本的能力则是设计和创造独一无二组合的工具。它赋予了你对浏览器体验的终极控制权。从解决一个微小的不便开始逐步探索你会发现浏览器的边界远比想象中更广阔。