Javascript 将图像嵌入到Chrome扩展中

我正在构建一个GoogleChrome扩展，它将HTML注入到真实的网页中。注入还包含图像，现在我想知道如何在扩展中引用图像。到目前为止，我只能使用在服务器上引用它们。但这需要一段明显的时间，直到他们加载

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

---

谢谢您的帮助。

您可以使用

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\u accessible\u resources

manifest属性-您可能需要声明您的资源，以使它们在此方法中可用。

将此保留在此处，以便人们不必阅读注释

在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

---

我早就试过了。它返回“chrome”-extension://invalid/'虽然只使用空字符串：chrome.extension.getURL（''）返回正确的扩展根路径。我不明白/@Kaspi：因为你必须向函数传递一个到扩展文件夹中的文件夹/文件的相对路径，它将形成它的完整URL。因此，不传递任何内容不是一个选项，而传递空字符串将为您提供扩展的根文件夹的URL。但根路径似乎没有改变。如果我只是在常规地址栏中键入根路径并添加图像名称，图像将正确显示。啊，等等。。。此函数返回正确的路径，但当浏览器请求图像时，它会失败。我正在传递img.src值的路径，当图像即将显示时，浏览器会失败：GET chrome-extension://invalid/@Kaspi在上查看web_accessible_resources manifest属性-您可能需要声明您的资源，以便它们在此方法中可用。