Chrome Manifest V3扩展如何访问HTML5 Filesystem API存储的本地文件？

云上老周

2026-6-21

问题分析与解决方案

核心问题：`web_accessible_resources`不生效的原因

你配置的web_accessible_resources是针对扩展包内的静态资源的，而HTML5 Filesystem生成的filesystem:chrome-extension://{id}/persistent/xxx属于动态创建的存储文件，不在扩展包目录里，所以这个配置完全起不到作用。

可行解决方案（无需转Base64）

1. 通过Offscreen Page做文件代理

Offscreen Page能直接访问Filesystem API，可以让它作为中间层把文件转成Blob URL给主页面：

主页面（比如popup/options）向Offscreen Page发送消息，携带需要加载的文件名
Offscreen Page中用Filesystem API读取对应文件，转成Blob对象，再用URL.createObjectURL(blob)生成临时的Blob URL
将Blob URL回传给主页面，把这个URL赋值给<img>的src属性

示例代码片段：

主页面发送请求：

chrome.runtime.sendMessage({type: 'get-image-url', filename: 'test.png'});

Offscreen Page接收并处理：

chrome.runtime.onMessage.addListener(async (msg, sender, sendResponse) => {
  if (msg.type === 'get-image-url') {
    const fileEntry = await getFileFromFilesystem(msg.filename); // 你的旧库读取文件逻辑
    const file = await fileEntry.file();
    const blobUrl = URL.createObjectURL(file);
    sendResponse({url: blobUrl});
  }
});

主页面接收并设置：

chrome.runtime.onMessage.addListener((response) => {
  if (response.url) {
    document.querySelector('img').src = response.url;
  }
});

2. 确认必要权限配置

确保manifest.json里已经添加了以下配置：

unlimitedStorage权限：用于持久化存储大文件
Offscreen Page的正确声明：

{
  "permissions": ["offscreen", "unlimitedStorage"],
  "offscreen": {
    "default_path": "offscreen.html",
    "matches": ["chrome-extension://<你的扩展ID>/*"]
  }
}