Firefox Extension Display Image In Document

Is it possible to display local image in current document without violating the security constraints. Example: image is in chrome://myExtension/content/2.png $myImg=jQuery('#myImg

Solution 1:

Your chrome package needs to be declared with the contentAccessible flag in the chrome.manifest, see documentation. By default, web pages are no longer allowed to load images from chrome://, this previously allowed web pages to detect installed extensions by loading their images.

The other possibility should be using image.src property instead of setting the attribute:

var myImg = doc.getElementById("myImg");
myImg.src = "chrome://beSure/content/2.png";

This should work because here your (privileged) script is setting image location directly. Attribute changes on the other hand are processed asynchronously, so this is done with the privileges of the web page.

Solution 2:

If you are creating a new element with jQuery be sure to use the right context as well.

var $tr = $('tr', content.document);
$tr.append($('<td>New cell</td>')); // BAD

will work but the new cell will behave strangely. For example you will get no context menu when you right-click in it.

To fix this use the document's context when creating new DOM nodes

$tr.append($('<td>New cell</td>', content.document)); // GOOD

By doing so you can use chrome://-URLs as you intended. Of course you also have to enable contentAccessible as stated in Wladimir Palant's answer.