How to embed additional jQuery plugins into Greasemonkey

javascript

To embed additional jQuery plugins into Greasemonkey, you can use the GM_addStyle and GM_addScript functions provided by Greasemonkey.

Here’s an example of how to embed the jQuery UI library into Greasemonkey:

// ==UserScript==
// @name         My Script
// @namespace    mynamespace
// @version      1
// @description  Example script that uses jQuery UI
// @match        http://*/*
// @match        https://*/*
// @require      https://code.jquery.com/ui/1.12.1/jquery-ui.min.js
// @grant        GM_addStyle
// @grant        GM_addScript
// ==/UserScript==

// Embed the jQuery UI CSS stylesheet using GM_addStyle
GM_addStyle('https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css');

// Embed the jQuery UI script using GM_addScript
GM_addScript('https://code.jquery.com/ui/1.12.1/jquery-ui.min.js');

// Your script goes here
$(function() {
  // Example code that uses jQuery UI
  $('input[type="text"]').autocomplete({
    source: ['Apple', 'Banana', 'Cherry', 'Durian']
  });
});

In this example, we include the jQuery UI library using the @require metadata block. We then use GM_addStyle to embed the jQuery UI CSS stylesheet and GM_addScript to embed the jQuery UI script. We then write our own script that uses jQuery UI to create an autocomplete input.

Note that you can use GM_addStyle and GM_addScript to embed any JavaScript or CSS resource into your Greasemonkey script, not just jQuery plugins.