Chrome扩展中Service Worker向Firebase传输大文件失败求助

问题现象 #

• 上传KB级小型MP3文件至Firebase Storage可成功
• 上传4MB MP3文件时触发未知错误
• 同一文件从popup.ts上传可成功，尝试过base64、ArrayBuffer、UInt8Array三种格式均无效

报错信息 #

Error uploading file: FirebaseError: Firebase Storage: An unknown error occurred, please check the error payload for server response. (storage/unknown)
(anonymous) @ message-handler.ts:223
Promise.then
then @ index.cjs.js:2645
catch @ index.cjs.js:2651
background.js:1 Uncaught (in promise) FirebaseError: Firebase Storage: An unknown error occurred, please check the error payload for server response. (storage/unknown)

代码对比：popup.ts可正常运行，background.ts无效 #

以下代码在popup.ts中能成功上传：

const uploadTask = FirebaseStorageManager.getInstance().uploadFile(
  arrayBuffer,
  `files/${"test"}`,
  {
    contentType: file.type,
  },
)

最初的消息传递方式 #

popup.ts发送ArrayBuffer：

chrome.runtime.sendMessage({
  type: "UPLOAD_MEDIA_FILE",
  payload: {
    fileName: file.name,
    arrayBuffer: arrayBuffer,
    contentType: file.type,
  },
})

background.ts接收：

case "UPLOAD_MEDIA_FILE":
  const receivedBuffer: ArrayBuffer = message.payload.arrayBuffer;

更新尝试：改用navigator.serviceWorker仍报错 #

popup.ts代码 #

const reader = new FileReader()
reader.onload = () => {
  // Send the file data to the Service Worker
  navigator?.serviceWorker?.controller?.postMessage({
    fileName: file.name,
    type: "FILE_DATA",
    payload: {
      fileName: file.name,
      contentType: file.type,
      fileData: reader.result,
    },
  })
}
reader.readAsArrayBuffer(file)

background.ts（Service Worker）代码 #

self.addEventListener("message", async (event) => {
  if (event.data && event.data.type === "FILE_DATA") {
    const { type, payload } = event.data
    const port = event.ports[0] // Get the MessagePort for responding

    if (type === "FILE_DATA") {
      try {
        const app = initializeApp(firebaseConfig)
        const storage = getStorage(app)
        const { fileName, contentType, fileData } = payload
        console.log("Received file data:", fileName, contentType, fileData)
        console.log(fileData.byteLength)

        // Create blob from ArrayBuffer
        const blob = new Blob([fileData], { type: contentType })

        // Create storage reference
        const storageRef = ref(storage, `files/${fileName}`)

        // Upload to Firebase
        const uploadTask = uploadBytesResumable(storageRef, blob, {
          contentType: contentType,
        })
        uploadTask.on(
          "state_changed",
          (snapshot) => {
            // Handle progress
            const progress =
              (snapshot.bytesTransferred / snapshot.totalBytes) * 100
            console.log("Upload is " + progress + "% done")

            port.postMessage({
              progress: progress,
            })
          },
          (error) => {
            // Handle error
            console.error("Error uploading file:", error)
            port.postMessage({
              success: false,
              error:
                error instanceof Error ? error.message : "Unknown error",
            })
          },
          async () => {
            // Handle successful upload
            console.log("File uploaded successfully")

            // Get download URL and send success response
            const downloadURL = getDownloadURL(uploadTask.snapshot.ref)
          },
        )
      } catch (error) {
        // Send error response
        port.postMessage({
          success: false,
          error: error instanceof Error ? error.message : "Unknown error",
        })
      }
    }
  }
})

恳请协助排查问题，如需更多代码可提供。

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