@require-ing jQuery overwrites the page's $ variable

Question

I'm @require-ing jQuery for my Greasemonkey script with this line in my script file:

// @require https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

and it works quite well; I can use $('#id') to access the DOM.

However, the $ variable of the 'real' page is modified (where $ is jQuery 1.2.xx): I get an error that $.include is not defined.

I thought the sandbox model of Greasemonkey would prevent that the variables of the target-page are overwritten?

How can I ensure that the inclusion of javascript libraries does not affect the 'real' website, but only my Greasemonkey script?

Answer 1

Greasemonkey 1.0, radically changed the way the sandbox works, busting thousands of scripts. See also, jQuery in Greasemonkey 1.0 conflicts with websites using jQuery.

This is a huge problem, and I hope you will join me in voicing your opinion/experiences on the principle bug report for this issue.

Meanwhile, restore the sandbox to your script, and resolve the $ conflict, by editing your Metadata Block to end with the following lines:

// @grant       GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a major design change introduced in GM 1.0,
    It restores the sandbox.
*/

Specifying a @grant value (other than none) reactivates the sandbox.

---

You might also consider switching to Scriptish, which has offered superior features and performance in the past, and does not suffer from this new sandbox behavior.

Answer 2

See jQuery.noConflict();; it explains a lot.

EDIT:
Found "Greasemonkey 1.0 + jQuery: Broken, with Workaround" on searching.

Possible solution:

 this.$ = this.jQuery = jQuery.noConflict(true);

Doing that, probably will implicitly specify that $, jQuery will be available in your script's namespace.