Third-Party Libraries

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.

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

• jsDelivr - a CDN for open source projects
• StackOverflow: How to embed additional jQuery plugins into Greasemonkey

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@3/dist/jquery.min.js
// @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.getResourceText
// @grant     GM.addStyle
// ==/UserScript==

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

See also

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