Third-Party Libraries: Difference between revisions
m Reverted edits by 71.49.87.2 (talk) to last revision by Arantius |
Caveats haven't applied in a while. jQuery version limitations haven't applied for years, but new @grant behavior does. |
||
| 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. | ||
== jQuery == | == jQuery == | ||
| Line 18: | Line 12: | ||
// ==UserScript== | // ==UserScript== | ||
// @name jQuery Example | // @name jQuery Example | ||
// @require http://ajax.googleapis.com/ajax/libs/jquery/1. | // @require http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js | ||
// ==/UserScript== | // ==/UserScript== | ||
| Line 27: | Line 21: | ||
=== Compatibility === | === Compatibility === | ||
Some versions of jQuery | 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.8.2.) | ||
=== Potential conflict === | |||
In some cases, @required jQuery can conflict with the web page. See [http://stackoverflow.com/q/12146445/331508 jQuery in Greasemonkey 1.0 conflicts with websites using jQuery]. | |||
In that case, either specify a @grant value (other than "none") or use jQuery in noConflict mode. See [[@grant#Scope|@grant Scope]] for more information. | |||
=== Links and References === | === Links and References === | ||
* [http://ajax.googleapis.com/ajax/libs/jquery/1. | * [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] | ||
== jQuery UI == | == 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 == | == jQuery Tools == | ||
Revision as of 22:54, 6 January 2013
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.8.2/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.8.2.)
Potential conflict
In some cases, @required jQuery can conflict with the web page. See jQuery in Greasemonkey 1.0 conflicts with websites using jQuery.
In that case, either specify a @grant value (other than "none") or use jQuery in noConflict mode. See @grant Scope for more information.
Links and References
- http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
- StackOverflow: How to embed additional jQuery plugins into Greasemonkey
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);
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 jQuery & Greasemonkey.
