从页面上的扩展程序加载图像 [英] Loading an image from a chrome extension on a page

问题描述

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

图像将在扩展弹出窗口中显示，但当用户单击按钮将其注入页面时，页面无法访问它们/出于某种原因查看它们。我知道在页面中注入JS和CSS的具体方式（已经这样做了），但我没有看到任何方式对图像做同样的事情。

我在清单中设置了以下权限（添加了chrome-extensions：//希望这样做）：

 permissions：[tabs，http：// * / *，https：// * / *，chrome-extension：// * / *] 
  

具体来说，我试图改变图标，有点像这样（我也试过没有领先的/，并与chrome.extension.getURL（favicons / example.png））：

  iconURL =/favicons/example.png ; 
 var link = document.createElement（link）; 
 link.type =image / x-icon; 
 link.rel =快捷图标; 
 link.href = iconURL; 
 this.removeLinkIfExists（）; 
 this.docHead.appendChild（link）; 
  

如果iconURL是完全限定的http：//地址， p>

您可以在我的 github repo here （favicon.js第54行，由tabdisplay.js第260行调用）。

  iconURL =/favicons/example.png; 
  

应该是：

  iconURL = chrome.extension.getURL（/ favicons / example.png）; 
  

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

同样从清单中删除 chrome-extension：// * / * ，因为它没有任何操作。

I've got some images in my chrome extension that I want the user to be able to inject into their page when they are using the extension.

The images will show up in the extension pop-up window, but when the user clicks the button to inject them into the page, the page can't access them/see them for some reason. I know there are specific ways of injecting JS and CSS into the page (already doing that) but I don't see any way to do the same thing with images.

I've got the following permissions set in my manifest (added the chrome-extensions:// one hoping that would do it):

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

Specifically, I'm trying to change the favicon, kind of like this (I've also tried without the leading /, and with 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);

This code works perfectly if the iconURL is a fully qualified http:// address...

You can see the actual code at my github repo here (favicon.js line 54, called by tabdisplay.js line 260).

解决方案

Instead of:

iconURL = "/favicons/example.png";

It should be:

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

which returns absolute URL to a file inside extension folder.

Also remove chrome-extension://*/* from manifest as it doesn't do anything.

这篇关于从页面上的扩展程序加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！