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

Question

我的 chrome 扩展程序中有一些图像，我希望用户在使用扩展程序时能够将它们注入(inject)到他们的页面中。

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

我在 list 中设置了以下权限(添加了 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

您也可以使用 CSS，确保也将此图像添加到 list 中。

"web_accessible_resources": [

CSS内部:

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