我正在构建一个Google Chrome扩展程序,该扩展程序将HTML注入到真实的网页中。注入内容也包含图像,我想知道如何在扩展程序中引用这些图像。到目前为止,我只能通过http://example.com/myimage.png来引用服务器上的图像,但这需要一段时间才能加载。
是否有可能将图像打包到扩展程序中,并从浏览器的任何地方引用它们? 怎么做?
谢谢您的帮助。
是否有可能将图像打包到扩展程序中,并从浏览器的任何地方引用它们? 怎么做?
谢谢您的帮助。
chrome.runtime.getURL()
(文档)来获取内部扩展文件夹的URL。将其传递到图像相对路径,就可以得到完整的URL。var image = document.createElement("img");
image.src = chrome.runtime.getURL("images/profile.jpg");
document.getElementsByTagName("body")[0].appendChild(image);
此外,查看 web_accessible_resources
清单属性 在这里记录 - 你可能需要声明你的资源以便它们在此方法中可用。
将此留在此处,以便人们无需阅读评论。
在 manifest.json 中包含此内容:
"web_accessible_resources": ["RELATIVE_PATH_TO_RESOURCE.EXTENTION"] // can be more than one
例子
{
...
"web_accessible_resources": [
"images/*.png",
"style/double-rainbow.css",
"script/double-rainbow.js",
"script/main.js",
"templates/*"
],
...
}
然后,如果您想在网页上使用此图像或文件,则使用
chrome.extension.getURL("images/new-HDSB-logo.png"); // absolute path