为什么 Chrome 扩展图像添加到 DOM 时显示为损坏？答案

【问题标题】：Why do Chrome Extension Images Show Up As Broken When Added to the DOM?为什么 Chrome 扩展图像添加到 DOM 时显示为损坏？
【发布时间】：2012-04-21 21:38:41
【问题描述】：

我正在构建一个 Chrome 扩展程序，并试图通过内容脚本向 DOM 添加一个带有背景图像的 div。 CSS 正确加载，并且通过开发者工具检查器查看图像 URL 似乎是正确的。

$('.close-button').css('background', 'url('+chrome.extension.getURL('img/btn_close.png')+')');

URL 在检查器中显示为

chrome-extension://fdghianmcdbcgihapgdbjkdoaaocmoco/img/btn_close.png

但图像不会在后台加载。如果我做同样的事情，但将图像加载为 img 标签的 src，则图像在浏览器中明显显示为损坏。

但是，当我将此 URL 粘贴到浏览器 URL 栏中并加载它时，它显示得很好。将它加载到 DOM 有什么问题？

【问题讨论】：

我对chrome扩展开发一无所知。但是，如果情况变得更糟，您可以尝试将图像转换为数据 url。

标签： javascript jquery html css google-chrome-extension

【解决方案1】：

我在 chrome 扩展文档中找到了答案。默认情况下，扩展根目录中的文件在网页 DOM 中是不可访问的。开发人员可以使用 manifest.json 文件中的“web_accessible_resources”设置覆盖它：

http://code.google.com/chrome/extensions/manifest.html#web_accessible_resources

{
  ...
  "web_accessible_resources": [
    "images/my-awesome-image1.png",
    "images/my-amazing-icon1.png",
    "style/double-rainbow.css",
    "script/double-rainbow.js"
  ],
  ...
}

对 Matt Greer 建议使用数据 url 的评论也特别大声疾呼，我相信这也有效。

【讨论】：

注意：在清单版本 1 中默认禁用此功能（当指定或缺少 "manifest_version": 2 时）。设置属性时自动启用。