Chrome扩展中chrome.runtime.getURL返回链接可否用于script.src？加载失败原因？

核心原因 #

Chrome扩展默认禁止外部网页上下文加载扩展内部的任意文件，你遇到的报错几乎都是因为没有在manifest.json中把目标JS文件声明为网页可访问资源。

修复步骤 #

• 调整manifest.json配置，根据你使用的Manifest版本选择对应写法：
  • Manifest V3（当前主流版本），添加如下根节点配置：

  "web_accessible_resources": [
    {
      "resources": ["my_file_from_extension.js"],
      "matches": ["<all_urls>"]
    }
  ]
  

  若仅需在特定站点加载该脚本，可将"<all_urls>"替换为对应站点的匹配规则，例如"https://www.example.com/*"。
  • Manifest V2（旧版本），添加如下根节点配置：

  "web_accessible_resources": ["my_file_from_extension.js"]
  

• 校验文件路径
  确认my_file_from_extension.js的相对路径填写正确，若文件存放在扩展的子目录下，需要补全路径，例如存放在assets/js目录下时，chrome.runtime.getURL参数需改为"assets/js/my_file_from_extension.js"，manifest.json的resources字段也需同步修改为对应路径。
• 重载扩展生效
  修改完manifest.json后，必须进入chrome://extensions/扩展管理页面，点击对应扩展的刷新按钮，新配置才会生效。

额外排查项 #

完成上述操作后仍报错的话，可检查目标站点的内容安全策略（CSP）是否阻止加载非本站域名的脚本，这种场景可改为在内容脚本中直接执行逻辑，或通过扩展的declarativeNetRequest能力修改站点CSP响应头放行。

你原本的JS逻辑没有问题，完成上述配置后即可正常加载扩展内脚本。

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