如何在Chrome扩展MV3的Service Worker中添加Firebase SDK 9？

核心问题分析 #

你遇到的连锁错误源于MV3 Service Worker的模块模式要求与Firebase SDK9的ES模块特性不匹配，加上导入路径错误导致的初始化失败。

分步解决 #

1. 修正导入路径（解决初始化失败错误）

你的导入路径../firebase/firebase-app.js大概率错误，导致Firebase模块未正确加载，进而initializeApp未执行，触发No Firebase App '[DEFAULT]'错误。

• 假设你的扩展文件结构如下：

  扩展根目录/
  ├─ manifest.json
  ├─ firebase.js （作为background service worker）
  └─ firebase/
     └─ firebase-app.js
  

• 将导入路径改为相对当前文件的正确路径：

  // 推荐：按需导入（符合SDK9模块化设计）
  import { initializeApp } from "./firebase/firebase-app.js";
  
  const firebaseConfig = {
    // 你的Firebase配置信息，确保无拼写错误
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    // ...其余配置项
  };
  
  // 全局作用域初始化App
  const app = initializeApp(firebaseConfig);
  

2. 彻底移除importScripts()调用（解决模块模式冲突）

因为你在manifest.json中设置了"type": "module"，MV3的Service Worker会以ES模块模式运行，绝对不能使用importScripts()，所有依赖必须通过ES模块的import语法导入。之前视频中的方法针对Firebase旧版非模块化SDK，不适用于SDK9。

3. 处理Source Map警告（可选）

DevTools failed to load source map只是警告，不影响功能：

• 若要消除警告，下载对应版本的source map文件（与firebase-app.js同版本），放到firebase文件夹下与firebase-app.js同级即可；
• 不在意警告的话直接忽略。

4. 验证Manifest配置正确性

确保你的background配置无误：

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

额外注意事项 #

MV3的Service Worker是事件驱动且会自动休眠的，初始化Firebase的代码放在全局作用域即可，每次Service Worker启动时都会重新初始化App，无需担心实例丢失。如果需要使用Firebase的其他服务（如Auth、Firestore），同样需要通过import导入对应的模块文件，并确保路径正确。

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