如何使用chrome.runtime.getURL设置backgroundImage？

问题场景 #

在Content Script中注入<a>标签并设置backgroundImage时，控制台打印的资源路径有效，但实际请求返回错误：

exampleSite:973 GET chrome-extension://invalid/ net::ERR_FAILED

相关代码：

const newButton = document.createElement('a');
newButton.href = `https://example.com`;
newButton.className = _class
const img_url = chrome.runtime.getURL("images/favicon.png")
console.log('img', img_url) // 输出有效路径
newButton.style.backgroundImage = `url("${img_url}")`; // 抛出错误

问题原因 #

Manifest V3中，扩展内部资源默认不允许网页上下文访问。Content Script注入的DOM元素属于网页上下文（而非扩展上下文），直接使用chrome.runtime.getURL()生成的资源路径会被浏览器拦截，返回chrome-extension://invalid/。

解决方案 #

方案1：通过manifest声明可访问资源 #

修改manifest.json，添加web_accessible_resources字段，明确允许目标网站访问扩展内的图片资源：

{
  "manifest_version": 3,
  "name": "Example Chrome Extension",
  "version": "0.0.1",
  "description": "Adds buttons to certain sites",
  "content_scripts": [
    {
      "matches": [
        "https://google.com/*",
        "https://yahoo.com"
      ],
      "js": ["bundle.js"]
    }
  ],
  "web_accessible_resources": [
    {
      "resources": ["images/favicon.png"],
      "matches": ["https://google.com/*", "https://yahoo.com"]
    }
  ]
}

• resources：指定允许访问的资源路径，支持通配符（如images/*）
• matches：限定可访问该资源的网站，需与content_scripts的匹配规则保持一致，避免资源滥用

修改后保持原代码不变即可，网页上下文将能正确解析资源路径并加载背景图。

方案2：将图片转为Data URL（无需修改manifest） #

若不想暴露扩展资源，可在Content Script中先读取图片为Data URL，再设置给背景图：

fetch(chrome.runtime.getURL("images/favicon.png"))
  .then(response => response.blob())
  .then(blob => {
    const reader = new FileReader();
    reader.onload = () => {
      newButton.style.backgroundImage = `url(${reader.result})`;
    };
    reader.readAsDataURL(blob);
  });

此方法适合小体积图片，无需修改manifest，但会增加少量运行时开销。

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