Google chrome extension 从页面上的chrome扩展插件加载图像

我的chrome扩展中有一些图像，我希望用户在使用扩展时能够将这些图像注入到他们的页面中

图像将显示在扩展弹出窗口中，但当用户单击按钮将其插入页面时，页面由于某种原因无法访问/查看它们。我知道有一些特定的方法可以将JS和CSS注入到页面中（已经这样做了），但是我看不到任何方法可以对图像进行同样的操作

我在清单中设置了以下权限（添加了chrome扩展名：//one，希望这样做）：

具体来说，我正在尝试更改favicon，有点像这样（我也尝试过不使用前导/，使用chrome.extension.getURL（“favicons/example.png”）：

如果iconURL是一个完全限定的http://地址，则此代码可以完美地工作

您可以在my（favicon.js第54行，由tabdisplay.js第260行调用）中看到实际代码。

而不是：

iconURL = "/favicons/example.png";

应该是：

iconURL = chrome.extension.getURL("/favicons/example.png");

它将绝对URL返回到扩展文件夹中的文件

---

同时从清单中删除

chrome扩展名：//*/*

，因为它什么也不做。

由于您试图将扩展名中的图像添加到网页中，因此存在一些安全措施，不允许直接使用

chrome://

url加载图像之类的内容

我能想到的一个解决方案是将图像编码成一个数据uri，并将其作为文本发送，然后将其用作img的src

  iconURL = "/favicons/example.png";
  var link = document.createElement("link");
  link.type = "image/x-icon";
  link.rel = "shortcut icon";
  //convert iconURL into data uri (data:image/png;base64,...)
  link.href = iconURL;
  this.removeLinkIfExists();
  this.docHead.appendChild(link);

---

但是，我能想到的唯一转换方法是使用canvas元素。

如果人们在Chrome 17或更高版本上遇到这个问题，那是因为清单必须包含web可访问资源部分，以允许将扩展中打包的图像注入到网页中。

---

您也可以从CSS使用，请确保也将此图像添加到清单中

"web_accessible_resources": [

CSS内部：

background-image: url("chrome-extension://__MSG_@@extension_id__/image.png");

答案是肯定的，但有局限性，如果您想在文档中引入一个图像，而不是作为div的背景，您可以按照以下操作

---

默认情况下，应从扩展名访问文件。您是如何尝试加载它们的，以及您收到了什么类型的错误消息（如果有的话）？没有错误，只是什么都没有发生。它就在那里。@cmccellohm，你是对的，它不起作用，但应该起作用。如果您尝试将图标作为

标记插入页面，它会工作，而在

标记内则不会。这看起来像是一个chrome bug。我删除了第一个/并且工作正常。别忘了将其添加到清单中的授权web资源中。是的！这就是我遇到的问题，非常感谢dMSG是什么？@maxgalbu我已经忘了它为什么要添加。但我认为要获得chrome扩展url。或者你甚至可以尝试

chrome.extension.getURL

尝试它，它可以工作，我想它是某种需要替换的常量\uuuu MSG\uu@可以省略。

"web_accessible_resources": [

background-image: url("chrome-extension://__MSG_@@extension_id__/image.png");