13

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

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

谢谢你的帮助。

4

2 回答 2

16

您可以使用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的清单属性- 您可能需要声明您的资源以使它们在此方法中可用。

于 2012-06-02T22:43:00.077 回答
8

将其留在这里，以便人们不必阅读评论。

在 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
于 2018-09-02T02:50:27.133 回答