1. Include jQuery.
Option a) Loading jQuery using loadSubScript
In your .js file add the following (after changing it suitably for your own addon)
Code: Select all
loadLibraries: function(context){
var loader = Components.classes["@mozilla.org/moz/jssubscript-loader;1"]
.getService(Components.interfaces.mozIJSSubScriptLoader);
loader.loadSubScript("chrome://ziink/content/jquery-1.3.2.js",context);
var jQuery = window.jQuery.noConflict(true);
loader.loadSubScript("chrome://ziink/content/jquery.hoverIntent.min.js", jQuery);
ziink.jQuery = jQuery;
}
My addon introduces only one name 'ziink' in the global namespace and this function is within that object. Note the call to noConflict(true). This will restore any changes that my copy of jQuery makes. Also note that the call to load a jQuery module has a copy of our jQuery as the last arg ( the context within which the module will be loaded).
Call this function from code that gets run when your addon loads. e.g.
Code: Select all
// Load Libraries. For jQuery it doesn't really matter what the context is
ziink.loadLibraries(ziink);
Option b) In your XUL file add : Not recommended as it can mess up other addons or your addon could get messed up by other's.
<script src="jquery-1.3.2.js"/>
2. Use jQuery in your functions.
Add the following lines in each function you want to use jQuery in. Note that 'window._content.document' might not be what you want the default to be. Change it to the document you are working with or to a node.
Code: Select all
var jQuery = ziink.jQuery; // ziink.jQuery is the saved value from step 1
var $ = function(selector,context){ return new jQuery.fn.init(selector,context||window._content.document); };
$.fn = $.prototype = jQuery.fn;
3. Fix couple of bugs in jQuery 1.3.2
Bug a) Search for
Code: Select all
Array.prototype.slice.call( document.documentElement.childNodes );
Code: Select all
Array.prototype.slice.call( [] );
Bug b) Find the function clone(). Change the line
Code: Select all
return jQuery.clean([html.replace(/ jQuery\d+="(?:\d+|null)"/g, "").replace(/^\s*/, "")])[0];
to
Code: Select all
return jQuery.clean([html.replace(/ jQuery\d+="(?:\d+|null)"/g, "").replace(/^\s*/, "")], this.ownerDocument)[0];
If you don't fix this bug, jQuery uses the XULDocument instead of the document that owns the object you are trying to clone. There might be other similar bugs. I didn't really look for other similar bugs.
4. Now use jQuery as you normally would.
5. Example Addon : Ziink Web Helper
Feel free to download my addon from AMO https://addons.mozilla.org/en-US/firefox/addons/versions/13180 to see it in action. You'll have to download version 0.0.11 or newer.
6. Add your own experience and tips to this thread.
Good luck!
Gotchas
1. $('html string').appendTo(selector) does not work.