Tampermonkey脚本@require引入本地JS文件失效该如何解决？

问题根因 #

• Tampermonkey的@require字段有资源缓存机制，修改依赖路径后如果没有强制刷新脚本的依赖缓存，旧的失效资源会持续被调用，即使你重新保存了脚本也不会生效。
• http/https协议的目标页面和file协议的本地资源存在跨源限制，即使你给Tampermonkey开了本地文件访问权限，Chrome内核浏览器的跨域安全策略也会拦截file协议资源的加载，导致依赖引入失败。
• 部分版本的Tampermonkey对本地file路径的识别存在兼容问题，无协议头的绝对路径无法被正确识别为本地资源。

解决方法 #

方案1：强制刷新缓存+规范路径（适合临时测试） #

1. 确认Tampermonkey扩展的「允许访问文件网址」权限已开启：在浏览器扩展管理页面找到Tampermonkey，进入详情页开启对应权限。
2. 把所有@require的本地路径统一调整为file:///开头的绝对路径，示例：

// ==UserScript==
// @name         name
// @version      version
// @author       author
// @description  description
// @match        你的目标匹配URL
// @require      file:///Users/myname/Desktop/Tools/mycode1.js
// @require      file:///Users/myname/Desktop/Tools/mycode2.js
// @require      file:///Users/myname/Desktop/Tools/mycode3.class.js
// ==/UserScript==

3. 保存脚本后，进入Tampermonkey管理面板的已安装脚本列表，点击该脚本右侧的强制刷新按钮，刷新所有依赖资源后再打开目标页面测试。

方案2：本地启动临时HTTP服务（最稳妥，开发阶段推荐） #

避开file协议跨源限制，是油猴脚本本地开发的通用方案：

1. 打开终端进入代码存放目录/Users/myname/Desktop/Tools/，用任意方式启动本地HTTP服务：
   • 有Python3环境执行：python3 -m http.server 8888
   • 有Node.js环境执行：npx serve -l 8888
2. 把脚本的@require路径替换为本地服务的HTTP地址：

// @require      http://localhost:8888/mycode1.js
// @require      http://localhost:8888/mycode2.js
// @require      http://localhost:8888/mycode3.class.js

3. 保存脚本后刷新目标页面即可正常加载，修改本地代码后刷新页面就能生效，不需要反复修改油猴脚本内容。
   如果你的目标页面是HTTPS协议，浏览器会拦截HTTP混合内容，只需要在该页面的站点设置里允许「不安全内容」加载即可，或者给本地服务配置自签证书用HTTPS协议访问。

内容的提问来源于stack exchange，提问作者LearningCode