将图片嵌入到Chrome扩展程序中

Question

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

是否有可能将图像打包到扩展程序中，并从浏览器的任何地方引用它们？ 怎么做？

谢谢您的帮助。

- Kaspi

Answer 1

你可以使用chrome.runtime.getURL() (文档)来获取内部扩展文件夹的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 清单属性 在这里记录 - 你可能需要声明你的资源以便它们在此方法中可用。

- Dvir

---

我早些时候尝试过这个。 它返回“chrome-extension：// invalid /”，尽管仅使用空字符串：chrome.extension.getURL('')返回正确的扩展根路径。 我不理解它。 :/ - Kaspi

@Kaspi：因为你必须向函数传递一个相对路径，指向扩展文件夹中的文件/文件夹，它将为其形成完整的URL。因此，不传递任何内容不是一个选项，而传递空字符串将为您提供扩展根文件夹的URL。 - Dvir

啊等等……这个函数返回了正确的路径，但是当浏览器请求图像时失败了。我将路径传递给img.src值，当图像即将显示时，浏览器出现错误：GET chrome-extension://invalid/ - Kaspi

@Kaspi，你可以在http://code.google.com/chrome/extensions/manifest.html#web_accessible_resources 查看web_accessible_resources清单属性 - 你可能需要声明你的资源以便它们在此方法中可用。 - Dvir

你赢得了黄金曲奇。 ;) - Kaspi

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

- Elijah