Tampermonkey无法加载本地@require文件 无法注册ServiceWorker记录网络流量

问题根因 #

你遇到的报错是两个叠加的问题导致的：

1. navigator.serviceWorker.register()接收的路径参数必须是当前网站上下文可访问的HTTP/HTTPS路径，file://协议的本地文件会被浏览器跨协议安全策略拦截，无法被公网/本地HTTP站点加载。
2. Tampermonkey的@require标签的作用是将目标文件的内容直接注入到油猴脚本的执行上下文，不会将文件暴露为当前站点可访问的URL资源，你直接传入test.js作为注册路径时，浏览器会尝试从当前网站的根路径请求该文件，自然无法找到。

可行解决方案 #

方案1：Blob URL注册（最便捷，无需额外服务） #

不需要单独存储ServiceWorker文件再引入，直接将SW代码存为字符串转成Blob URL后注册即可：

1. 将原本写在test.js中的ServiceWorker代码复制到油猴脚本中，定义为字符串变量：

const swCode = `
// 此处粘贴你原本test.js中的所有SW代码
self.addEventListener('fetch', event => {
  // 你的流量记录逻辑
  console.log('拦截请求：', event.request.url)
})
`

2. 转换为Blob URL后执行注册：

if (navigator.serviceWorker) {
  const swBlob = new Blob([swCode], {type: 'application/javascript'})
  const swUrl = URL.createObjectURL(swBlob)
  // 注册SW，scope可根据你需要拦截的范围调整
  navigator.serviceWorker.register(swUrl, {scope: '/'})
    .then(reg => console.log('ServiceWorker注册成功', reg))
    .catch(err => console.error('ServiceWorker注册失败', err))
}

方案2：本地HTTP服务托管（适合SW代码频繁迭代的场景） #

如果你希望单独维护SW文件，修改后无需更新油猴脚本，可通过本地HTTP服务托管该文件：

1. 在存储test.js的目录下启动本地HTTP服务，可选工具：
   • Node.js环境：安装http-server后执行http-server -p 8080
   • Python3环境：执行python -m http.server 8080
2. 在油猴脚本头部配置添加// @connect http://localhost:8080，放行跨域请求
3. 注册SW时直接传入本地服务的资源路径：

if (navigator.serviceWorker) {
  navigator.serviceWorker.register('http://localhost:8080/test.js', {scope: '/'})
}

注意事项 #

• 只有HTTPS站点和localhost站点支持注册ServiceWorker，公网HTTP站点会被浏览器禁止注册，这是标准安全限制。
• 每次更新ServiceWorker代码后，需要在浏览器控制台Application > Service Workers面板中注销旧版本SW，否则会沿用缓存的旧代码。
• 若要继续使用@require加载本地文件，需要进入浏览器的扩展管理页面，找到Tampermonkey的详情设置，开启「允许访问文件URL」权限。

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