Third-Party Libraries: Difference between revisions
From GreaseSpot Wiki
Jump to navigationJump to search
Remove outdated suggestions |
remove YUI and jquery.tools as obsolete. Use jsDelivr as CDN. Refreshed resource injection sample |
||
| Line 6: | Line 6: | ||
== jQuery == | == jQuery == | ||
For a simple example, here is a way to load and use jQuery in your user scripts. | For a simple example, here is a way to load and use [https://jquery.com jQuery] in your user scripts. | ||
Note that @require works by downloading the files once, at install time, and is thus fast and efficient. | Note that @require works by downloading the files once, at install time, and is thus fast and efficient. | ||
| Line 12: | Line 12: | ||
// ==UserScript== | // ==UserScript== | ||
// @name jQuery Example | // @name jQuery Example | ||
// @require | // @require https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js | ||
// ==/UserScript== | // ==/UserScript== | ||
| Line 19: | Line 19: | ||
</pre> | </pre> | ||
=== Potential conflict === | === Potential conflict === | ||
| Line 44: | Line 41: | ||
=== Links and References === | === Links and References === | ||
* [ | * [https://www.jsdelivr.com/ jsDelivr] - a CDN for open source projects | ||
* [http://stackoverflow.com/questions/439286/how-to-embed-additional-jquery-plugins-into-greasemonkey StackOverflow: How to embed additional jQuery plugins into Greasemonkey] | * [http://stackoverflow.com/questions/439286/how-to-embed-additional-jquery-plugins-into-greasemonkey StackOverflow: How to embed additional jQuery plugins into Greasemonkey] | ||
== jQuery UI == | == jQuery UI == | ||
The [https://jqueryui.com/ jQuery UI] library contains many UI widgets like button, dialog, menu, tabs and date picker. | |||
== | == Resource injection == | ||
Sometimes using the [[Metadata Block#.40resource|@resource]] imperative alongside @require can be helpful. | Sometimes using the [[Metadata Block#.40resource|@resource]] imperative alongside @require can be helpful. | ||
You can use the @require key for the script and @resource for an CSS. | |||
For example: | For example: | ||
| Line 69: | Line 58: | ||
<pre class='sample-good'> | <pre class='sample-good'> | ||
// ==UserScript== | // ==UserScript== | ||
// @name | // @name jQuery UI Example | ||
// @require | // @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== | // ==/UserScript== | ||
// | // css to head | ||
var | var jqueryUiCss = GM_getResourceText("jquery_ui_css"); | ||
GM.addStyle(jqueryUiCss); | |||
</pre> | </pre> | ||
[[Category:Coding Tips]] | [[Category:Coding Tips]] | ||
Revision as of 09:32, 28 March 2023
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
- 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-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);
