Third-Party Libraries: Difference between revisions

From GreaseSpot Wiki
Jump to navigationJump to search
Created page with '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…'
 
Stokito (talk | contribs)
3 edits
mNo edit summary
 
(31 intermediate revisions by 15 users not shown)
Line 1: Line 1:
With the [[Metadata Block#.40require|@require]] metadata imperative, one can include entire extra files into a user script.
With the [[Metadata Block#.40require|@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.
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.
Most general purpose libraries are not written to operate within the Greasemonkey [[sandbox]] and thus may not work properly, so tread carefully.
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      http://code.jquery.com/jquery-1.4.1.min.js
// @require      https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
// ==/UserScript==
// ==/UserScript==


(function() {
// Append some text to the element with id someText using the jQuery library.
    // This will be executed onLoad
$("#someText").append(" more text.");
    // Append some text to the element with id #someText using the jQuery library.
    $("#someText").append(" more text.");
}());
</pre>
</pre>


== YUI ==
 
=== 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:
 
<pre class='sample-good'>
this.$ = this.jQuery = jQuery.noConflict(true);
</pre>
 
It's also possible to force execution in the legacy sandbox, thus isolating your script further from the content page.
Specify specify any <code>@grant</code> value other than <code>none</code> to do this.
See [[@grant#Scope|@grant Scope]] for more information.
 
<pre class='sample'>
// ==UserScript==
// @grant  unsafeWindow
// ==/UserScript==
</pre>
 
=== 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]
 
== 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.
YUI has a nice tool to [http://developer.yahoo.com/yui/articles/hosting/?yuiloader&MIN#configure bundle your required libraries] on the fly.
After you receive your script source (Loading Script and CSS Directly box) use the @require key for the script and @resource for the CSS (if any).


For example:
For example:


<pre class='sample-good'>
<pre class='sample'>
// ==UserScript==
// ==UserScript==
// @name           YUI Example
// @name     jQuery UI Example
// @require       http://yui.yahooapis.com/combo?2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js&2.8.0r4/build/element/element-min.js&2.8.0r4/build/datasource/datasource-min.js&2.8.0r4/build/datatable/datatable-min.js
// @require   https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
// @resource       yCSS http://yui.yahooapis.com/combo?2.8.0r4/build/datatable/assets/skins/sam/datatable.css
// @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==
// ==/UserScript==


// add Yahoo! css to head
// css to head
var yCSS = GM_getResourceText("yCSS");
var jqueryUiCss = GM.getResourceText("jquery_ui_css")
GM_addStyle(yCSS);
GM.addStyle(jqueryUiCss)
</pre>
</pre>


== Without @require ==
== See also ==
 
* [[GM_config]] - a lightweight graphical settings dialog that can be easily used in user scripts, through @require.
For older versions of Greasemonkey (before 0.8) or for other user script managers, there is an alternative approach.
This, however, does not have the download-once-at-install-time benefit, so you should ''not'' reference servers that you do not own (i.e. jquery.com or yahoo.com).
Read about this technique at [http://joanpiedra.com/jquery/greasemonkey/ jQuery & Greasemonkey].


[[Category:Coding Tips]]
[[Category:Coding Tips]]

Latest revision as of 09:53, 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 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

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.
Retrieved from "https://wiki.greasespot.net/index.php?title=Third-Party_Libraries&oldid=8041"