Third-Party Libraries: Difference between revisions

From GreaseSpot Wiki
Jump to navigationJump to search
m (Reverted edits by 71.49.87.2 (talk) to last revision by Arantius)
(Remove outdated suggestions)
(5 intermediate revisions by 4 users not shown)
Line 3: Line 3:


Most general purpose libraries are not written to operate within the Greasemonkey [[sandbox]] and thus may not work properly, so tread carefully.
Most general purpose libraries are not written to operate within the Greasemonkey [[sandbox]] and thus may not work properly, so tread carefully.
== Caveats ==
As of Greasemonkey 0.8.x, an @require directive added to an already installed script will not be recognized.
Reinstall the script to force Greasemonkey to recognize the @require directive.
You can simply drag-and-drop the script onto a Firefox browser window, or again in Firefox choose File>Open and select the user script, to reinstall it.


== jQuery ==
== jQuery ==
Line 18: Line 12:
// ==UserScript==
// ==UserScript==
// @name          jQuery Example
// @name          jQuery Example
// @require      http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// @require      http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// ==/UserScript==
// ==/UserScript==


Line 27: Line 21:
=== Compatibility ===
=== Compatibility ===


Some versions of jQuery will not run inside the Greasemonkey sandbox.
Some versions of jQuery may not run inside the Greasemonkey sandbox. But, as of this writing, all  released versions, from 1.3.2 onward, work with no known issues except the potential conflict discussed below. (The current jQuery version is 1.9.1.)
As of this writing, 1.3.2 does work, but 1.4.1 does not.
 
It is possible to patch 1.4 versions of jQuery to work, see [http://forum.jquery.com/topic/importing-jquery-1-4-1-into-greasemonkey-scripts-generates-an-error jQuery Forum: Importing jQuery 1.4.1 into greasemonkey scripts generates an error].
=== Potential conflict ===
 
In some cases, @required jQuery can conflict with the web page.
In that case, you can use jQuery in noConflict mode at the top of your script:
 
<pre class='sample-good'>
this.$ = this.jQuery = jQuery.noConflict(true);
</pre>
 
It's also possible to force execution in the legacy sandbox, thus isolating your script further from the content page.
Specify specify any <code>@grant</code> value other than <code>none</code> to do this.  
See [[@grant#Scope|@grant Scope]] for more information.
 
<pre class='sample'>
// ==UserScript==
// @grant  unsafeWindow
// ==/UserScript==
</pre>


=== Links and References ===
=== Links and References ===


* [http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js]
* [http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js]
* [http://stackoverflow.com/questions/439286/how-to-embed-additional-jquery-plugins-into-greasemonkey StackOverflow: How to embed additional jQuery plugins into Greasemonkey]
* [http://stackoverflow.com/questions/439286/how-to-embed-additional-jquery-plugins-into-greasemonkey StackOverflow: How to embed additional jQuery plugins into Greasemonkey]
* [http://forum.jquery.com/topic/importing-jquery-1-4-1-into-greasemonkey-scripts-generates-an-error jQuery Forum: Importing jQuery 1.4.1 into greasemonkey scripts generates an error]


== jQuery UI ==
== jQuery UI ==


The jQuery UI framework version 1.5.2 should be compatible, but 1.8.4 is not.
All jQuery UI framework releases, from 1.5.2 onward, work with no know issues -- except that the CSS files have to be modified to take full advantage of some images.
<!-- Please add details here! -->


== jQuery Tools ==
== jQuery Tools ==
Line 69: Line 78:
GM_addStyle(yCSS);
GM_addStyle(yCSS);
</pre>
</pre>
== Without @require ==
For older versions of Greasemonkey (before 0.8) or for other user script managers, there is an alternative approach.
This, however, does not have the download-once-at-install-time benefit, so you should ''not'' reference servers that you do not own (i.e. jquery.com or yahoo.com).
Read about this technique at [http://joanpiedra.com/jquery/greasemonkey/ jQuery & Greasemonkey].
== See Also ==
* [http://groups.google.com/group/greasemonkey-users/t/7053071cb77b4be2 greasemonkey-users: Compatible versions of javascript frameworks]


[[Category:Coding Tips]]
[[Category:Coding Tips]]

Revision as of 14:42, 25 October 2017

With the @require metadata imperative, one can include entire extra files into a user script. This can also be used for including entire third-party libraries like jQuery or YUI.

Most general purpose libraries are not written to operate within the Greasemonkey sandbox and thus may not work properly, so tread carefully.

jQuery

For a simple example, here is a way to load and use jQuery in your user scripts. Note that @require works by downloading the files once, at install time, and is thus fast and efficient.

// ==UserScript==
// @name          jQuery Example
// @require       http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// ==/UserScript==

// Append some text to the element with id someText using the jQuery library.
$("#someText").append(" more text.");

Compatibility

Some versions of jQuery may not run inside the Greasemonkey sandbox. But, as of this writing, all released versions, from 1.3.2 onward, work with no known issues except the potential conflict discussed below. (The current jQuery version is 1.9.1.)

Potential conflict

In some cases, @required jQuery can conflict with the web page. In that case, you can use jQuery in noConflict mode at the top of your script:

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

It's also possible to force execution in the legacy sandbox, thus isolating your script further from the content page. Specify specify any @grant value other than none to do this. See @grant Scope for more information.

// ==UserScript==
// @grant  unsafeWindow
// ==/UserScript==

Links and References

jQuery UI

All jQuery UI framework releases, from 1.5.2 onward, work with no know issues -- except that the CSS files have to be modified to take full advantage of some images.

jQuery Tools

Version 1.2.4 of jQuery Tools is reported to be at least minimally compatible.

YUI

Sometimes using the @resource imperative alongside @require can be helpful.

YUI has a nice tool to bundle your required libraries on the fly. After you receive your script source (Loading Script and CSS Directly box) use the @require key for the script and @resource for the CSS (if any).

For example:

// ==UserScript==
// @name           YUI Example
// @require        http://yui.yahooapis.com/combo?2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js&2.8.0r4/build/element/element-min.js&2.8.0r4/build/datasource/datasource-min.js&2.8.0r4/build/datatable/datatable-min.js
// @resource       yCSS http://yui.yahooapis.com/combo?2.8.0r4/build/datatable/assets/skins/sam/datatable.css
// ==/UserScript==

// add Yahoo! css to head
var yCSS = GM_getResourceText("yCSS");
GM_addStyle(yCSS);