Third-Party Libraries: Difference between revisions

From GreaseSpot Wiki
Jump to navigationJump to search
m (Reverted edits by Lsloan (talk) to last revision by Arantius)
mNo edit summary
 
(10 intermediate revisions by 6 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.
== Caveats ==
As of Greasemonkey 0.8.x, an @require directive added to an already installed script will not be recognized.
Reinstall the script to force Greasemonkey to recognize the @require directive.
You can simply drag-and-drop the script onto a Firefox browser window, or again in Firefox choose File>Open and select the user script, to reinstall it.


== 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 18: Line 12:
// ==UserScript==
// ==UserScript==
// @name          jQuery Example
// @name          jQuery Example
// @require      http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// @require      https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
// ==/UserScript==
// ==/UserScript==


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


=== Compatibility ===


Some versions of jQuery will not run inside the Greasemonkey sandbox.
=== Potential conflict ===
As of this writing, 1.3.2 does work, but 1.4.1 does not.
 
It is possible to patch 1.4 versions of jQuery to work, see [http://forum.jquery.com/topic/importing-jquery-1-4-1-into-greasemonkey-scripts-generates-an-error jQuery Forum: Importing jQuery 1.4.1 into greasemonkey scripts generates an error].
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 ===
=== Links and References ===


* [http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js http://ajax.googleapis.com/ajax/libs/jquery/1.3.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]
* [http://forum.jquery.com/topic/importing-jquery-1-4-1-into-greasemonkey-scripts-generates-an-error jQuery Forum: Importing jQuery 1.4.1 into greasemonkey scripts generates an error]


== jQuery UI ==
== jQuery UI ==


The jQuery UI framework version 1.5.2 should be compatible, but 1.8.4 is not.
The [https://jqueryui.com/ jQuery UI] library contains many UI widgets like button, dialog, menu, tabs and date picker.  
<!-- Please add details here! -->


== jQuery Tools ==


Version 1.2.4 of jQuery Tools is reported to be at least minimally compatible.
== Resource injection ==
<!-- 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 ==


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"