Firefox扩展注册Service Worker时浏览器加载不存在文件报错排查

核心原因 #

1. Content Script运行上下文限制：你的swerk.js作为Content Script注入宿主页面后，是在当前网站的页面上下文中执行的，而非扩展的独立后台上下文。调用navigator.serviceWorker.register('swerk.js', {scope: '.'})时，相对路径会被解析为当前网站的URL路径，而非扩展内部的资源路径，这就是浏览器尝试加载<URL>/swerk.js的根本原因。
2. Content Script定位错误：将Service Worker文件放在content_scripts配置里是误用——content_scripts的作用是向页面注入脚本/样式，而非声明扩展的后台Service Worker。即使脚本执行了打印，也只是在页面上下文里的执行，和扩展的Service Worker体系无关。

正确的解决方案 #

方案1：注册扩展专属的后台Service Worker（推荐）

扩展的后台Service Worker不需要手动调用navigator.serviceWorker.register，直接在manifest.json中声明即可：

{
  "manifest_version": 3,
  "background": {
    "service_worker": "swerk.js"
  },
  // 其他扩展配置项
}

Firefox会自动加载并注册这个扩展后台的Service Worker，它运行在扩展独立的上下文里，不会和宿主页面的路径混淆。

方案2：若需在页面上下文注册Service Worker（非扩展后台）

如果你确实需要在宿主页面中注册关联的Service Worker（而非扩展后台SW），需使用扩展资源的绝对URL，并确保资源可被页面访问：

1. 在manifest.json中配置web_accessible_resources，允许页面访问swerk.js：

{
  "web_accessible_resources": [
    {
      "resources": ["swerk.js"],
      "matches": ["<all_urls>"] // 或指定你需要的网站匹配规则
    }
  ]
}

2. 在Content Script中使用扩展资源的绝对URL注册：

const swUrl = chrome.runtime.getURL('swerk.js');
navigator.serviceWorker.register(swUrl, {
  scope: chrome.runtime.getURL('.') // 或根据需求设置合适的scope
})
.then(registration => {
  console.log('Service Worker注册成功:', registration);
})
.catch(err => {
  console.error('Service Worker注册失败:', err);
});

注意：这种方式注册的Service Worker属于页面上下文，和扩展后台SW是完全独立的两个体系，需根据实际需求选择。

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