开发Chrome Extension MV3时Firebase Firestore报XMLHttpRequest未定义错误

问题根源 #

Manifest V3的背景Service Worker环境移除了对XMLHttpRequest的支持，而你使用的Firebase 8.5版本的Firestore底层依赖XHR进行网络请求，这直接导致了报错。

可行解决方案 #

1. 升级到Firebase 9+版本（模块化API） #

Firebase 9及以后的版本采用模块化设计，默认使用Fetch API替代XHR，完美适配Service Worker环境。

2. 修改Firebase引入与代码逻辑 #

替换原有的Firebase脚本引入，改用模块化版本，同时调整代码适配新的API语法：

修改后的firebase-main.js示例：

// 引入Firebase模块化API
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js';
import { getFirestore, doc, setDoc } from 'https://www.gstatic.com/firebasejs/9.23.0/firebase-firestore.js';

try {
  const firebaseConfig = {
    apiKey: "MYDATAHERE",
    authDomain: "MYDATAHERE",
    projectId: "MYDATAHERE",
    storageBucket: "MYDATAHERE",
    messagingSenderId: "MYDATAHERE",
    appId: "MYDATAHERE"
  };

  console.log("firebase main inizializing");
  const app = initializeApp(firebaseConfig);
  console.log(app);
  const db = getFirestore(app);
  console.log(db);

  chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
    console.log("msg.command = " + msg.command);
    if(msg.command == "post"){
      console.log("msg = post");
      console.log("msg.data.extensionEmail is " + msg.data.extensionEmail);
      
      // 使用Firebase 9+的setDoc方法
      setDoc(doc(db, "users", msg.data.extensionEmail), {
        data: msg.data
      })
      .then(() => {
        console.log("Document successfully written!");
        sendResponse(true);
      })
      .catch((error) => {
        console.error("Error writing document: ", error);
        sendResponse(false);
      });
      
      // 返回true保持消息通道开放，等待异步操作完成
      return true;
    }
    sendResponse(false);
  })
} catch (e) {
  console.error(e);
}

3. 关键配置补充 #

确保在manifest.json中添加Firebase相关的跨域权限：

"host_permissions": [
  "https://*.firebaseio.com/*",
  "https://*.firestore.googleapis.com/*"
]

为什么之前的方法无效 #

手动引入xhr2无法解决问题，因为Firebase内部对网络请求的封装是硬编码调用XMLHttpRequest，全局替换的XHR对象不会被Firebase的内部逻辑识别，无法从根源上适配Service Worker环境。

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