能否向blob:chrome-extension://类URL注入Chrome扩展content_scripts？

结论 #

默认情况下无法自动向blob:chrome-extension://这类URL注入content script。

原因分析 #

Chrome的content script匹配规则对Blob URL做了特殊处理：即使在manifest.json中配置"<all_urls>"作为匹配规则，扩展也不会自动将content script注入到由自身生成的blob:chrome-extension://协议下的页面中。这类Blob资源属于扩展的隔离上下文，不触发常规的content script匹配逻辑。

可行解决方案 #

方案1：通过chrome.scripting.executeScript主动注入 #

在Blob页面加载完成后，调用Chrome的脚本API主动注入目标脚本。需要在manifest.json中声明scripting权限以及对应的主机权限：

配置manifest.json

{
  "permissions": ["scripting", "tabs"],
  "host_permissions": ["<all_urls>"]
}

注入代码示例

// 假设已获取目标标签页的tab.id
await chrome.tabs.update(tab.id, { url: URL.createObjectURL(blob) });
// 等待页面加载后执行注入
setTimeout(async () => {
  await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    files: ["test.js"]
  });
}, 1000);

方案2：在Blob内容中内嵌引用脚本 #

如果Blob的HTML内容由扩展完全控制，可以直接在HTML字符串中引用扩展内的脚本文件，同时配置web_accessible_resources允许该脚本被Blob页面访问：

修改Blob创建代码

const blobHtml = `<html>
  <script src="${chrome.runtime.getURL('test.js')}"></script>
</html>`;
const blob = new Blob([blobHtml], { type: "text/html" });
await chrome.tabs.update(tab.id, { url: URL.createObjectURL(blob) });

配置manifest.json

"web_accessible_resources": [{
  "resources": ["test.js"],
  "matches": ["blob:chrome-extension://*"]
}]

内容的提问来源于stack exchange，提问作者陳奕辰