Tampermonkey油猴脚本安装与使用教程：从零开始玩转浏览器扩展

折腾浏览器这么多年我一直觉得浏览器扩展是提升上网效率最直接的方式而在所有扩展里油猴Tampermonkey绝对算得上是一把“万能钥匙”。第一次接触它时我还以为它只是某个网页小插件后来才发现这玩意儿本质上是给浏览器装了一套“脚本解释器”能让你在别人网站的页面上执行自己的JavaScript逻辑。无论是清理页面广告、破解网页复制的限制、还是给后台管理界面加快捷按钮只要有人写了脚本你装上就能用。这篇博文不聊虚的就从油猴本身是什么、能解决什么问题开始然后把安装这件事从头到尾捋一遍包括不同浏览器的安装方法、安装完成后的基础配置、如何装第一个脚本以及我实际用过之后踩过的那些坑。不管你是第一次听说油猴还是已经装过但没玩明白这篇文章都能给你一个清晰的操作路线。1. 油猴到底是个什么工具1.1 从用户脚本说起浏览器也能“改头换面”先聊聊用户脚本User Script这个概念。浏览器本身只能运行网页自带的JavaScript这些代码是网站开发者写在页面里的普通用户无权改动。用户脚本的思路则是在页面加载完成后再额外注入一段你自己的JavaScript代码这段代码可以读取页面内容、修改DOM结构、监听用户操作甚至模拟点击。听起来很抽象举个例子就好理解了。比如你在看小说网站页面每一章的末尾都有一个很大的“下一页”按钮有时候还有一堆弹窗。正常情况你只能忍受但如果你写一段脚本等页面加载完自动把弹窗移除、把下一页按钮的点击区域放大体验立刻就变好了。用户脚本干的就是这种事而油猴就是负责管理这些脚本的“容器”。没有油猴之前想跑一段用户脚本你得手动在浏览器开发者工具里粘贴代码页面一刷新就没了。有了油猴之后脚本可以持久化存储、按域名匹配、自动加载还可以设置启用停用这才让用户脚本从“临时调试工具”变成真正能日常使用的生产力工具。1.2 为什么大家默认选Tampermonkey其实用户脚本管理器不止一个最早有名的是GreaseMonkey也就是“油猴”这个名字的出处。但在2010年之后Tampermonkey逐渐成了主流核心原因有几个。第一兼容性。Tampermonkey支持Chrome、Edge、Firefox、Opera、Safari等几乎所有主流浏览器GreaseMonkey在有些浏览器上就没法用。第二功能完整。它实现了大量GM_开头的API比如GM_setValue、GM_xmlhttpRequest、GM_addStyle等脚本作者能调用这些接口做复杂操作而很多轻量级管理器对这些API的支持是不完整的。第三更新频率。Tampermonkey至今仍在积极维护开发者社区活跃遇到浏览器版本升级导致的问题修复也快。它和普通扩展还有一个本质区别。普通扩展打包的是完整的、固定功能的应用用户只能按开发者预先设计好的方式使用而油猴本身不提供功能提供的是“平台”上面跑什么脚本完全由你自己决定换一个脚本就换一种体验灵活性完全是另一个层次。1.3 装了会不会拖慢浏览器这是新手最常问的问题之一。答案是不一定。油猴对于每个匹配到的脚本都需要在页面加载时注入并执行执行本身会有一定耗时但单个脚本如果写得规范执行时间通常只有几毫秒到几十毫秒完全感知不到。真正让浏览器变卡的情况往往是脚本本身写得太烂比如在循环里做了大量DOM操作或者同时对几十个页面元素做监听。还有一个更隐蔽的问题匹配范围过大的脚本会影响无关网站。比如一个脚本写在“所有网站”上都运行那每开一个页面它都要跑一遍累积起来就会拖慢整体效率。所以我在实际使用中有一条原则只用匹配范围精确的脚本能用特定域名绝不用“全部站点”。这不是油猴的问题是脚本管理习惯的问题。2. 安装前的准备和版本选择2.1 支持哪些浏览器在动手安装之前先确认你的浏览器在支持列表里。Tampermonkey目前官方支持的范围很广Google Chrome桌面版、Android版都支持Microsoft Edge基于Chromium内核4.x版本起原生支持Mozilla FirefoxOpera、Opera GXSafarimacOSBrave、Vivaldi、等等如果你用的是国内这些Chromium套壳浏览器比如360极速、QQ浏览器这类通常也都能通过“Chrome扩展”方式装进去只是需要额外开启开发者模式才能加载第三方扩展这个后面详细说。有一个常见的认知误区是只要用Edge浏览器就必须装Edge商店的版本只要用Chrome就必须装Chrome商店的版本。其实对于新版的Tampermonkey你完全可以从任意一个商店安装然后在设置里启用它浏览器允许从本地加载扩展之后跨渠道使用问题不大。不过为了省事和减少兼容性隐患我还是建议首选对应浏览器的官方商店。2.2 固定版还是Beta版怎么选Tampermonkey有两个主要版本线稳定版BETA版和正式版。官网首页一般默认引导你装稳定版但如果你打开Tampermonkey的官网下载页会看到Beta选项。Beta版的好处是功能迭代更快新API先上线但代价是偶尔会出现不稳定情况。我个人建议普通用户直接装正式版不折腾。除非你是脚本开发者需要第一时间测试新API否则Beta版带来的收益很小风险却实实在在。另外有些第三方网站会发布“绿色版”“破解版”的Tampermonkey压缩包这类我劝你直接划走。Tampermonkey本身是免费的不存在破解需求这些压缩包里往往被塞进了推广脚本、恶意代码装完轻则主页被锁定重则账号数据被窃取。装扩展永远走官方渠道这是第一条安全底线。2.3 从哪下载、怎么辨认真伪Tampermonkey的官方网站是tampermonkey.net主页上有很明显的浏览器图标和下载按钮。点进去之后它会根据你的浏览器自动跳转到对应商店页面。有几个识别技巧可以分享查看域名是否准确不要在搜索结果里点“推广链接”而是自己输入tampermonkey.net浏览器商店页面的开发者名称是“Jan Biniok”作者本人商店页面的下载量和评分都很高不要装一个评分几百个且名字相近的山寨扩展Chrome Web Store的搜索栏里输入Tampermonkey排在最前面的那个通常就是官方版。Edge商店同理注意看清扩展名称旁边的发布者信息。3. 手把手安装Tampermonkey扩展3.1 Chrome扩展商店安装步骤Chrome是Tampermonkey使用人数最多的平台安装步骤也是最具代表性的。第一步是打开Chrome地址栏输入Chrome Web Store网址或者在搜索引擎里搜“Chrome Web Store”。进入商店后左侧搜索框输入“Tampermonkey”回车。搜索结果里找出发布者为Jan Biniok的扩展点击进入详情页。详情页右侧会有一个“添加至Chrome”的蓝色按钮点击后会弹出一个权限确认框里面列出了该扩展需要的权限。Tampermonkey通常会申请“读取和更改所有网站上的数据”这类权限这意味着它可以读取你访问过的任何网页内容所以一定要确认扩展来源可靠再进行下一步。点击“添加扩展程序”后浏览器会自动下载并安装。安装完成后Chrome工具栏会出现一个黑白相间的Tampermonkey图标如果没有看到可以点一下工具栏右侧的拼图图标在扩展菜单里找到它并点击图钉固定到工具栏。到这里Chrome上的安装就结束了整个过程不超过三分钟。如果你在商店页面看到的是“从网站添加”之类的提示说明你的浏览器已经安装了非商店渠道的Tampermonkey可以忽略这条提示继续使用。3.2 Edge浏览器上怎么装基于Chromium内核的新版Edge安装Tampermonkey有两种途径。第一种是直接访问Edge外接程序商店Microsoft Edge Add-ons搜索Tampermonkey看到发布者为Jan Biniok的那个点击“获取”按钮再在弹窗里确认“添加扩展”。第二种方式适用于你更信任Chrome商店的情况打开Edge浏览器访问Chrome Web Store然后浏览器会提示“允许来自其他商店的扩展吗”选择允许之后就可以按Chrome的安装流程操作了。这个方法很多人不知道但其实完全合法也安全因为Chromium内核本身就支持加载Chrome商店的扩展。安装完成后同样会在工具栏出现Tampermonkey图标。推荐在图标上右键选择“在工具栏中显示”方便之后快速开关脚本。3.3 Firefox和其他浏览器的安装Firefox的安装入口在Firefox附加组件中心addons.mozilla.org。搜索Tampermonkey进入详情页点“添加到Firefox”浏览器会弹出一个权限确认点确定后自动完成安装。Firefox的历史版本和Chrome不同它的扩展系统有过一次重大升级现在所有新版Firefox都支持WebExtension标准所以安装Tampermonkey没有任何问题。Opera和Opera GX需要在Opera浏览器里打开附加组件商店搜索Tampermonkey安装方式类似。Safari用户则需要在Mac App Store里搜索Tampermonkey安装后在Safari的“偏好设置-扩展”里启用它首次启用时可能会要求“允许扩展在其他网站中运行”确认即可。有一类特殊情况是Chromium套壳浏览器比如360安全浏览器、猎豹浏览器等。这些浏览器一般不支持直接访问Chrome商店你需要先下载保险箱版的.crx扩展文件然后在浏览器地址栏打开扩展管理页面开启“开发者模式”再把.crx文件拖进去。说实话这条路比较折腾如果你用的是这类浏览器建议优先考虑直接切换到Edge或Chrome装扩展的体验会顺畅太多。3.4 安装完成后怎么确认没问题安装本身很简单但很多人装完就以为万事大吉了结果后续使用发现各种奇怪问题其实第一步就没确认好。我装完任何扩展都会做三个检查。第一个检查是看图标。工具栏上要有Tampermonkey的图标说明扩展已加载。第二个检查是看仪表盘。点击图标选择“管理面板”能打开一个带脚本列表的界面说明主程序正常。第三个检查是看控制台有没有报错。按F12打开开发者工具切到Console标签页如果看到tampermonkey相关的红色报错说明你可能装了有问题版本或与其他扩展冲突需要排查。做完这三步再往下装脚本就很稳了。跳过这些检查直接开干是我最初踩坑最多的时候后来学乖了每次换浏览器都先做一遍。4. 装好之后认识面板和第一个脚本4.1 五个核心区域一次看懂装好后的Tampermonkey点击工具栏图标会弹出一个菜单里面有仪表盘、新建脚本、设置、联系我们等入口。新手建议先点开仪表盘Dashboard这是脚本的主管理界面。仪表盘由几个区域组成已安装脚本列表显示当前所有脚本每一行的开关可以随时启用或禁用脚本状态图标小圆点绿色代表启用灰色代表禁用设置区域包括统计信息、已安装脚本、设置、日志等页面切换“已安装脚本”页面的右上角有“新增脚本”“添加新脚本”按钮从这里可以创建或导入脚本设置页面里最值得关注的是“通用”和“安全”两个标签。通用设置里的默认运行模式建议保持“自动”持久化也要打开。安全标签里的“允许脚本访问本地存储”等项目默认关闭就好不要轻易打开。还有一个实用的小功能是“搜索”框在仪表盘右上角当你装了几十个脚本之后靠这个搜索定位脚本非常省事。4.2 安装你的第一个用户脚本装脚本最正规、最安全的渠道是Greasy Forkgreasyfork.org这是目前全球最大的用户脚本分享平台所有脚本都是公开代码接受社区审核。打开网站后在搜索框里输入你需要的功能比如“网盘直链”“广告过滤”或者“视频倍速”挑一个评分高、更新日期近的脚本点进去。脚本详情页靠右侧有个“安装此脚本”的绿色按钮点击后会弹出一个Tampermonkey的确认框。这个确认框和浏览器扩展安装时的确认框不同它是Tampermonkey自己弹出来的显示该脚本的元数据信息包括匹配哪些网站、脚本版本、作者等。核对无误后点“安装”或“确认”。回到脚本列表你能看到这个脚本已经在里面了并且默认启用。打开脚本匹配的网站页面加载后脚本会自动运行。如果你不确定脚本有没有生效最直接的办法是看控制台。按F12打开开发者工具切到Console搜索Tampermonkey输出的一些日志大部分脚本作者会在脚本运行时打印一行提示信息。有个细节要提醒Greasy Fork上也有不少低质量甚至恶意脚本判断标准就看几条一是评分人数太少且全是五星二是作者没有历史作品三是要求权限过大但功能描述模糊。遇到这种脚本建议先看评论区有没有人反馈异常再决定要不要装。4.3 动手写一个最简单的脚本练手想要真正理解油猴光装别人的脚本不够我强烈建议你亲手写一个。别怕哪怕是几十行的脚本也能让你瞬间明白它的运行机制。在仪表盘里点击“新建脚本”Tampermonkey会打开一个内置的代码编辑器里面预填了一段模板。核心结构是开头的“用户脚本”注释块它用键值对定义了脚本的基本信息// UserScript // name 新手练习脚本 // namespace http://tampermonkey.net/ // version 0.1 // description 给所有页面加一个提示 // author you // match *://*/* // grant none // /UserScript (function() { use strict; console.log(我的第一个油猴脚本跑起来了); })();这里面match字段决定了脚本在哪些网站上运行*://*/*表示匹配所有http和https页面。grant none表示不需要特殊权限。保存这个脚本后随便打开一个网站按F12看控制台就能看到“我的第一个油猴脚本跑起来了”这句话。试一下更“视觉化”的脚本把函数体改成function sayHello() { let div document.createElement(div); div.textContent 这是一个油猴脚本生成的提示; div.style.cssText position: fixed; top: 10px; right: 10px; z-index: 9999; background: #4CAF50; color: white; padding: 10px 20px; border-radius: 5px;; document.body.appendChild(div); } sayHello();保存后再刷新页面你会看到右上角多了一个绿色提示框。这个过程告诉我两件事第一油猴脚本的本质就是页面上的普通JavaScript第二match规则非常重要写错了脚本就不干活。5. 常见问题和排坑实录5.1 扩展商店打不开或下载失败很多时候不是油猴的问题而是你所在网络访问商店不稳定。如果反复加载失败可以试试这几个办法刷新页面多等几十秒有时候只是响应慢切换浏览器试试Edge打不开就换Chrome反过来也一样检查系统时间是否正确时间不对会导致HTTPS证书校验失败如果商店一直打不开可以直接从Tampermonkey官网下载.crx文件再手动拖进扩展管理页面安装最后这种方法需要先在浏览器扩展管理页开启“开发者模式”.crx拖入后浏览器会提示是否添加确认即可。手动安装的缺点是不会自动更新需要定期去官网看新版本所以我只把它当临时方案。5.2 装了脚本却没反应问题出在哪这是最见频率最高的问题原因一般有四个。第一个是脚本根本没匹配到当前网站。检查一下脚本的match规则很多脚本只针对特定域名不是所有网站都生效。第二个是脚本被禁用了。去仪表盘确认脚本状态是绿色启用状态。第三个是脚本需要刷新页面才能生效装完脚本后已经打开的旧页面不会自动重载脚本必须刷新。第四个是网络加载顺序问题极少数脚本由于页面加载时机问题需要等一会儿才执行这时候手动刷新一次看看。如果以上都排除了就打开控制台看具体报错。常见报错有Uncaught ReferenceError多半是脚本写的变量在某浏览器不支持还有TypeError之类通常是页面结构变化导致脚本找不到元素。碰到这种说明脚本作者没及时更新你可以去脚本页面反馈或者找一个功能类似的替代脚本。5.3 和其他扩展打架怎么处理油猴偶尔会和其他扩展发生冲突表现是页面功能异常、控制台报错甚至浏览器崩溃。常见的原因是两个扩展同时修改了页面的同一个元素比如广告过滤扩展和油猴脚本都去隐藏同一个广告位。处理的思路是二分法先把所有扩展禁用只留Tampermonkey确认问题是否还存在如果不存在再逐步启用其他扩展启用一个就刷新测试一次直到找出冲突对象。找到冲突扩展后可以在Tampermonkey的脚本设置里使用排除匹配规则让脚本不在某个特定页面上运行绕开冲突。5.4 安全使用脚本的几条铁律脚本是代码能做好事也能做坏事。我在Greasy Fork上见过一些脚本表面功能正常背地里却偷偷往页面里插入广告、收集表单数据。所以关于脚本安全我总结了几条经验不在不信任的网站安装来路不明的脚本尤其是那种压缩成一行、没有任何注释的混淆代码安装前先点开脚本的“代码”标签页扫一眼有没有可疑的请求地址尽量避免安装要求任意网站权限却只做简单功能的脚本不要轻易开启设置里的“安全模式”关闭选项Tampermonkey默认的安全提示都是有理由的脚本建议定期清理不用的就禁用别一堆休眠脚本堆在那边另外还要特别注意油猴本身不会窃取你的数据但如果你装了一个恶意脚本它有能力读取你正在登录的网页里的内容。所以把“只装可信脚本”当作底线未知作者的新脚本先放着观察一阵再启用也不迟。回顾我这几年的使用经历油猴最让我上瘾的一点就是“万物皆可脚本化”。每次遇到一个重复性的网页操作我的第一反应不是去搜有没有现成工具而是想“能不能写个脚本自动化掉”。这是一种思维方式的改变。如果你刚入门不妨从安装它开始先把操作流程跑通再慢慢探索脚本里那个更自由的世界。最后提醒一句任何脚本都只是辅助工具别为了“自动化”去破解账号登录、绕过付费墙这类事情合理合法地使用才能让这个工具陪我们走得更远。