油猴这名字说实在的一开始挺劝退人。我头一回听说的时候也纳闷一个浏览器扩展工具怎么起个像宠物小精灵的名字等真正用明白才反应过来它跟猴子没什么关系跟把网页变成你想要的样子关系非常大。油猴的正式名字叫 Tampermonkey本质上是一个用户脚本运行环境。以前你用过的浏览器扩展功能都是写死的装上去是什么样就是什么样油猴不一样它让任何人都能在你访问的页面上运行一段自定义的 JavaScript想怎么改就怎么改改完即时生效。这篇文章是写给所有还卡在扩展装好了但不知道下一步干嘛的人也写给那些已经会装脚本但经常遇到脚本没生效不知道怎么看日志想自己写但不敢动手的朋友。我会从原理、安装、实用脚本推荐、手写脚本、问题排查一路讲到底中间穿插我这些年踩过的坑尽量把每一步讲透。不需要你有编程基础只要会复制粘贴照着做完就能体会到什么叫网页任你摆布。1. 先搞懂油猴是什么以及它到底能做什么1.1 它不是普通插件而是一个“脚本运行环境”把浏览器想象成一间精装交付的房间。普通扩展是买回来的成品家具能摆在哪、能干什么家具本身说了算你不能指望一张茶几自动长出抽屉来。油猴不一样它更像是一套工具箱加一摞改造图纸任何人往里面写一段运行逻辑就能把房间的某个角落改成你要的样子。油猴负责管理这段逻辑在什么页面运行、什么时候运行、能用哪些权限而具体干什么完全由脚本决定。从技术上讲油猴脚本的本质就是 JavaScript再加上一段特殊的头部注释也就是所谓的 UserScript 头。这段注释里写着脚本的名字、版本、作者、描述以及最重要的——它应该在哪些网站上运行。油猴读取这些配置在匹配规则命中的页面加载完成后把脚本内容注入到页面里执行。理解了这一点后面所有看似玄学的现象都有了答案为什么脚本只在某些网站起作用、为什么换了网址就不生效、为什么页面一改版脚本就垮掉根子上都出在运行条件上。1.2 它能解决什么问题四个典型场景普通人最容易感知到的价值大概有这么几类阅读与排版优化把页面多余的侧栏、广告、弹窗清掉调整正文字号、行距甚至全局换暗色模式。效率操作一键复制整页选中文本、自动展开折叠内容、批量勾选列表项、自动填写表单。素材整理批量下载网页原图、一键保存一组图片、把页面信息结构化导出。信息整合在搜索结果页叠加额外信息、把多个页面的数据拼到一个页面里看。谁适合用普通用户拿它提升浏览体验前端开发者拿它当练手和调试验证工具运营和内容创作者拿它批量处理素材。它不替代浏览器已有的功能而是给浏览器赋能让每个页面都按你的习惯来。1.3 它跟“浏览器插件”有什么本质区别这里说一个很多人容易混淆的点。油猴本身是扩展但它管理的脚本不是扩展。普通扩展要上架审核、要打包、要申请一大堆权限油猴脚本就是一段纯文本不需要编译不需要上架装完就能跑。所以脚本的试错成本极低改一行保存刷新就能看到效果。也是因为这个特性脚本生态非常活跃很多扩展没有的小众需求翻一翻脚本社区往往早有人写好了。但反过来低门槛也带来低信任。普通扩展有审核机制兜底脚本没有。所以后面我会专门讲怎么判断一个脚本值不值得装以及怎么保护自己的账号和数据安全。这些内容看着虚关键时刻真能救命。2. 安装油猴插件与装第一个脚本2.1 装扩展本身五分钟搞定第一次操作其实非常简单。打开你日常用的浏览器扩展商店搜索“Tampermonkey”认准官方标识的条目点安装。装完之后工具栏会出现一个图标点开是一个面板显示当前页面匹配到了哪些脚本以及全局的脚本数量。我用过一段时间之后总结出了三条安装前要确认的底线安装来源必须是官方扩展商店不要下载第三方站点打包的所谓“绿色版”或“破解版”。扩展要保持更新旧版本在面对浏览器内核升级时可能无法正常注入脚本。浏览器本身尽量用最新稳定版很多莫名其妙的“脚本不生效”其实是浏览器过旧导致的。油猴是免费开源项目官方渠道足够用没必要去冒破解版的险。2.2 从脚本社区装第一个真正有用的脚本扩展装好只是第一步真正让油猴发挥价值的是脚本。找一个活跃的脚本分享站搜索自己想解决的问题。以“阅读模式辅助脚本”为例这类脚本通常会把某个资讯站的正文提取出来去广告、去推荐位、统一字号和背景色让长文章读起来更舒服。安装流程通常是这样的在脚本详情页点安装按钮油猴会先弹出一个预览对话框展示脚本的完整源码和它的元信息确认后点安装。回油猴面板能看到脚本出现在列表里。此时打开它匹配的网站脚本就开始工作了。你不需要知道它内部怎么运作只需要理解一个概念脚本有它的势力范围也就是 match 规则定义的网址范围出了这个范围它不会运行。我第一次感受到网页可以这么改的那一刻是装完一个排版脚本后打开经常逛的技术文章页页面变成了柔和的米白色底正文 18 号字行距宽得刚好右边的推荐栏整个消失。那一刻我才明白原来改造网页是可以做到这种精细程度的。2.3 管理面板的六个基本操作装上几个脚本之后就要学会用油猴面板。别看界面简单这六个操作是高频中的高频脚本列表所有已安装脚本的集合每个脚本前有开关可以单独启用或停用。编辑直接查看或修改脚本源码改完保存刷新页面后生效。检查更新油猴会读取脚本头部声明的更新链接自动比对版本并下载新版。删除不再需要的脚本直接移除同时会清理它在浏览器里存的数据。导出/导入把全部脚本打包成一个 zip 文件换电脑或重装浏览器后一键恢复。日志查看脚本运行时的报错和输出记录排查问题的主要入口。第一次接触的人最容易忽略检查更新。脚本是需要维护的产物网站页面一旦改版旧脚本就可能失效作者会发布新版本适配。定期手动点一次检查所有脚本更新是个好习惯尤其是在你发现某个脚本开始不听话的时候。3. 几类真正值得装的脚本按场景推荐3.1 阅读排版党让长文章回归阅读本身这类脚本的功能高度集中正文提取、广告过滤、字号和颜色调整、暗色模式。最适合经常看技术文档、行业资讯、小说连载的人群。选这类脚本时你只需要看三个指标更新是否活跃、是否只针对单一网站定制、以及代码是否公开可读。尽量避免那种号称全网通用的万能排版神器——不是它不好而是维护成本太高作者一旦弃坑遇到任意一个网站改版整个脚本就跟着废了。单一网站的脚本反而更可靠因为它们解决的问题具体作者也通常是那个网站的重度用户对页面结构了如指掌改版后通常两三天内就会跟进修复。3.2 效率党把重复操作交给脚本自动填充表单、一键登录自己的账号、自动翻页、批量勾选、定时刷新等这些都属于效率类脚本。它们的共同特点是把人在浏览器里的重复劳动抽象成固定逻辑。比如我见过一个很实用的脚本在某后台管理系统的列表页自动勾选所有复选框再配合一个快捷键模拟点击批量导出按钮原先每天要花十分钟的重复操作现在一键完成。但效率类脚本有一个必须守住的底线——凡是涉及账号密码、涉及提交数据到服务器的脚本一定只从流量大、评价多、更新勤的页面获取安装后至少大概浏览一下源码里有没有可疑的请求地址。能看懂一点代码是最好的自我保护这也是我一直建议非技术用户稍微学一点 JavaScript 的原因。3.3 素材党图片与文件批量处理很多做设计、做内容运营的人日常工作有一大半是搜集素材。油猴在这块有不少好用的脚本批量下载页面原图、抓取图片直链、一键保存整个图集还有把网页表格导出成 CSV 之类的工具。这些脚本能省下的时间非常可观。我自己曾经手动右键保存三十多张图点到手指发酸后来换了一个批量保存脚本一整页的图两秒钟就进本地文件夹。这里必须多说一句边界问题批量下载只适用于你有权使用的素材。图片的版权归属于创作者脚本只是个工具工具不分善恶使用工具的人要在法律和道德的框架内行事。这个边界不是油猴管的但你应该自己管住。3.4 页面净化克制且精准地处理干扰元素弹窗广告、诱导关注浮层、自动播放的视频、满屏的悬浮按钮这些侵入式设计极大影响浏览体验。用普通扩展也能挡掉一部分但油猴方案更精准因为它可以针对具体网站写具体规则自动点击掉某个按钮、直接移除某个 DOM 节点、又或者在你滚动到特定位置时再展开内容。到这一步脚本就体现出可编程的威力了。页面改造需要用到一个叫 MutationObserver 的技术专门监听 DOM 变化。很多弹窗是页面加载后异步出现的普通扩展只能拦截初始渲染但油猴脚本可以做到弹窗一出现就把它清掉哪怕页面每秒钟重新生成一次元素也能时刻保持你想要的样子。4. 自己动手写一个脚本从零开始的完整例子4.1 先学会看懂脚本头任何油猴脚本的头部都是一段被// UserScript包裹的注释。它不参与逻辑执行但定义了脚本的所有元信息。我建议新手先花十分钟把每个字段搞明白后面调试排错会轻松很多。// UserScript // name 正文页回到顶部 // name:zh-CN 正文页回到顶部中文名 // namespace 我的脚本系列 // version 0.1.0 // description 在长文章页面右下角添加一个回到顶部按钮 // author 某开发者 // match *://*/* // run-at document-end // grant none // /UserScript多看几份热门脚本就会发现字段无非这几个name脚本名称加上语言后缀可以适配油猴的多语言显示。namespace命名空间用来区分同名脚本一般写作者的个人标识。version版本号必须递增油猴靠它判断有没有新版。description一句话描述脚本功能。match核心匹配规则支持*通配符限定脚本运行在哪些网址。run-at注入时机document-start表示尽早注入document-end表示 DOM 解析完再注入。grant声明需要使用的油猴 API如果不需要任何特殊权限就写none这会让脚本在隔离性上更安全。4.2 一个完整可用的脚本长文章页加“回到顶部按钮”理解头之后就可以写真实功能了。下面的脚本会在页面上创建一个右下角悬浮按钮页面滚动超过一定距离后出现点击后平滑回到顶部。这是最典型的练手项目涉及 DOM 操作、样式注入、事件绑定、滚动监听四个基础环节。// UserScript // name 正文页回到顶部 // namespace 我的脚本系列 // version 0.1.0 // description 在长文章页面右下角添加一个回到顶部按钮 // author 某开发者 // match *://*/* // run-at document-end // grant none // /UserScript (function () { use strict; const createBtn () { if (document.getElementById(my-back-to-top)) return; const btn document.createElement(div); btn.id my-back-to-top; btn.textContent ▲; Object.assign(btn.style, { position: fixed, right: 20px, bottom: 40px, width: 44px, height: 44px, lineHeight: 44px, textAlign: center, background: rgba(0, 0, 0, 0.55), color: #fff, borderRadius: 50%, cursor: pointer, zIndex: 99999, display: none, userSelect: none }); btn.addEventListener(click, () { window.scrollTo({ top: 0, behavior: smooth }); }); document.body.appendChild(btn); return btn; }; const btn createBtn(); window.addEventListener(scroll, () { if (!btn) return; btn.style.display window.scrollY 400 ? flex : none; }); })();这段代码有几个值得讲清楚的设计细节。首先为什么用Object.assign而不是一行一行写btn.style.position fixed因为批量定义样式可读性更高后续调整布局参数时只需要改动一处这是长期维护的体验问题。其次为什么按钮用flex而不是block因为配合lineHeight一起用文字“▲”在圆形按钮里能保持水平和垂直居中视觉上更稳。第三滚动监听的关键阈值是 400 像素超过这个距离按钮才出现滚回顶部附近就自动隐藏避免遮挡内容。用油猴面板新建脚本把模板清空粘贴上面完整代码保存然后随便打开一个页面测试。滚动超过 400px右下角出现半透明圆形按钮点击后页面平滑滚回顶部。4.3 调试脚本的正确姿势写脚本必然遇到 bug新手的问题不是代码写不对而是不知道去哪看错误。浏览器开发者工具里的 Console 面板是第一现场脚本任何运行时报错都会显示红色信息点击报错右侧的文件链接还能跳转到具体的代码行。另外一个是油猴自己的日志面板它会汇总脚本运行记录但默认只保留最近少量内容需要结合 Console 一起用。我见过的常见错误集中在三类match 写错导致脚本根本没注入。这种最致命也最难排查因为 Console 里一点痕迹都没有。脚本运行太早document.body还是 null操作 DOM 直接报错。解决办法是把 run-at 调整到 document-end。变量名冲突。同时装多个脚本后偶尔会遇到两个脚本都定义了同名全局变量。解决办法就是像上面例子那样每个脚本都用 IIFE 包住把所有变量关在自己的作用域里。这也是为什么社区里稍微有经验的作者写脚本一定会用 IIFE。5. 常见问题排查与避坑实录5.1 脚本不生效按表格逐条排查问题现象最常见的根源排查操作脚本在列表里但页面一点变化都没有match 没匹配当前网址打开管理面板选中脚本查看“受控网址”是否包含当前页面页面部分效果生效部分功能没反应页面有异步加载元素出现得太晚改成 document-end并用 MutationObserver 处理动态节点元素在页面上能看到但点击毫无反应事件绑定发生在元素创建之前Console 里手动执行 document.querySelector 检查元素是否真实存在换电脑或重装浏览器后脚本全没了没有开启浏览器的同步功能开启同步或提前用导出功能备份脚本 zip某次更新之后以前能用的功能坏了网站页面结构改版或作者引入新 bug去脚本详情页看更新记录回退到上一个稳定版本每一条我都实际踩过。第二条尤其隐蔽页面看着完全正常但功能残了一半十有八九跟异步加载有关。很多网站的内容区域是页面加载完成后才由 JavaScript 动态插入的document-end 只保证了初始 DOM 解析完并不保证异步内容已经出现。脚本在异步内容缺席时绑定事件等于什么都没绑。解决思路是让脚本对 DOM 变化保持警觉用 MutationObserver 监听内容插入等目标元素出现之后再执行绑定逻辑。5.2 多脚本打架与页面越来越卡油猴允许你在一个页面开几百个脚本但这绝不意味着应该这么做。脚本过多带来的问题非常现实页面加载变慢、滚动掉帧、莫名其妙的功能冲突。我见过一台机器装六十多个脚本打开门户首页滚动时卡顿肉眼可见最后花了一晚上逐个排查才找出三个互相打架的定时器脚本。定时器问题值得单独拎出来说。有些脚本为了等待动态元素出现会写setInterval反复检查但代码写得不够严谨页面刷新后旧的定时器没有被清除新的又叠加进来于是函数执行次数指数增长浏览器被拖垮是早晚的事。自查方法很简单打开开发者工具 Console执行getEventListeners(window)看看挂了多少事件监听数量异常膨胀就说明某个脚本不克制。5.3 更新机制与“改坏了”如何回退油猴更新脚本的原理不复杂读取脚本头部声明的更新地址比对版本号远端版本比本地高就下载安装。这本来是好机制但也意味着作者一次不严谨的提交可能让你的稳定环境瞬间变得不稳定。面对更新引发新问题我的回退流程是这样的。先在管理面板记录当前版本然后去脚本源码对应的下载页翻历史发布记录找到上一个稳定版重新安装。装完后打开编辑器把 version 手动改成一个比最新版更大的占位号比如最新版是 1.3.2就改成 1.3.99这样油猴会认为你已经是最新版不会再自动拉取。这套锁版本的操作是每个油猴深度用户都应该掌握的。注意备份是最廉价的后悔药。我每次大批量调整脚本之前都会先导出整个目录的 zip 备份改动别人的脚本源码之前也会先存一份原始版本。这个习惯救过我很多次强烈建议你也养成。5.4 怎么判断一个脚本信不信得过判断脚本安全性不需要成为代码高手只需要会看三个地方脚本头声明的 match 权限、源码里的网络请求、以及评论区的口碑。先说权限。普通脚本的 match 通常是某个具体域名比如https://docs.example.com/*。但有些脚本写的是*://*/*意思是所有 http 和 https 页面它都要跑这种脚本权限极大必须格外小心。它完全可以读取你在任意网站输入的每一样东西。再说网络请求。油猴脚本可以发起后端请求社区脚本里出现指向不明第三方域名的接口请求就是一个很强的危险信号。最后是评论区。长期活跃、更新及时、用户反馈良好的脚本作者通常更值得信任。6. 使用油猴的安全底线与个人经验6.1 授权之前想清楚这四件事安装任何脚本之前先花一分钟过一遍这四个问题这个脚本的匹配范围有必要放到全部网站吗它的源码里有没有向陌生域名发送网络请求作者是长期活跃、口碑清楚的人还是来路不明的匿名账号如果它运行失败甚至故意作恶我能不能承受后果我个人的标准一直很明确涉及工作账号、支付信息、私人数据的浏览器环境里绝不安装来源不明的脚本私人娱乐设备上才集成社区脚本。在安全上养成零信任习惯比安装任何安全软件都重要。也建议定期清理不用的脚本把权限和风险敞口都降到最低。6.2 油猴带来的一点长期价值我用油猴的这几年最大的收获不是省了多少时间而是它让浏览器从被动接收页面变成了主动改造环境。一开始我只是点安装按钮后来开始改别人的脚本再后来自己从头写。每改一个脚本都会逼自己去理解页面结构、DOM 节点、事件机制这些前端概念。回头想想我对网页背后结构的直觉很大程度就是从调试一个个小脚本积累出来的。很多人把它当成小技巧实际上它是理解 Web 技术极好的入口。如果你看完这篇文章还是不知道怎么下手我送一个最低成本的行动方案选一个你每天都会打开的网站找一个细小的痛点——每次都要手动切换深色模式、右侧广告太碍眼、长文章没有返回顶部按钮、翻页太麻烦——把它当作第一个脚本要解决的问题。解决完这一个痛点你会发现自己已经会装、会改、甚至会写脚本了。这条路我走过效果比看十篇教程都实在。