我正在构建一个 Chrome 扩展,并尝试通过内容脚本将带有背景图像的 div 添加到 DOM。 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 扩展文档中找到了答案。默认情况下,扩展根目录中的文件在网页 DOM 中不可访问。开发人员可以使用 manifest.json 文件中的“web_accessible_resources”设置覆盖此设置:
http://code.google.com/chrome/extensions/manifest.html#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 的评论,我相信这也有效。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)