用外部编辑器写 Tampermonkey 脚本:file 协议工作流与 vscode.dev 联动
内置编辑器够用,但脚本写大了,大家还是想回自己顺手的编辑器。官方给了两条路。
路径一:@require 本地文件(实时生效)
官方 FAQ 给出的流程:
- 把脚本内容复制出来,存成本地文件,比如放在「文档」目录下;
- Tampermonkey 里打开该脚本,删掉代码区全部内容,只保留
// ==UserScript==元数据头; - 在头部加一行
@require,指向本地文件:
// @require file:///C:/Users/用户名/Documents/myscript.js
- 开启本地文件访问权限:这是关键一步——没有它,扩展读不到磁盘文件。开启方法见文件网址权限。
之后的工作流:本地文件用任何编辑器改 → Ctrl+S 保存 → 刷新目标页面,脚本用的就是最新代码。官方还有一招进阶:较新版本支持打开本地脚本文件并跟踪磁盘变更来加速开发(见版本日志 5.5.0 的 Chrome 更新说明)。
官方文档还补充了 SRI 机制:@require 的外部文件可以带哈希校验,防止被篡改。
路径二:Tampermonkey Editors 扩展 + vscode.dev
官方另发了一个独立扩展 Tampermonkey Editors,用途是把编辑工作接到 vscode.dev:
- 在官方主页「Rapid development」区可找到入口;
- 工作方式:Editors 扩展与 vscode.dev 页面联动,在浏览器里的 VS Code 环境编辑脚本;
- 适合不想配置本地
file://权限、又想要专业编辑器补全和调试体验的用户。
两条路径怎么选
| 场景 | 建议 |
|---|---|
| 偶尔改改、脚本很小 | 内置编辑器 |
| 脚本有几百行、要 git 管理 | 路径一(本地文件) |
| 想要 IDE 补全、不想动本地权限 | 路径二(Editors 扩展) |
常见坑
@require file://路径里的斜杠方向与盘符格式要按file:///C:/...的三斜杠写法;- 权限开了但脚本没更新:保存的文件路径与
@require声明的是否为同一个文件; - 本地文件方案只对代码区生效,元数据头仍在 Tampermonkey 里维护。