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

Question

我正在构建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有什么问题？

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的评论建议使用数据网址,我相信也可以.