I'm trying to use jQuery inside a Firefox extension, and actually want to use jQuery to manipulate the DOM of the current page, as opposed to the context of the XUL file. Thus, I load jQuery in my XUL file, and pass it to some of my scripts in a sandbox (using the Greasemonkey extension compiler ). Since jQuery was not loaded with the page DOM, I want to set its selector context to the page DOM instead of always passing it into jQuery calls.

I followed the solution at How to use jQuery in Firefox Extension and it almost achieves what I want.

jQuery.noConflict();
$ = function(selector,context){ return new jQuery.fn.init(selector,context||example.doc); };
$.fn = $.prototype = jQuery.fn;

I'm able to make calls to the jQuery() function, and the page DOM will be used as the context. However, I can't use functions like jQuery.trim as those are not defined.

I thought this line from the solution

$.fn = $.prototype = jQuery.fn;

will let my own jQuery object inherit all of the jQuery prototype properties, but it apparently doesn't.

Give a vanilla jQuery object, how do I redefine it to use a certain element as the selector context, while preserving all jQuery functions?

I'm trying to use jQuery inside a Firefox extension, and actually want to use jQuery to manipulate the DOM of the current page, as opposed to the context of the XUL file. Thus, I load jQuery in my XUL file, and pass it to some of my scripts in a sandbox (using the Greasemonkey extension compiler http://arantius.com/misc/greasemonkey/script-compiler). Since jQuery was not loaded with the page DOM, I want to set its selector context to the page DOM instead of always passing it into jQuery calls.

I followed the solution at How to use jQuery in Firefox Extension and it almost achieves what I want.

jQuery.noConflict();
$ = function(selector,context){ return new jQuery.fn.init(selector,context||example.doc); };
$.fn = $.prototype = jQuery.fn;

I'm able to make calls to the jQuery() function, and the page DOM will be used as the context. However, I can't use functions like jQuery.trim as those are not defined.

I thought this line from the solution

$.fn = $.prototype = jQuery.fn;

will let my own jQuery object inherit all of the jQuery prototype properties, but it apparently doesn't.

Give a vanilla jQuery object, how do I redefine it to use a certain element as the selector context, while preserving all jQuery functions?

• javascript
• jquery
• dom
• firefox-addon
• greasemonkey

• I hope it works for you. When I tried to use jQuery in an extension and loaded it in a XUL overlay, it somehow broke the overlays of other plugins like the Webdeveloper toolbar. Maybe it works better now. Just watch out for this! – Felix Kling Commented Sep 11, 2010 at 10:53

3 Answers 3

.trim(), .ajax() etc are static methods, meaning they are bound to the jQuery constructor and not it's prototype.

jQuery.noConflict();
$ = function(selector,context){ return new jQuery.fn.init(selector,context||example.doc); };
$.fn = $.prototype = jQuery.fn;
jQuery.extend($, jQuery); // copy's trim, extend etc to $

However a perhaps nice way is to leave jQuery intact and do the following:

var fromDoc = $(document);
// and if you want to find stuff:
fromDoc.find('div').doSomething();
fromDoc.find('.someClass').doSomethingElse();

This is also an optimisation since the context doesnt have to be manually set anymore with each query.

var jQueryInit = $.fn.init;

$.fn.init = function(arg1, arg2, rootjQuery){
    arg2 = arg2 || window.document;
    return new jQueryInit(arg1, arg2, rootjQuery);
};

Another way of doing it is overriding the constructor:

var initjQuery = jQuery.fn.init;
$.fn.init = function(s,c,r) {
    c = c || window.document;
    return new initjQuery(s,c,r);
};