Chrome扩展无法加载图片：Manifest配置排查及问题咨询

云原生阿岚

2026-8-14

问题分析与解决方案

Manifest配置的核心问题

在Chrome扩展Manifest V3中，web_accessible_resources是根级别配置项，不能嵌套在content_scripts内部。你当前的配置把它放在了content scripts的子属性里，导致浏览器无法识别这个资源声明，自然无法加载图片。

修正后的Manifest配置示例

{
  "name": "CVAT FlowChart",
  "version": "0.01",
  "description": "Easier access to flow charts for QA",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "css": ["./style.css"],
      "js": ["jquery.js", "contentScript.js", "string.js"]
    }
  ],
  "web_accessible_resources": [{
    "resources": ["Images/singleimage.png"],
    "matches": ["<all_urls>"]
  }],
  "background": {
    "service_worker": "background.js"
  },
  "host_permissions": ["<all_urls>", "http://localhost/*"],
  "manifest_version": 3
}

其他可能的问题来源

路径大小写不匹配：Chrome扩展对文件路径大小写敏感，检查实际文件夹名是Images还是images，文件名singleimage.png的拼写和大小写是否和配置、代码中的一致。
资源文件位置错误：确认Images/singleimage.png确实存在于扩展根目录下，没有放错文件夹层级（比如是否嵌套在其他子文件夹里）。
内容脚本中URL获取方式错误：在content script中不能直接使用相对路径引用扩展资源，必须通过chrome.runtime.getURL('Images/singleimage.png')生成正确的资源URL，否则会以当前页面的URL为基准去查找，导致路径错误。
浏览器缓存干扰：尝试在扩展管理页面（chrome://extensions/）重新加载扩展，或者开启"开发者模式"下的"更新时重新加载"选项，清除旧的缓存资源。
资源权限未正确覆盖：虽然配置了matches: ["<all_urls>"]，但如果当前页面是特殊协议（比如chrome://），需要确认是否在matches中包含对应规则，不过这种场景较少见。