将图片嵌入Chrome扩展程序

Question

我正在构建一个Google Chrome扩展程序,它将HTML注入真实的网页.注入还包含图像,现在我想知道如何引用扩展中的图像.到目前为止,我只能使用http://example.com/myimage.png在服务器上引用它们.但这需要一段时间,直到他们加载.

是否可以在扩展程序中打包图像并在浏览器中的任何位置引用它们？怎么样？

谢谢你的帮助.

Answer 1

您可以使用chrome.runtime.getURL()(docs)获取内部扩展文件夹URL.将它传递给图像相对路径,您将获得它的完整URL.

例如,如果您在扩展文件夹中有一个名为"images"的文件夹和名为"profile.jpg"的图像,则可以通过执行以下操作将其注入页面正文:

var image = document.createElement("img");
image.src = chrome.runtime.getURL("images/profile.jpg");
document.getElementsByTagName("body")[0].appendChild(image);

另外,请查看此处记录的web_accessible_resources清单属性- 您可能需要在此方法中声明它们的资源.

Answer 2

把这个留在这里，这样人们就不必通读评论。

在 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