How can I use jQuery 1.5.2+ on a Firefox addon?

Question

At first I made a function that received a parameter and returned jQuery such as:

function getjQuery(window)
{
   /*jquery code*/(window);
   return window.jQuery;
}

But then I got an email form the review and they told me I have to use jQuery file with the original file name and completely unmodified.

I started to search for an alternative and found this solution, but there is no way it work.

jQuery object is created, but I can't find any elements. $("#id").length is always 0. With the previous method it was always found.

My current code (which doesn't work)

AddonNameSpace.jQueryAux = jQuery;

AddonNameSpace.$ = function(selector,context) { 
    return                                                 // correct window
        new AddonNameSpace.jQueryAux.fn.init(selector,context||contentWindow); 
};
AddonNameSpace.$.fn =
    AddonNameSpace.$.prototype = AddonNameSpace.jQueryAux.fn;
AddonNameSpace.jQuery = AddonNameSpace.$;

The jQuery file is loading on my browser.xul overlay:

<script type="text/javascript" src="chrome://addon/content/bin/jquery-1.5.2.min.js" />

Am I loading in the right place?

How can I use jQuery to modify the content on a page (HTML) with the original jQuery file, is it even possible?

possible duplicate of [How do I use jQuery in firefox addon?](http://stackoverflow.com/questions/5014105/how-do-i-use-jquery-in-firefox-addon) — Tyler, May 03 '11 at 00:05
how are you loading jQuery (in your current code how do you get the jQuery variable)? Also, are you trying to use jQuery for XUL or for html pages loaded in the browser? — skabbes, May 03 '11 at 00:48
@skabbes I am adding jQuery in `browser.xul` overlay. I want to use on HTML pages `gBrowser.addEventListener("DOMContentLoaded", function (e) { e.originalTarget.defaultView; /* this window */ }, false)` — BrunoLM, May 03 '11 at 00:50

score 3 · Accepted Answer · answered May 03 '11 at 01:03

You need pass the e.originalTarget.defaultView on the second parameter on jquery.. If you don't jquery will use window.document, which is the window.document from the xul.

Use

gBrowser.addEventListener("DOMContentLoaded", function (e) {
    $("#id", e.originalTarget.defaultView).length
}, true);

instead of

$("#id").length;

And, for avoid conflicts with other extensions don't use script in the xul page, use MozIJSSubScriptLoader.

Components.classes["@mozilla.org/moz/jssubscript-loader;1"]
.getService(Components.interfaces.mozIJSSubScriptLoader)
.loadSubScript("chrome://youraddon/content/jquery-1.5.2.min.js");

If you use this method, you load jquery only when you need, avoiding memory leak.

Nearly perfect. But for some reason I can't append elements. `$("

score 2 · Answer 2 · answered May 03 '11 at 00:58

The preferred way to load it is with mozIJSSubScriptLoader so you don't collide with other's extensions. I'm not sure why you're having problems, I can use jQuery in my addon like $("#id").hide() with no additional code (although from the sidebar, now browser.xul).

Either way, this blog post provides a pretty good guide and even has an example xpi to download.

How can I use jQuery 1.5.2+ on a Firefox addon?

2 Answers2

Linked