Third-Party Libraries: Difference between revisions

From GreaseSpot Wiki
Jump to navigationJump to search
← Older editNewer edit →
bla
m Reverted edits by 85.221.161.62 (Talk) to last revision by Arantius
Line 4: Line 4:
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.


function showsimilar() {
== jQuery ==
var similarposts=document.evaluate(".//a[@rel='async' and contains(@href,'oldest=') and contains(@href,'newest=') and contains(@href,'expand_story_uid=')]", document, null, 6, null);
var i=0, l=similarposts.snapshotLength;
if(l > 0) {
do {
var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click',true,true,window,0,0,0,0,0,false,false,false,false,0,null);
similarposts.snapshotItem(i).dispatchEvent(evObj);
} while(++i < l);
}
}


window.setInterval(showsimilar, 1000);
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.


function showsimilar() {
<pre class='sample-good'>
var similarposts=document.evaluate(".//a[@rel='async' and contains(@href,'oldest=') and contains(@href,'newest=') and contains(@href,'expand_story_uid=')]", document, null, 6, null);
// ==UserScript==
var i=0, l=similarposts.snapshotLength;
// @name          jQuery Example
if(l > 0) {
// @require      http://code.jquery.com/jquery-1.4.1.min.js
do {
// ==/UserScript==
var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click',true,true,window,0,0,0,0,0,false,false,false,false,0,null);
similarposts.snapshotItem(i).dispatchEvent(evObj);
} while(++i < l);
}
}


window.setInterval(showsimilar, 1000);
(function() {
    // This will be executed onLoad
    // Append some text to the element with id #someText using the jQuery library.
    $("#someText").append(" more text.");
}());
</pre>
 
== YUI ==
 
Sometimes using the [[Metadata Block#.40resource|@resource]] imperative alongside @require can be helpful.
 
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:
 
<pre class='sample-good'>
// ==UserScript==
// @name          YUI 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
// @resource      yCSS http://yui.yahooapis.com/combo?2.8.0r4/build/datatable/assets/skins/sam/datatable.css
// ==/UserScript==
 
// add Yahoo! css to head
var yCSS = GM_getResourceText("yCSS");
GM_addStyle(yCSS);
</pre>


== Without @require ==
== Without @require ==

Revision as of 19:00, 13 April 2010

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       http://code.jquery.com/jquery-1.4.1.min.js
// ==/UserScript==

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

YUI

Sometimes using the @resource imperative alongside @require can be helpful.

YUI has a nice tool to 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: 

// ==UserScript==
// @name           YUI 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
// @resource       yCSS http://yui.yahooapis.com/combo?2.8.0r4/build/datatable/assets/skins/sam/datatable.css
// ==/UserScript==

// add Yahoo! css to head
var yCSS = GM_getResourceText("yCSS");
GM_addStyle(yCSS);

Without @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 jQuery & Greasemonkey.

Retrieved from "https://wiki.greasespot.net/index.php?title=Third-Party_Libraries&oldid=5124"