Using jQuery in a firefox extension

Question

I'm trying to develop a firefox extension which draws a toolbar at the base of every webpage.

Until now i managed to make jQuery work and i proved it by running

$("body",mr.env).css("background","black"); 

in the mr.on=function() .

This code just makes the background color of the webpage black whenever i click the menu item associated with the addon.

But, if i try to run

 $('body',mr.env).append( ' <img src="img/check.png" /> ' );  

it simply fails. It doesn't show any error in Error Console and the image isn't displayed.

Why is that?

This is my overlay XUL :

<script src="window.js"/>   
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>

<!-- Firefox Tools menu -->
<menupopup id="menu_ToolsPopup">
    <menuitem id="menu_crypt_demo"  class="" image=""
          label="Use DnsResolver?" insertbefore="javascriptConsole" accesskey="o" 
          oncommand="DnsResolver.onMenuItemCommand(event);">
    </menuitem>
</menupopup>

This is the JavaScript file (window.js) :

var DnsResolver = {
    onLoad: function() {
    // initialization code
    this.initialized = true;

},

onMenuItemCommand: function() {
testextension.on();
window.open("chrome://dnsresolver/content/window.xul", "", "chrome");
}

};


window.addEventListener("load", function(e) { DnsResolver.onLoad(e); }, false);

if(!testextension){ var testextension={};}

(function(){

var mr=testextension;


mr.on=function(){
    mr.loadLibraries(mr); 
    var jQuery = mr.jQuery; 
    var $ = function(selector,context){ return new jQuery.fn.init(selector,context||window._content.document); };
    $.fn = $.prototype = jQuery.fn;

    mr.env=window._content.document;

            /*$("body",mr.env).css("background","black");*/
    $('body',mr.env).append('<img src="img/check.png" />');


$(mr.env).ready(function(){

    // hide and make visible the show
    $("span.close a",mr.env).click(function() {
        $("#tbar"),mr.env.slideToggle("fast");
        $("#tbarshow",mr.env).fadeIn("slow");
    });

    // show tbar and hide the show bar
    $("span.show a",mr.env).click(function() {
        $("#tbar",mr.env).slideToggle("fast");
        $("#tbarshow",mr.env).fadeOut();
    });
});


    /*$("body",mr.env).css("background","black");*/
}

// Loading the Jquery from the mozilla subscript method
mr.loadLibraries = function(context){
    var loader = Components.classes["@mozilla.org/moz/jssubscript-loader;1"]
                                                 .getService(Components.interfaces.mozIJSSubScriptLoader);
    loader.loadSubScript("chrome://dnsresolver/content/jquery-1.4.4.min.js",context);
    var jQuery = window.jQuery.noConflict(true);
    if( typeof(jQuery.fn._init) == 'undefined') { jQuery.fn._init = jQuery.fn.init; }
    mr.jQuery = jQuery;
}

})();

Answer 1

Starting with Firefox 3, chrome resources can no longer be referenced from within <img> , <script> , or other elements contained in, or added to, content that was loaded from an untrusted source. This restriction applies to both elements defined by the untrusted source and to elements added by trusted extensions. If such references need to be explicitly allowed, set the contentaccessible flag to yes to obtain the behaviour found in older versions of Firefox.

Answer 2

Use the HTML tab in FireFox to know actually if the img element was added. It probably was added and the problem is with your URL.

I remember when building my FireFox extensions, that files are located through a special protocol (chrome:// I think), where you put the name of the extension and can browse through it.