MV3 Chrome服务Worker中Firebase Storage XMLHttpRequest未定义报错求助

核心原因 #

这个报错是因为你当前运行环境（比如Node.js、Electron主进程等）没有浏览器原生的XMLHttpRequest对象，而Firebase Storage的uploadBytes方法在部分环境下依赖这个对象。

具体解决方案 #

方案1：Node.js环境下直接用Buffer替代Blob（推荐） #

如果是在Node.js环境运行，没必要用XHR polyfill，直接把Blob转成Node.js原生的Buffer即可，Firebase支持直接上传Buffer：

let resUrl = await fetch(request.fileDataUrl);
let blob = await resUrl.blob();
// 将Blob转换为Buffer
const arrayBuffer = await blob.arrayBuffer();
const buffer = Buffer.from(arrayBuffer);
// 注意：uploadBytes是异步函数，必须加await
let uploadRes = await uploadBytes(storageRef, buffer);

方案2：正确配置xhr-shim polyfill #

如果你的环境必须用XHR，需要把xhr-shim全局挂载，而不是仅导入。必须在导入Firebase之前执行这一步：

// 先挂载XHR到全局
import { XMLHttpRequest } from 'xhr-shim';
globalThis.XMLHttpRequest = XMLHttpRequest;

// 再导入并初始化Firebase
import { initializeApp } from "firebase/app";
import { getStorage, uploadBytes } from "firebase/storage";

const app = initializeApp(你的Firebase配置);
const storage = getStorage(app);

// 之后执行你的上传代码
let resUrl = await fetch(request.fileDataUrl);
let blob = await resUrl.blob();
let uploadRes = await uploadBytes(storageRef, blob);

额外注意点 #

• 你的原代码中uploadBytes没有加await，这会导致无法正确获取上传结果，务必补上。
• 确保你的Firebase SDK是v9模块化版本的正确用法，避免混用旧版命名空间写法。

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