How can I use jQuery and Javascript from firefox add-on?

Question

I can't create a new element in the page. I check the page and domain when the page is onload, that's work, but I don't know how can I create a new element in the correct window page.

window.addEventListener("load", function() { myExtension.init(); }, false);

var myExtension = {
  init: function() {
    var appcontent = document.getElementById("appcontent");   // browser
    if(appcontent)
      appcontent.addEventListener("DOMContentLoaded", myExtension.onPageLoad, true);
  },

  onPageLoad: function(aEvent) {
var unsafeWin = aEvent.target.defaultView;
        if (unsafeWin.wrappedJSObject) unsafeWin = unsafeWin.wrappedJSObject;

var locationis = new XPCNativeWrapper(unsafeWin, "location").location;
var hostis = locationis.host;
//alert(hostis);
if(hostis=='domain.com')
{
    var pathnameis=locationis.pathname;
    if(pathnameis=='/index.php')
    {
        $("#left .box:eq(0)").after('<div id="organic-tabs" class="box"></div>'); // this code somewhy doesn't working, but if I copy to FireBug it't work.
    }
}

  }
}

My question is: How can I use Javascript and jQuery from firefox addon when I want to manipulate html in the correct window content? What is need from here

$("#left .box:eq(0)").after('<div id="organic-tabs" class="box"></div>');

for working.

Answer 1

This code has a bunch of issues. For one, appcontent is not the browser, gBrowser is. So it should be:

init: function() {
  gBrowser.addEventListener("DOMContentLoaded", myExtension.onPageLoad, true);
},

Then, using wrappedJSObject is absolutely unnecessary (and also not safe the way you do it).

var wnd = aEvent.target.defaultView;
var locationis = wnd.location;

Finally, you are trying to select an element in the browser document (the document that your script is running in), not in the document loaded into the tab. You need to give jQuery an explicit context to work on:

$("#left .box:eq(0)", wnd.document)

But you shouldn't use jQuery like that, it defines a number of global variables that might conflict with other extensions. Instead you should call jQuery.noConflict() and create an alias for jQuery within myExtension :

var myExtension = {
  $: jQuery.noConflict(true),

  ....

  myExtension.$("#left .box:eq(0)", wnd.document)

Answer 2

Here is a template you can use that incorporates your sample code. I also added an additional statement so you could see another use of jQuery. Important points:

1. You must load jQuery before you can use it. You should myplace the jQuery library file you want to use in Chrome, for example, in the chrome/content directory.
2. Use window.content.document as the context for every jQuery operation on the contents of the Web page
3. Use this as the context of a successful search result to help you insert code in the correct spot.

window.addEventListener('load', myExtension.init, false);

var myExtension = {
    jq : null,  
    init : function() {
        var app;

    // Load jQuery
        var loader = Components.classes["@mozilla.org/moz/jssubscript-loader;1"].getService(Components.interfaces.mozIJSSubScriptLoader);
        loader.loadSubScript("chrome://myExtension/content/jquery-1.5.2.min.js");
        myExtension.jq = jQuery.noConflict();

        // Launch extension
        if ((app = document.getElementById("appcontent"))) {
            app.addEventListener("DOMContentLoaded", myExtension.run, true);
        }
    },

    run : function() {

        // make sure this is the correct Web page to change
        var href = event.originalTarget.location.href;
        if (href && href.match(/http:\/\/(www\.)?domain\.com\/(index\.php)/i)) {
            changeScreen();
        }
    },

    changeScreen : function() {

        // make changes to the screen
        // note the "window.content.document) in the first jQuery selection
        myExtension.jq("#left .box:eq(0)", window.content.document).after('');

                // note the use of "this" to use the search results as the context
        myExtension.jq("#right", window.content.document).each(function() {
            myExtension.jq("tr td", this).append('MATCH!');
        });
    }
}