Third-Party Libraries

From GreaseSpot Wiki
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 ReactJS.

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


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
// ==/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
// @require
// @resource  jquery_ui_css
// @grant     GM.getResourceText
// @grant     GM.addStyle
// ==/UserScript==

// css to head
var jqueryUiCss = GM.getResourceText("jquery_ui_css")

See also

  • GM_config - a lightweight graphical settings dialog that can be easily used in user scripts, through @require.