如何在Manifest V3扩展ServiceWorker中使用URL.createObjectURL

MV3 的 Service Worker（以下简称SW）是无DOM的独立运行上下文，和旧版页面环境有两个核心差异需要注意：

• 没有DOM全局API，不存在Image构造函数，无法直接创建图片DOM实例
• URL.createObjectURL生成的Blob地址和当前执行上下文生命周期绑定，上下文被回收/休眠后地址会直接失效，容易触发下载失败、资源加载失败问题

以下是两个场景的正确实现方式： #

1. Zip压缩包下载功能 #

不要在调用chrome.downloads.download后立刻释放Object URL，需要等待下载任务完成/中断后再回收资源，避免SW在下载触发后进入休眠导致Blob URL失效。
对应实现代码：

const url = URL.createObjectURL(archiveBlob);
try {
  const downloadId = await chrome.downloads.download({
    url,
    filename: `${archiveData.fileName}.zip`,
    saveAs: false
  });
  // 监听下载状态，任务结束后释放URL
  const onDownloadChange = (delta) => {
    if (delta.id !== downloadId) return;
    if (delta.state?.current === 'complete' || delta.state?.current === 'interrupted') {
      URL.revokeObjectURL(url);
      chrome.downloads.onChanged.removeListener(onDownloadChange);
    }
  };
  chrome.downloads.onChanged.addListener(onDownloadChange);
} catch (err) {
  // 触发下载失败时也要及时释放资源
  URL.revokeObjectURL(url);
  throw err;
}

如果是超过500MB的大体积压缩包，建议把Blob创建、URL生成逻辑放到后续提到的离屏文档中执行，离屏文档生命周期更稳定，不会因为SW休眠导致URL失效。 #

2. ArrayBuffer 转图片处理功能 #

SW环境没有DOM能力，无法直接创建Image实例，需要通过Chrome提供的离屏文档（Offscreen Document）API实现，离屏文档是运行在后台的隐藏页面，拥有完整DOM能力，不会对用户可见。

第一步：配置manifest权限 #

在manifest.json中添加离屏文档所需权限：

{
  "manifest_version": 3,
  "permissions": ["downloads", "offscreen"],
  // 其余配置项保持不变
}

第二步：创建离屏文档 #

在扩展根目录创建offscreen.html作为离屏文档入口：

<!DOCTYPE html>
<script src="offscreen.js"></script>

同目录下创建offscreen.js，写入图片解析逻辑：

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.type === 'PARSE_IMAGE_BUFFER') {
    const { buffer, mimeType = 'image/png' } = msg;
    const blob = new Blob([buffer], { type: mimeType });
    const objectURL = URL.createObjectURL(blob);
    const img = new Image();

    img.onload = () => {
      // *注意：DOM对象无法跨上下文序列化传回SW，只回传可序列化的必要数据*
      // 如需做缩放、裁剪、格式转换，可在这里创建Canvas完成处理后再回传结果
      const result = {
        width: img.width,
        height: img.height,
        data: buffer // 如果需要处理后的图片数据，替换为Canvas导出的ArrayBuffer即可
      };
      URL.revokeObjectURL(objectURL);
      sendResponse({ success: true, data: result });
    };

    img.onerror = (e) => {
      URL.revokeObjectURL(objectURL);
      sendResponse({ success: false, error: '图片解析失败' });
    };

    img.src = objectURL;
    return true; // 标记为异步响应
  }
});

第三步：在SW中封装调用方法 #

替换你原来的bufferToImage方法，通过消息通信调用离屏文档的解析能力：

let offscreenCreating = null;
// 确保离屏文档存在，避免重复创建
async function ensureOffscreen() {
  const exists = await chrome.runtime.getContexts({
    contextTypes: ['OFFSCREEN_DOCUMENT'],
    documentUrls: [chrome.runtime.getURL('offscreen.html')]
  });
  if (exists.length) return;
  if (offscreenCreating) return offscreenCreating;
  offscreenCreating = chrome.offscreen.createDocument({
    url: 'offscreen.html',
    reasons: ['DOM_PARSER'],
    justification: '解析图片二进制数据用于压缩包打包'
  });
  await offscreenCreating;
  offscreenCreating = null;
}

async function parseImageBuffer(buffer, mimeType = 'image/png') {
  await ensureOffscreen();
  const res = await chrome.runtime.sendMessage({
    type: 'PARSE_IMAGE_BUFFER',
    buffer,
    mimeType
  });
  if (!res.success) throw new Error(res.error);
  return res.data;
}

说明：离屏文档创建后会在后台长期存活，不需要频繁创建销毁，性能开销极低。所有图片相关的DOM操作都建议放在离屏文档中完成，处理完成后只把最终需要打包的二进制数据、元信息传回SW即可，不需要把Image实例传到SW环境。

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