Third-Party Libraries: Difference between revisions

From GreaseSpot Wiki
Jump to navigationJump to search
← Older edit
m Added example
Stokito (talk | contribs)
3 edits
mNo edit summary
 
(6 intermediate revisions by 4 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://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
// @require      https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
// ==/UserScript==
// ==/UserScript==


Line 19: Line 19:
</pre>
</pre>


=== Compatibility ===


Some versions of jQuery may not run inside the Greasemonkey sandbox.  But, as of this writing, all  released versions, from 1.3.2 onward, work with no known issues except the potential conflict discussed below. (The current jQuery version is 1.8.2.)
=== Potential conflict ===


=== 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:


In some cases, @required jQuery can conflict with the web page. See [http://stackoverflow.com/q/12146445/331508 jQuery in Greasemonkey 1.0 conflicts with websites using jQuery].
<pre class='sample-good'>
this.$ = this.jQuery = jQuery.noConflict(true);
</pre>


In that case, either specify a @grant value (other than "none") or use jQuery in noConflict mode. See [[@grant#Scope|@grant Scope]] for more information.
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-good'>
<pre class='sample'>
// ==UserScript==
// ==UserScript==
// @name          jQuery @grant Example
// @grant unsafeWindow
// @grant        sandbox
// ==/UserScript==
// ==/UserScript==
</pre>
</pre>
Line 38: Line 41:
=== Links and References ===
=== Links and References ===


* [http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js]
* [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 ==


All jQuery UI framework releases, from 1.5.2 onward, work with no know issues -- except that the CSS files have to be modified to take full advantage of some images.
The [https://jqueryui.com/ jQuery UI] library contains many UI widgets like button, dialog, menu, tabs and date picker.  
 
== jQuery Tools ==
 
Version 1.2.4 of jQuery Tools is reported to be at least minimally compatible.
<!-- Please add details here! -->


* [http://cdn.jquerytools.org/1.2.4/all/jquery.tools.min.js http://cdn.jquerytools.org/1.2.4/all/jquery.tools.min.js]


== YUI ==
== 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].
 
== See Also ==
 
* [http://groups.google.com/group/greasemonkey-users/t/7053071cb77b4be2 greasemonkey-users: Compatible versions of javascript frameworks]


[[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"