Loading an image from a chrome extension on a page

Question

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

Answer 1

In case people are having this problem on Chrome 17 or later, it's because the manifest must include the web_accessible_resources section to allow an image packed within the extension to be injected into a web page. web accessible resources