Chrome扩展：如何遍历web可访问目录中的未知文件名资源？

你遇到的核心问题是chrome.runtime.getPackageDirectoryEntry仅支持扩展的特权上下文（后台、Popup等），无法在Content Script中直接读取扩展包内的目录结构。以下是几个实用的解决思路：

方案1：通过后台脚本中转目录信息 #

利用后台脚本可调用特权API的特性，让Content Script向后台发送请求，由后台读取Assets目录后返回文件列表：

步骤1：后台脚本（background.js）添加监听 #

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.action === 'getAssetsFiles') {
    chrome.runtime.getPackageDirectoryEntry(dir => {
      dir.createReader().readEntries(fr => {
        const assetsDir = fr.find(e => e.name === 'assets' && e.isDirectory);
        assetsDir.createReader().readEntries(files => {
          const fileUrls = files.map(file => chrome.runtime.getURL(`assets/${file.name}`));
          sendResponse(fileUrls);
        });
      });
    });
    return true; // 标记为异步响应
  }
});

步骤2：Content Script中请求并接收结果 #

chrome.runtime.sendMessage({ action: 'getAssetsFiles' }, fileUrls => {
  // 拿到所有assets文件的可访问URL，按需使用即可
  console.log(fileUrls);
});

注意事项 #

• 确保后台脚本已在manifest.json中注册：

  "background": {
    "service_worker": "background.js"
  }
  

• 该方案完全符合Chrome扩展权限模型，无跨上下文权限问题。

方案2：改用文件上传替代手动放入assets #

让用户通过扩展的Popup/选项页上传资源，存储到chrome.storage.local或IndexedDB中，Content Script直接从存储读取，比手动修改扩展文件夹更友好：

Popup端文件上传示例 #

<!-- popup.html -->
<input type="file" id="assetUpload" multiple>
<script src="popup.js"></script>

// popup.js
document.getElementById('assetUpload').addEventListener('change', async (e) => {
  const files = Array.from(e.target.files);
  const assetData = await Promise.all(files.map(file => {
    return new Promise(resolve => {
      const reader = new FileReader();
      reader.onload = () => resolve({
        name: file.name,
        data: reader.result, // base64格式资源
        type: file.type
      });
      reader.readAsDataURL(file);
    });
  }));
  await chrome.storage.local.set({ userAssets: assetData });
});

Content Script读取资源示例 #

chrome.storage.local.get('userAssets', data => {
  const userAssets = data.userAssets || [];
  userAssets.forEach(asset => {
    // 以图片为例，创建并插入页面
    if (asset.type.startsWith('image/')) {
      const img = document.createElement('img');
      img.src = asset.data;
      document.body.appendChild(img);
    }
  });
});

此方案还能避免扩展更新后用户添加的文件丢失问题。

方案3：优化资源清单方式（折中） #

如果用户仅需添加特定类型文件，可以在选项页做批量文件选择，自动生成文件名清单存储，Content Script读取清单后通过chrome.runtime.getURL访问，比手动写txt更直观。

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