从页面上的chrome扩展加载图像

Question

我在我的chrome扩展中有一些图片，我希望用户在使用这个扩展时能够插入到他们的页面中。

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

我在清单中设置了以下权限(添加了chrome-extensions://一个希望这样做的人)：

"permissions" : [ "tabs", "http://*/*", "https://*/*", "chrome-extension://*/*" ]

具体地说，我正在尝试更改favicon，就像这样(我也尝试过不使用前导/，而使用chrome.extension.getURL("favicons/example.png"))：

  iconURL = "/favicons/example.png";
  var link = document.createElement("link");
  link.type = "image/x-icon";
  link.rel = "shortcut icon";
  link.href = iconURL;
  this.removeLinkIfExists();
  this.docHead.appendChild(link);

如果iconURL是一个完全限定的http://地址...

您可以在我的github repo here (favicon.js第54行，由tabdisplay.js第260行调用)上看到实际的代码。

Answer 1

而不是：

iconURL = "/favicons/example.png";

它应该是：

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

返回扩展名文件夹内文件的绝对URL。

还要从清单中删除chrome-extension://*/*，因为它不做任何事情。

Answer 2

如果人们在Chrome17或更高版本上遇到这个问题，这是因为清单必须包括web_accessible_resources部分，以便将扩展中打包的图像注入到网页中。

Answer 3

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

"web_accessible_resources": [

CSS内部：

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