Chrome扩展本地GIF注入页面不显示，直接访问URL正常求助

嘿，这个问题我之前也碰到过！直接访问GIF的扩展URL没问题，但内容脚本注入就显示找不到，核心原因是Chrome的扩展资源访问权限配置没到位。

Chrome为了安全，规定网页上下文（包括内容脚本注入到页面里的元素）要访问扩展内的资源，必须在manifest.json里明确声明允许这些资源被外部访问。你的PNG能显示可能是之前配置过或者巧合，但GIF肯定是漏在这个配置之外了。

具体修复步骤： #

1. 打开你的扩展根目录下的manifest.json文件
2. 找到（如果没有就新增）web_accessible_resources字段，根据你的Manifest版本配置：

如果是Manifest V2：

"web_accessible_resources": [
  "images/icon.png",
  "images/loading.gif"
]

如果是Manifest V3（现在推荐的版本）：

需要更明确地指定资源和允许访问的网站（<all_urls>表示所有网站，也可以换成你需要注入的特定域名）：

"web_accessible_resources": [
  {
    "resources": ["images/icon.png", "images/loading.gif"],
    "matches": ["<all_urls>"]
  }
]

3. 保存manifest.json后，到Chrome的扩展管理页面（chrome://extensions/），找到你的扩展，点击「重新加载」按钮刷新配置
4. 再测试你的注入代码，GIF应该就能正常显示了！

为什么直接访问URL可以？ #

因为直接在地址栏输入扩展资源的URL时，是处于扩展自身的上下文，不受web_accessible_resources的限制；但内容脚本把图片注入到网页后，图片的加载是在网页的上下文里，必须经过扩展的权限声明才能被访问。

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