google-chrome-extension

Loading an image from a chrome extension on a page

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).

Solution

  • 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.