CODEWITHSUNDEEP
javascriptjqueryfirefoxfirefox-addon
BrunoLM
BrunoLM

Reputation: 100351

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

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?

Upvotes: 5

Views: 815

Answers (2)

StiveKnx
StiveKnx

Reputation: 320

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.

Upvotes: 3

skabbes
skabbes

Reputation: 900

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.

Upvotes: 2

Related Questions