ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

Chrome/Edge开发者模式:解决Tampermonkey脚本注入失效问题

Chrome/Edge开发者模式:解决Tampermonkey脚本注入失效问题 1. 这条提示到底在说什么如果你最近打开浏览器发现 Tampermonkey 的图标上冒出一个红色感叹号点开之后弹出一段中英混杂的提示——“请启用开发者模式以允许用户脚本注入点击这里了解如何操作。Please enable developer mode to allow userscript injection”——那你不是一个人。这个提示从 Chrome 浏览器 120 版本之后开始大规模出现Edge 也在相近的时间点跟进了同样的策略。简单说浏览器厂商收紧了扩展程序的权限边界Tampermonkey 这类需要往网页里“注入代码”的扩展必须由用户手动打开一个叫“开发者模式”的开关才能继续正常工作。这件事的本质是什么Tampermonkey中文圈习惯叫“篡改猴”是一个用户脚本管理器。它本身不干活干活的是你装的那些脚本——比如网课自动签到、网页去广告、批量抓取表单数据、给某个网站加个暗色主题。这些脚本要生效就必须被“注入”到目标网页的运行环境里跟网页原本的代码一起跑。浏览器出于安全考虑默认不允许扩展随便往页面里塞代码因为这也是恶意扩展常用的手法。所以厂商加了一道闸你想注入就得显式打开开发者模式等于你亲手签了个“我知道我在干什么”的确认书。适合看这篇内容的人很明确日常依赖 Tampermonkey 跑脚本的重度用户、做前端调试需要临时注入代码的开发者、以及被这个提示卡住导致脚本“已启用但不运行”的普通用户。不管你是 Chrome 还是 Edge不管你用的是 Windows、macOS 还是 Linux处理思路是一致的只是入口位置略有差别。下面我把这件事从原理到操作、从排查到避坑完整地捋一遍。2. 为什么浏览器要逼你开开发者模式2.1 用户脚本注入的底层机制要理解这个提示得先知道用户脚本是怎么跑起来的。Tampermonkey 的工作模式可以拆成三步拦截、匹配、注入。当你在地址栏输入一个网址、页面开始加载时Tampermonkey 会先看一眼当前 URL跟你脚本里写的match或include规则做比对。匹配上了它就把脚本内容通过浏览器提供的扩展接口塞进这个页面的执行上下文里。塞进去的时机很关键——有的脚本要在页面 DOM 构建之前就跑run-at document-start有的要等页面加载完run-at document-idle时机不对脚本就会失效。这个“塞进去”的动作专业叫法是脚本注入。浏览器内核Chromium 系对扩展的能力是分级的。普通扩展只能操作自己的弹窗、读写有限的存储、发发网络请求。而注入脚本意味着扩展能读写目标页面的 DOM、能拿到页面的 cookie 上下文、能改表单提交的内容——权限一下子大了一圈。早些年这个权限是默认给的只要用户装了扩展就默认信任。后来恶意扩展泛滥厂商就开始收紧把“注入”归到了需要用户显式授权的范畴开发者模式就是那个授权开关。2.2 开发者模式这道闸的真实作用很多人误以为开发者模式是给“开发扩展的人”用的跟自己没关系。其实在 Chromium 的权限模型里开发者模式是一个总开关打开它等于告诉浏览器“我信任我手动加载的这些扩展愿意承担相应风险。”它主要放开三件事允许加载未打包的扩展、允许扩展使用更高权限的接口、允许扩展往页面注入脚本。Tampermonkey 需要的正是第三项。这里有个容易混淆的点Tampermonkey 是从应用商店正常安装的不是“未打包扩展”为什么还要开发者模式原因是厂商把“脚本注入”这个高危能力单独拎了出来跟扩展是否来自商店无关只跟用户是否显式授权有关。所以你会看到一个有点反直觉的现象——商店里装的扩展照样要你开开发者模式。这不是 Tampermonkey 的 bug是浏览器策略变更后的必然结果。注意开发者模式打开后浏览器每次启动可能会弹一个“请停用以开发者模式运行的扩展程序”的提示条。这是 Chromium 的固有行为不是中毒也不是扩展有问题。后面我会讲怎么处理这个提示条。2.3 不开会怎样脚本“已启用但不运行”不开开发者模式最典型的表现就是热词里提到的“篡改猴脚本已启用但是没有运行”。你在 Tampermonkey 的管理面板里看脚本明明是启用状态图标也是彩色的但打开目标网站脚本该干的事一件没干。打开控制台F12看可能连脚本的日志都没有或者报一个权限相关的错误。这时候很多人会反复重装脚本、重装扩展、甚至重装浏览器其实方向全错了——问题不在脚本在浏览器的那道闸没开。还有一种更隐蔽的情况部分脚本能跑部分不能。这通常是因为能跑的脚本用的是grant none模式直接在页面上下文跑不调用扩展特权接口不能跑的用了GM_setValue、GM_xmlhttpRequest这类需要扩展特权的接口。开发者模式没开特权接口被拦脚本自然就哑了。所以判断标准很简单只要你的脚本用到了 GM_ 开头的接口就必须开开发者模式。3. Chrome 和 Edge 的具体操作步骤3.1 Chrome 浏览器开启路径Chrome 的操作入口在扩展管理页。最直接的方式是在地址栏输入chrome://extensions/回车进入扩展管理界面。这个页面右上角有一个“开发者模式”的开关把它拨到打开状态。开关打开后页面顶部可能会多出一排按钮加载已解压的扩展程序、打包扩展程序等这些你不用管它们只是开发者模式的附带功能。打开之后回到 Tampermonkey 的弹窗那个红色感叹号提示应该就消失了。如果没消失点一下 Tampermonkey 图标里的“重新加载”或者干脆刷新一下目标网页。实测下来绝大多数情况刷新页面就能恢复。这里有个细节开发者模式开关是全局的打开一次就行不需要每个扩展单独设置。但如果你用的是 Chrome 的企业策略版本或者被组织管理的设备这个开关可能被管理员锁死那就得找 IT 处理了。3.2 Edge 浏览器的差异点Edge 的操作逻辑跟 Chrome 几乎一样入口是edge://extensions/。打开后左侧栏或者页面底部取决于 Edge 版本能找到“开发人员模式”的开关。Edge 把这个开关藏得比 Chrome 稍微深一点有些版本需要先点左下角的“详细信息”才能看到。热词里“edge开发者模式使用”搜索量高就是因为不少人第一次找不到入口。Edge 还有一个自己的特点它对扩展的权限管理比 Chrome 更细有时候开了开发人员模式还会额外弹一个“此扩展可以读取和更改你访问的网站上的所有数据”的确认框需要你点“允许”。这个框不是每次都弹通常在你新装扩展或者扩展更新后第一次运行时出现。看到就点允许别犹豫否则脚本照样不跑。3.3 操作后的验证方法开完开关别急着关页面做个验证。随便打开一个你装了脚本的网站按 F12 打开开发者工具切到 Console 面板。如果你的脚本有输出日志很多脚本会在启动时打印一行版本信息能看到就说明注入成功了。看不到日志的话可以在 Console 里手动敲一行typeof GM_info如果返回object说明 Tampermonkey 的特权接口已经可用注入通道是通的。返回undefined就说明还没生效回去检查开关状态。另一个验证角度是看 Tampermonkey 的弹窗。正常工作时弹窗里会列出当前页面匹配到的脚本每个脚本前面有个小圆点绿色代表正在运行。如果圆点是灰色或者脚本压根没出现在列表里那就是匹配规则或者注入权限的问题。这个面板是排查脚本问题最常用的入口建议养成习惯脚本不跑先看这里。4. 那些让人抓狂的连带问题4.1 开发者模式提示条怎么处理开了开发者模式之后Chrome 每次启动会在顶部弹一条“请停用以开发者模式运行的扩展程序”的提示。这条提示很烦但它不影响功能点右边的叉关掉就行。如果你实在受不了有几个思路一是用组策略或者注册表把这条提示屏蔽掉网上有现成的注册表脚本原理是改 Chromium 的一个策略键值二是换用 EdgeEdge 对这条提示的处理相对温和有些版本不弹。不过我得说句实话为了省一次点击去改注册表性价比不高而且系统更新后可能失效我个人的做法就是每次点叉习惯了也就那样。4.2 脚本装了但列表里不显示这种情况通常是匹配规则的问题跟开发者模式无关。Tampermonkey 判断脚本是否对当前页面生效靠的是脚本头部的match、include、exclude这几行元数据。如果 URL 不匹配脚本就不会出现在弹窗列表里。排查方法是打开 Tampermonkey 的管理面板找到那个脚本看它的匹配规则写的是什么。比如规则写的是https://example.com/*而你访问的是http://example.com少了 s那就匹配不上。改规则或者用match *://example.com/*这种通配写法都能解决。还有一种情况是脚本被“排除”了。Tampermonkey 支持在设置里配置全局排除规则或者脚本自己写了exclude。检查一下设置页的“排除”列表看看目标网站是不是被误加了进去。这个坑我踩过当时排查了半小时才发现是自己之前手滑加了个排除规则。4.3 权限被浏览器策略拦截企业环境或者用了某些安全软件的电脑上即使开了开发者模式脚本注入还是可能被拦。表现是 Console 里报一个Refused to execute inline script或者Content Security Policy相关的错误。这是目标网站自己的 CSP 策略在起作用跟浏览器和 Tampermonkey 都没关系。CSP 是网站用来防 XSS 攻击的它会限制哪些来源的脚本能执行。Tampermonkey 的注入方式在某些严格 CSP 的网站上会被挡。应对办法是让脚本用grant声明特权接口通过 Tampermonkey 的沙箱环境跑而不是直接注入页面上下文。具体来说把脚本头部的grant none改成grant GM_setValue之类的具体接口Tampermonkey 就会用隔离环境执行绕过 CSP。代价是脚本里不能直接访问页面的全局变量了需要额外处理。这个属于进阶话题普通用户遇到 CSP 拦截的概率不高知道有这么回事就行。5. 脚本注入的进阶理解与选型5.1 注入时机对脚本行为的影响run-at这个元数据决定了脚本什么时候注入选错了脚本行为会完全不一样。document-start是最早的时机页面 DOM 还没建好适合做请求拦截、修改页面初始配置这类操作。document-end是 DOM 建好但资源可能还没加载完适合操作 DOM 元素。document-idle是默认值等页面基本加载完再跑最稳妥但可能错过一些早期事件。我见过不少人写脚本时无脑用默认值结果要拦截的请求早就发出去了脚本才启动自然拦不住。判断方法很简单如果你的脚本要改的是页面加载时就确定的东西比如某个全局配置对象用document-start如果要操作的是页面上看得见的元素用document-end或document-idle。Tampermonkey 的文档里对这几个时机有详细说明值得花十分钟读一遍。5.2 GM 接口的能力边界Tampermonkey 提供了一组GM_开头的接口这是它区别于普通书签脚本的核心价值。常用的几个GM_setValue/GM_getValue做跨页面持久化存储GM_xmlhttpRequest发跨域请求绕过同源策略GM_addStyle往页面加 CSSGM_registerMenuCommand在 Tampermonkey 菜单里加自定义命令。这些接口都需要开发者模式授权才能用。这里有个选型经验能用原生fetch解决的就别用GM_xmlhttpRequest因为后者虽然能跨域但错误处理和调试都比原生麻烦。只有在确实需要跨域、且目标服务器不允许 CORS 的情况下才动用 GM 接口。另外GM_setValue存的数据是跟脚本绑定的换脚本或者改脚本名可能导致数据读不到重要数据建议同时做一份导出备份。5.3 脚本来源与安全考量用户脚本的生态是开放的网上有大量现成的脚本可以直接装。但开放也意味着风险——脚本能读写你访问的页面理论上能拿到你在页面上的所有操作包括登录态。装脚本前至少看一眼脚本头部的match范围如果它匹配的是*://*/*所有网站就要多留个心眼。正经的脚本通常只匹配它需要的那几个域名。我的习惯是装之前先看脚本的更新时间和评价太老或者没人维护的慎用装之后在 Tampermonkey 面板里看一眼它的权限声明用不到的权限可以手动关掉。Tampermonkey 本身也提供了脚本沙箱和权限控制合理利用能降低风险。这不是危言耸听而是这个生态里真实存在的坑谨慎一点没坏处。6. 常见问题速查与避坑心得6.1 问题排查速查表现象最可能的原因处理方式提示启用开发者模式浏览器策略收紧注入权限未授权打开扩展管理页的开发者模式开关脚本已启用但不运行开发者模式未开或匹配规则不命中先开开关再检查match规则部分脚本跑部分不跑用了 GM 接口的脚本被拦开开发者模式确认grant声明弹窗列表里没有脚本URL 不匹配或被排除规则命中检查匹配规则和排除列表Console 报 CSP 错误目标网站 CSP 拦截直接注入改用 GM 接口走沙箱执行每次启动弹提示条开发者模式的固有行为手动关闭或用策略屏蔽6.2 几个我踩过的坑第一个坑是“以为开了开发者模式就万事大吉”。实际上开发者模式只是必要条件不是充分条件。脚本能不能跑还取决于匹配规则、注入时机、CSP 策略、脚本本身的代码质量。我遇到过开了开关脚本还是不跑的情况最后发现是脚本里有个语法错误Tampermonkey 静默失败了Console 里才有报错。所以排查脚本问题F12 的 Console 面板永远是第一站。第二个坑是“频繁切换开发者模式”。有些人为了消掉提示条用完脚本就把开关关掉下次用再打开。这样折腾几次之后Tampermonkey 的状态可能会错乱表现为脚本列表加载不出来或者设置丢失。我的建议是开关就让它开着提示条点叉关掉别反复横跳。Tampermonkey 的设置是存在浏览器本地存储里的频繁切换开关理论上不影响但实测确实有人遇到过状态异常重装扩展才恢复。第三个坑是“脚本冲突”。同一个页面上装了两个脚本都往页面里加元素或者改同一个 DOM 节点结果互相覆盖表现为时好时坏。排查方法是把脚本一个个禁用二分法定位。Tampermonkey 面板里可以单独禁用某个脚本不用卸载很方便。定位到冲突的两个脚本后看能不能改匹配范围让它们错开或者调整run-at时机让它们按顺序执行。6.3 给长期使用者的建议如果你把 Tampermonkey 当生产力工具用建议做两件事。一是定期导出脚本备份Tampermonkey 的设置页有导出功能导出一个 zip 文件里面包含所有脚本和配置。浏览器重装或者换电脑时导入就能恢复省得一个个重装。二是给重要脚本加版本注释脚本头部写清楚用途、作者、更新日期时间长了脚本多了光看名字根本想不起来是干嘛的。另外浏览器大版本更新后建议主动检查一下 Tampermonkey 是否正常工作。Chromium 系的权限策略还在持续调整说不定哪个版本又改了规则。Tampermonkey 的更新通常跟得比较紧保持扩展自动更新打开能省不少事。我个人的习惯是每次浏览器大版本更新后随便打开一个常用脚本的网站确认一下脚本还在跑花不了一分钟但能避免关键时刻掉链子。最后分享一个判断脚本是否真的在运行的小技巧在 Tampermonkey 的设置里打开“显示脚本运行状态”这样脚本执行时图标上会有个短暂的动画或者角标。比翻 Console 快适合日常快速确认。这个选项在设置页的“通用”里找一下就有。
返回列表