Chrome扩展MV3配置Firebase时报Cannot use import statement错误如何解决？

核心原因 #

Chrome MV3的后台Service Worker默认按普通脚本解析，不支持ES模块import语法，和普通Web页的script标签配置逻辑不同，package.json的"type": "module"配置仅对Node.js环境生效，对Chrome扩展运行环境无效。

可行修复步骤 #

• 第一步：修改manifest.json的后台配置，添加"type": "module"声明，示例如下：

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

• 第二步：调整Firebase导入方式，根据你的开发场景二选一即可：
  1. 无打包工具的原生开发场景：使用全路径CDN导入Firebase模块，不要使用裸模块名导入

  // background.js头部导入示例，版本号可替换为你需要的Firebase版本
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js";
  import { getFirestore } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-firestore.js";
  // 后续按官方文档初始化Firebase即可
  

  2. 用Vite/Webpack等打包工具的开发场景：正常安装npm的firebase依赖后，按官方文档的ES模块语法导入即可，打包工具会自动处理模块路径映射。

注意事项 #

• 确保Chrome浏览器版本不低于89，低版本不支持Service Worker的module配置
• 后台脚本中不要混用CommonJS的require语法和ES模块的import语法，统一使用ES模块规范

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