Third-Party Libraries

From GreaseSpot Wiki
Revision as of 09:32, 28 March 2023 by Stokito (talk | contribs) (remove YUI and jquery.tools as obsolete. Use jsDelivr as CDN. Refreshed resource injection sample)
Jump to navigationJump to search

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       https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
// ==/UserScript==

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


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

The jQuery UI library contains many UI widgets like button, dialog, menu, tabs and date picker.


Resource injection

Sometimes using the @resource imperative alongside @require can be helpful. You can use the @require key for the script and @resource for an CSS.

For example:

// ==UserScript==
// @name      jQuery UI Example
// @require   https://cdn.jsdelivr.net/npm/jquery-ui@1/dist/jquery-ui.min.js
// @resource  jquery_ui_css https://cdn.jsdelivr.net/npm/jquery-ui@1/themes/base/jquery-ui.min.css
// @grant     GM.getResourceUrl
// @grant     GM.addStyle
// ==/UserScript==

// css to head
var jqueryUiCss = GM_getResourceText("jquery_ui_css");
GM.addStyle(jqueryUiCss);