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)