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：// address ...

，则此代码可以正常工作

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

Answer 1

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

Answer 2

而不是：

iconURL = "/favicons/example.png";

应该是：

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

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

同样从清单中删除chrome-extension://*/*，因为它没有做任何事情。

Answer 3

您也可以在CSS中使用，请务必将此图像添加到清单中。

"web_accessible_resources": [

CSS内部的

：

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

Answer 4

由于您尝试将扩展中的图像添加到网页中，因此有一些安全措施不允许直接使用chrome://网址加载图片等内容。

我能想到的解决方案是将图像编码为数据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元素。

Answer 5

STEEL的答案还可以，但有一定限制，如果要在文档中引入图像而不是作为div的背景，则可以执行以下操作。

<img id="divId" src="chrome-extension://__MSG_@@some_Chrome_Extension_Id/path/image.png">

您确实需要包含在清单文件中。

“ web_accessible_resources”：[“ image.png”，“ anotherImage.png”]

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

5 个答案: