Question

I’m working on a firefox extension and I am trying to make it add an image stored with the extension (the kind that you access using chrome://, although I’m not sure if there is an official name)

body.innerHTML+="<div style=\"position:fixed;top:0em;left:0em;background-color:white;\"><img src=\"chrome://tumblrscrollr/content/save.png\" /></div>";

This should put save.png at the top left of the page, however nothing appears there (not even the white background). If I replace chrome://tumblrscrollr/content/save.png with a url on the internet, the image displays properly. If I visit chrome://tumblrscrollr/content/save.png directly in the address bar, it displays fine. I assume there’s some security thing or something going on that doesn’t allow an img tag in a page to access an extension’s files, but since google doesn’t support symbols and any search for ‘chrome’ just returns the browser, I am finding it very hard to find any answer.

Answer 1

You need to use the contentaccessible flag for the tumblrscrollr chrome package, this will allow web pages to use its images. Meaning that your chrome.manifest file should have a line like this:

content tumblrscrollr foo/bar contentaccessible=yes

Note that this flag always has to be specified on the content entry but it affects any address starting with chrome://tumblrscrollr/ meaning also chrome://tumblrscrollr/skin/ for example.

Btw, you shouldn’t add elements like that – this makes the browser to parse the entire document body again which is slow and might cause all kinds of side-effects. If you need to add a single element then just create that element and add it, e.g.:

var element = body.ownerDocument.createElement("div");
element.setAttribute("style", "position:fixed;top:0em;left:0em;background-color:white;");
element.innerHTML = "<img src=\"chrome://tumblrscrollr/content/save.png\" />";
body.appendChild(element);