Chrome扩展web_accessible_resources文件无法创建Worker问题求助

这不是Chrome的bug，是浏览器针对Worker加载扩展资源的安全限制导致的，你的manifest.json配置本身没问题，但Worker的加载规则和fetch存在差异。

原因说明 #

web_accessible_resources仅允许网页上下文（包括注入的脚本）通过fetch、<script>标签等方式获取扩展资源，但Worker构造函数遵循更严格的同源策略：网页的源（如https://www.example.com）与扩展的源（chrome-extension://xxx）不属于同源，即使资源可被访问，浏览器也不允许跨源直接加载Worker脚本——这是为了防止恶意网页滥用扩展资源作为Worker执行。

可行解决方案 #

方案1：通过Blob URL加载Worker

先通过fetch获取Worker脚本内容，将其转为Blob URL后再创建Worker，Blob URL的源与当前上下文一致，可绕过跨源限制：

(async () => {
  try {
    // 获取Worker脚本内容
    const res = await fetch(chrome.runtime.getURL('/worker.js'));
    const blob = await res.blob();
    // 生成Blob URL
    const workerUrl = URL.createObjectURL(blob);
    // 创建Worker
    const worker = new Worker(workerUrl);

    // 示例：与Worker通信
    worker.postMessage('Hello from inject script');
    worker.onmessage = (e) => {
      console.log('Worker message:', e.data);
    };

    // Worker终止时释放Blob URL
    worker.addEventListener('terminate', () => {
      URL.revokeObjectURL(workerUrl);
    });
  } catch (e) {
    console.error('Failed to create worker:', e);
  }
})();

方案2：内联Worker代码到注入脚本

如果Worker代码量不大，可直接将代码内联到注入脚本中，再通过Blob URL创建Worker：

// 直接写入worker.js的代码
const workerCode = `
self.onmessage = (e) => {
  console.log('Worker received:', e.data);
  self.postMessage('Worker processed your message');
};
`;

// 创建Blob URL并初始化Worker
const blob = new Blob([workerCode], { type: 'application/javascript' });
const workerUrl = URL.createObjectURL(blob);
const worker = new Worker(workerUrl);

// 通信示例
worker.postMessage('Test inline worker');
worker.onmessage = (e) => {
  console.log(e.data);
};

// 释放资源
worker.addEventListener('terminate', () => URL.revokeObjectURL(workerUrl));

方案3：后台脚本创建Worker（适合复杂场景）

如果Worker不需要直接与网页DOM交互，可在扩展后台脚本中创建Worker，通过消息传递与注入脚本通信：

1. 在background.js中创建Worker并监听消息：

let worker;

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (!worker) {
    worker = new Worker(chrome.runtime.getURL('/worker.js'));
    worker.onmessage = (e) => {
      // 将Worker的响应发送给注入脚本
      chrome.tabs.sendMessage(sender.tab.id, e.data);
    };
  }
  // 转发消息给Worker
  worker.postMessage(msg);
});

2. 在注入脚本中与后台通信：

// 发送消息给后台，由后台转发给Worker
chrome.runtime.sendMessage('Task for worker');

// 监听Worker的响应
chrome.runtime.onMessage.addListener((msg) => {
  console.log('Worker response from background:', msg);
});

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