Third-Party Libraries: Difference between revisions
Adding caveat about how require works with existing scripts. |
|||
Line 18: | Line 18: | ||
$("#someText").append(" more text."); | $("#someText").append(" more text."); | ||
</pre> | </pre> | ||
=== Important === | |||
As of GM 0.8.2x, @require directives added to existing scripts will *not* be recognized. | |||
Uninstall the script and then reinstall the script to force GM to recognize the @require directive. | |||
=== jQuery and GreaseMonkey Compatibility === | === jQuery and GreaseMonkey Compatibility === |
Revision as of 23:55, 28 May 2010
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.3.2/jquery.min.js // ==/UserScript== // Append some text to the element with id #someText using the jQuery library. $("#someText").append(" more text.");
Important
As of GM 0.8.2x, @require directives added to existing scripts will *not* be recognized. Uninstall the script and then reinstall the script to force GM to recognize the @require directive.
jQuery and GreaseMonkey Compatibility
Some versions of jQuery cannot be @require'd by GM. As of this writing, 1.3.2 does work, 1.4.1 does not. Check out this jQuery thread for details and fixes.
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.