javascript - FireFox extension: How to access page element via jQuery?

Question

I am using following code:

   var myExtension = {
    init: function() {
        // The event can be DOMContentLoaded, pageshow, pagehide, load or unload.
        if(gBrowser) gBrowser.addEventListener("DOMContentLoaded", this.onPageLoad, false);
    },
    onPageLoad: function(aEvent) {
        var doc = aEvent.originalTarget; // doc is document that triggered the event
        var win = doc.defaultView; // win is the window for the doc
        //alert("page is loaded 
" +doc.location.href);
       // alert(doc.location.href.indexOf("facebook.com"));
        if(doc.location.href.indexOf("facebook.com") == -1) 
        {
            return;
        }
        alert("we are here");
        alert($("#blueBar").html());
    }
}
window.addEventListener("load", function load(event){
    window.removeEventListener("load", load, false); //remove listener, no longer needed
    myExtension.init();  
},false);

It keeps giving undefined error

Answer 1

$() will use the document of the current window by default. Which is actually browser.xul in your case. You need to operate on the sub-document, which you already got via var doc = aEvent.originalTarget;, so this should work I think (untested)

$(doc).find("#blueBar")