Chrome扩展导入Firebase报错：Cannot use import statement outside a module

方案1：配置Manifest将脚本标记为ES模块 #

Chrome扩展Manifest V3支持ES模块，只需在对应脚本的配置中添加"type": "module"：

• 针对Content Scripts：修改manifest.json中的content_scripts字段，将JS文件配置为对象形式：

"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": [
      {
        "file": "your-firebase-script.js",
        "type": "module"
      }
    ]
  }
]

• 针对Background Service Worker：在background配置中添加"type": "module"：

"background": {
  "service_worker": "background.js",
  "type": "module"
}

配置后，你的ES模块import语法就能正常执行。注意：Manifest V2不支持该配置，需用其他方案。

方案2：改用Firebase UMD全局版本 #

无需配置模块，直接通过全局firebase对象使用Firebase：

1. 在扩展的HTML文件中引入Firebase的UMD脚本（替换为你需要的版本）：

<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-database.js"></script>

2. 在JS代码中直接调用全局API：

const firebaseConfig = {
  // 你的Firebase配置
};

const app = firebase.initializeApp(firebaseConfig);
const db = firebase.database(app);

方案3：用打包工具编译代码 #

使用Webpack、Vite等打包工具，将Firebase模块和你的代码打包成Chrome可直接识别的普通JS文件：

1. 初始化打包工具项目，安装Firebase依赖：

npm install firebase

2. 编写你的业务代码（保留原import语法），配置打包工具将代码输出到扩展目录。

3. 在manifest.json中引用打包后的JS文件即可，无需额外模块配置。

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