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

【问题标题】：Loading an image from a chrome extension on a page从页面上的 chrome 扩展加载图像
【发布时间】：2020-01-13 07:38:51
【问题描述】：

我的 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 行调用）。

【问题讨论】：

默认情况下应该允许从扩展访问文件。您是如何尝试加载它们的，您会收到哪些类型的错误消息（如果有）？
没有错误，只是没有任何反应。它就在那里。

标签： google-chrome-extension

【解决方案1】：

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

【讨论】：

是的！这就是我遇到的问题，非常感谢！ :D

【解决方案2】：

代替：

iconURL = "/favicons/example.png";

应该是：

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

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

还要从清单中删除 chrome-extension://*/*，因为它没有任何作用。

【讨论】：

@cmcculloh 嗯，你说得对，它不起作用，但它应该起作用。如果您尝试将图标作为<img> 标记注入页面，它可以工作，而在<link> 标记内则不能。这看起来像一个 chrome 错误。
我删除了第一个 / 并且它工作正常。不要忘记将其添加到清单中您授权的网络资源中。

【解决方案3】：

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

"web_accessible_resources": [

内部 CSS：

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

【讨论】：

什么是味精？
@maxgalbu 我忘记了为什么要添加它。但我想获得 chrome 扩展 url。或者你甚至可以试试chrome.extension.getURL
试过了，效果很好，我以为是某种常量需要替换

【解决方案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);

但是，我能想到的唯一方法是使用画布元素。

【讨论】：

【解决方案5】：

STEEL 的答案是好的，但有限，如果你想在文档中引入图片，而不是作为 div 的背景，你可以这样做。

&lt;img id="divId" src="chrome-extension://__MSG_@@some_Chrome_Extension_Id/path/image.png"&gt;

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

"web_accessible_resources": ["image.png","anotherImage.png"]

【讨论】：

__MSG_@@ 可以省略。