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.

are you sure the code is even executed? did you try alerts (or console.logs) inside the if statement? — roselan
– roselan, Commented Sep 2, 2011 at 11:16
Are you using Mozilla's Add-On SDK to build your extension ? — Binary9
– Binary9, Commented Sep 2, 2011 at 11:37
if(pathnameis=='/index.php') { alert('something'); //it's works! } and I don't use addon bulder, yes, I use sdk (Komodo) and than I zipping it, (but not the zip is the problem, because the menu is working!) — golddragon007
– golddragon007, Commented Sep 2, 2011 at 11:44
Oh jeh I find how can works this here is the half answer: $("#left .box:eq(0)",aEvent.originalTarget).after('<div id="organic-tabs" class="box"></div>'); now I have only encodeing problames but its easy... — golddragon007
– golddragon007, Commented Sep 2, 2011 at 12:01
@Binary9: No, he clearly isn't - this is regular browser overlay code, not SDK stuff. — Wladimir Palant
– Wladimir Palant, Commented Sep 2, 2011 at 13:23

Wladimir Palant · Accepted Answer · 2011-09-02 13:35:53Z

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)

answered Sep 2, 2011 at 13:35

Wladimir Palant

57.8k12 gold badges100 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

golddragon007 Over a year ago

and if I want to innerhtml whit javascript, how can i do that?

golddragon007 Over a year ago

wnd.document.getElementById("id").innerhtml="something";

swmcdonnell · Accepted Answer · 2013-05-11 10:24:27Z

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:

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.
Use window.content.document as the context for every jQuery operation on the contents of the Web page
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!');
        });
    }
}

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related