Chrome扩展注册ES模块类型Service Worker时遇导入语句报错

核心问题 #

你不需要在弹出窗口中手动注册后台Service Worker——Chrome会自动根据manifest.json的配置加载并注册它。弹窗里的手动注册逻辑是错误的根源：当你手动调用navigator.serviceWorker.register()时，没有指定type: 'module'参数，导致浏览器将脚本当作普通脚本解析，从而抛出Cannot use import statement outside a module错误。

正确配置步骤 #

1. 保留manifest.json的正确后台配置
   你当前的配置是合规的，继续使用即可：

   "background": {
     "service_worker": "service-worker.js",
     "type": "module"
   },
   

   该配置会告知Chrome以ES模块形式加载后台Service Worker，并自动完成注册流程。

2. 移除弹窗中的手动注册代码
   删除弹出窗口脚本内类似navigator.serviceWorker.register('/service-worker.js')的代码，这类手动注册完全多余，且会引发错误。

3. 验证Service Worker运行状态
   加载扩展后，进入Chrome扩展管理页面的目标扩展详情页，点击「Service Worker」右侧的「检查」按钮，查看控制台输出，确认import语句是否正常执行。

额外注意事项 #

• 确认service-worker.js与service-worker-helpers.js的文件路径正确，路径需相对于扩展根目录。
• Chrome扩展支持ES模块的后台Service Worker要求manifest版本为V3，请确保manifest.json中配置了"manifest_version": 3。

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