Chrome扩展Manifest V3中background.js导入带依赖脚本失败如何解决

问题原因 #

这个报错绝大多数情况是模块导入的路径解析异常导致的，ES模块的相对路径是相对于当前模块文件的存放路径解析的，一旦实际目录结构和预期不一致、或者文件名大小写不匹配，就会触发资源加载失败，最终导致Service Worker注册失败。

修复步骤 #

• 首先确认目录结构完全匹配你的导入逻辑，正确的目录结构应该如下：

  扩展根目录
  ├─ manifest.json
  ├─ background.js
  └─ lib/
     ├─ myscript.js
     └─ myscript2.js
  

  同时确认文件名大小写完全匹配，Chrome对扩展内的资源路径大小写敏感，比如实际文件名为MyScript2.js时，导入语句写./myscript2.js会直接找不到资源。
• 如果目录结构和大小写都没有问题，可以直接使用相对于扩展根目录的绝对路径导入，避免相对路径解析异常，修改myscript.js中的导入语句即可：

  // 原来的相对路径导入
  // import { mySecondFunction} from "./myscript2.js";
  // 改为绝对路径，/ 代表扩展根目录
  import { mySecondFunction} from "/lib/myscript2.js";
  
  export function myFunction() {
    console.log("In myFunction!")
    mySecondFunction()
  }
  

• 确认你的Chrome版本不低于91，只有91及以上的Chrome版本才正式支持Manifest V3中Service Worker的type: "module"配置，版本过低也会触发注册失败的问题。
• 每次修改代码后，一定要在chrome://extensions/扩展管理页面（开启开发者模式）点击对应扩展的刷新按钮，重新加载扩展后再测试，避免旧缓存的代码导致报错。

如果修改后还是报错，可以打开扩展管理页面的错误面板，查看具体的资源加载失败提示，确认是哪个文件路径解析出错，针对性调整即可。

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