添加到DOM时，为什么Chrome扩展程序图像显示为已损坏？

Question

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

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

网址在检查器中显示为

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

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

然而，当我将此URL粘贴到浏览器URL栏并加载它时，它显示正常。把它加载到DOM有什么问题？

Answer 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的评论建议使用数据网址，我认为也有效。