Firefox扩展内容脚本中JSZip生成图片Zip文件失败问题排查

问题背景 #

开发适配Chrome与Firefox的浏览器扩展时，内容脚本里使用JSZip生成包含WebP/PNG图片的Zip文件功能在Chrome正常，但Firefox中报错：

Error: Can't read the data of 'image_0_d4d66a60a6563b7ffcec5ed6053bdecfd219ec1c2837ec0d0e932aed49aec696.webp'. Is it in a supported JavaScript type (String, Blob, ArrayBuffer, etc) ?

尝试直接传入Blob、Blob Promise、ArrayBuffer Promise及FileReader转换均无效，以下是可行解决方案：

1. 跳过Blob转换，直接获取ArrayBuffer #

Firefox内容脚本对Blob的处理存在环境兼容性差异，直接从fetch响应获取ArrayBuffer可规避该问题：

// 替换原blob转换逻辑
const data = await fetch(url);
if (!data.ok) throw new Error(`Failed to fetch ${url}: ${data.statusText}`);

// 直接从响应获取ArrayBuffer，跳过Blob转换
const arrayBuffer = await data.arrayBuffer();
zip.file(`image_${j}_${selfie.id}.${type}`, arrayBuffer);

2. 用Uint8Array包装ArrayBuffer传入JSZip #

JSZip对Uint8Array的支持更稳定，在Firefox沙箱环境下可解决类型识别问题：

const arrayBuffer = await data.arrayBuffer();
// 用Uint8Array包装后传入
zip.file(`image_${j}_${selfie.id}.${type}`, new Uint8Array(arrayBuffer));

3. 升级JSZip到最新版本 #

旧版JSZip在Firefox内容脚本环境中存在API兼容性问题，升级到最新版可修复这类环境适配bug：

npm install jszip@latest

4. 生成Zip时指定无压缩模式 #

若问题源于压缩算法的环境兼容差异，可尝试禁用压缩（使用STORE模式）：

const zipFile = await zip.generateAsync({ 
  type: "blob",
  compression: "STORE" // 不压缩，避免Firefox的压缩算法兼容问题
});

问题根源说明 #

Firefox内容脚本的沙箱环境与普通网页存在差异，对Blob、ArrayBuffer的处理细节和Chrome不同，JSZip在不同环境下对数据类型的识别逻辑存在细微差别，以上方案从数据获取方式、数据类型包装、依赖版本、压缩模式四个维度针对性解决兼容性问题。

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