Introduction to Greasemonkey

Greasemonkey

Agenda

• What is Greasemonkey?

• What is User Script?

• What you need, to use Greasemonkey?

• Installing Greasemonkey

• Understanding user script metadata

• Creating your first user script

• Installing User Scripts

• Managing existing User Scripts

• Deep dive into GreaseMonkey / User Scripts

• Examples

Greasemonkey

What is Greasemonkey?• Greasemonkey is a user script manager.

• It is an extension for the Mozilla Firefox web browser.

What is User Script?• User scripts, are scripts that make on-the-fly changes to specific web pages on the client side, typically to change their appearance or

to add or modify functionality.

• User scripts are written in JavaScript and manipulate the contents of a web page using the Document Object Model interface.

• Any file that ends in .user.js is a valid Greasemonkey user script.

• The userscripts.org maintains a database of Greasemonkey scripts.

• Greasemonkey scripts contain metadata, which specifies the name of the script, a description, a namespace URL used to differentiate identically named scripts, and URL patterns for which the script is intended to be invoked or not.

• When the user visits a matching website, Greasemonkey invokes the relevant scripts, which can modify a webpage in any way JavaScript could.

• Greasemonkey scripts can also pull external HTTP resources via a non-domain-restricted XMLHTTP request.

Note: A vanilla Firefox install doesn’t support user scripts, you need to use Greasemonkey extension to use user scripts.

Greasemonkey

What you need, to use Greasemonkey?• Firefox web browser

• Greasemonkey extension for Firefox

• Intermediate knowledge of JavaScript

Installing Greasemonkey• You can download Greasemonkey from https://addons.mozilla.org/en-US/firefox/addon/748/

• You can enable/disable the Greasemonkey extension by clicking on monkey icon in Firefox status bar.

Understanding user script metadataEvery user script has a section of metadata that tells Greasemonkey about the script itself, where it came from, and when to run it.

// ==UserScript==// @name Hello World// @namespace http://hack.bangalore.corp.yahoo.com/// @description Example script to alert "Hello world!" on hack day website// @include http://hack.bangalore.corp.yahoo.com/*// @exclude http://hack.bangalore.corp.yahoo.com/archives/category/hackuzelaentry// ==/UserScript==

There are six separate pieces of metadata here, wrapped in a set of Greasemonkey-specific comments.

Greasemonkey

Understanding user script metadata

// ==UserScript==//// ==/UserScript==These comments are significant, and must match exactly. Greasemonkey uses them to signal the start and end of your user script metadata.

// @name Hello WorldThe name of your user script is displayed in the install dialog when you first install the script, and later in the “Manage User Scripts” dialog.@name is optional. If not present, it defaults to the filename of the user script, minus the .user.js extension.

// @namespace http://hack.bangalore.corp.yahoo.com/This is a URL, and Greasemonkey uses it to distinguish user scripts that have the same name but are written by different authors.

// @description Example script to alert "Hello world!" on hack day websiteIt is displayed in the install dialog when you first install the script, and later in the “Manage User Scripts” dialog.@description is optional. If not present, it defaults to an empty string.

// @include http://hack.bangalore.corp.yahoo.com/*// @exclude http://hack.bangalore.corp.yahoo.com/archives/category/hackuzelaentryThese lines tell Greasemonkey on which sites you want your user script to execute.Excludes take precedence over includes.@include and @exclude are optional. If neither is specified, Greasemonkey will execute your user script on all sites.You may specify as many included and excluded URLs as you need, but you must specify each on its own line.

Greasemonkey

Creating your first user script

// ==UserScript==// @name Hello World// @namespace http://hack.bangalore.corp.yahoo.com/// @description Example script to alert "Hello world!" on hack day website// @include http://hack.bangalore.corp.yahoo.com/*// @exclude http://hack.bangalore.corp.yahoo.com/archives/category/hackuzelaentry// ==/UserScript==

alert("Hello World!");

Save this file as hello-world.user.js

Using ‘New User Script’ wizard

You can also create a user script by using ‘New User Script ‘ wizard.To open ‘New User Script’ wizard, right click the Greasemonkey icon in statusbar and select ‘New User Script’.

By default user scripts are saved in a folder called ‘gm_scripts’ under your firefox Profile folder.

Greasemonkey

Installing User Scripts

To install a user script you can either drag the user script file on Firefox browser or open it from the net.In both the cases it will shows ‘Install User Script’ dialog having option to install the script or view script source.

If Greasemonkey is disabled, it will open the file in browser instead of showing the install dialog box. In this case you can install the script by selecting Tools -> Greasemonkey -> Install User Script…

Once the script is installed you can visit the site matching the pattern mentioned in @include metadata to see it in action.

Greasemonkey

Managing existing User Scripts

You can check and manage the already installed user scripts from ‘Manage User Script’ wizard.To open ‘Manage User Script’ wizard right click the Greasemonkey icon.

Greasemonkey

Deep dive into GreaseMonkey / User Scripts

Example 1: Hiding all images from a webpage

// ==UserScript==// @name Hide Images// @namespace http://hack.bangalore.corp.yahoo.com/// @include http://hack.bangalore.corp.yahoo.com/*// @exclude http://hack.bangalore.corp.yahoo.com/archives/category/hackuzelaentry// ==/UserScript==

var imgs = document.getElementsByTagName('img');for (i=0; i<imgs.length; i++) {

imgs[i].style.visibility = 'hidden'; }

Save the file as hide-image.user.js

Greasemonkey

Example 2: Hide a specific element

// ==UserScript==// @name XPath Example// @namespace http://hack.bangalore.corp.yahoo.com/// @include http://hack.bangalore.corp.yahoo.com/*// @exclude http://hack.bangalore.corp.yahoo.com/archives/category/hackuzelaentry// ==/UserScript==

var allDivs, thisDiv;allDivs = document.evaluate( "//div[@id='hd']", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);for (var i = 0; i < allDivs.snapshotLength; i++) { thisDiv = allDivs.snapshotItem(i); thisDiv.style.display = 'none';}

Save the file as xpath.user.js

document.evaluate (regular_expression, html_element, namespace, output_order, merge_xpath_results);

XPath Tutorial:http://zvon.org/comp/r/tut-XPath_1.html#Pages~ListQ20XofQ20XXPaths

Greasemonkey

Example 4: Inserting an element before a specific element

// ==UserScript==// @name Insert Before// @namespace http://hack.bangalore.corp.yahoo.com/// @include http://hack.bangalore.corp.yahoo.com/*// @exclude http://hack.bangalore.corp.yahoo.com/archives/category/hackuzelaentry// ==/UserScript==

Var body, newElement;body = document.getElementById('bd');if (body) { newElement = document.createElement('hr'); body.parentNode.insertBefore(newElement, body);}

Save the file as insert-before.user.js

Greasemonkey

Example 3: Inserting an element after a specific element

// ==UserScript==// @name Insert After// @namespace http://hack.bangalore.corp.yahoo.com/// @include http://hack.bangalore.corp.yahoo.com/*// @exclude http://hack.bangalore.corp.yahoo.com/archives/category/hackuzelaentry// ==/UserScript==

Var body, newElement;body = document.getElementById('bd');if (body) { newElement = document.createElement('hr'); body.parentNode.insertBefore(newElement, body.nextSibling);}

Save the file as insert-after.user.js

Greasemonkey

Example 5: Replacing an element

// ==UserScript==// @name Replace Element// @namespace http://hack.bangalore.corp.yahoo.com/// @include http://hack.bangalore.corp.yahoo.com/*// @exclude http://hack.bangalore.corp.yahoo.com/archives/category/hackuzelaentry// ==/UserScript==

var theDiv, altDiv, pInDiv, textNodeInP;theDiv = document.getElementById('ft');if (theDiv) { altDiv = document.createElement('div'); pInDiv = document.createElement('p'); textNodeInP = document.createTextNode("Hack Bangalore is proudly powered by DNA-BLR-FE"); pInDiv.appendChild(textNodeInP); altDiv.appendChild(pInDiv); theDiv.parentNode.replaceChild(altDiv, theDiv);}

Save the file as replace-element.user.js

Greasemonkey

Example 6: Inserting Raw HTML

// ==UserScript==// @name Inserting Raw HTML// @namespace http://hack.bangalore.corp.yahoo.com/// @include http://hack.bangalore.corp.yahoo.com/*// @exclude http://hack.bangalore.corp.yahoo.com/archives/category/hackuzelaentry// ==/UserScript==

var theDiv, altDiv;theDiv = document.getElementById('ft');if (theDiv) { altDiv = document.createElement('div'); altDiv.innerHTML = "<p>Hack Bangalore is proudly powered by dna-blr-fe" + "<br>Send your feedback to <a href='mailto:dna-blr-fe@yahoo-inc.com'>us</a></p>"; theDiv.parentNode.replaceChild(altDiv, theDiv);}

Save the file as raw-html.user.js

Greasemonkey

Example 7: Open offsite links in new tab/window

// ==UserScript==// @name Open offsite links in new tab/window// @namespace http://hack.bangalore.corp.yahoo.com/// @include *// ==/UserScript==

var a, thisdomain, links;thisdomain = window.location.host;links = document.getElementsByTagName('a');

for (var i = 0; i < links.length; i++) { a = links[i]; if (a.host && a.host != thisdomain) { a.target = "_blank"; }}

Save the file as open-blank.user.js

Greasemonkey

Example 8: Adding CSS

// ==UserScript==// @name Adding CSS// @namespace http://hack.bangalore.corp.yahoo.com/// @include http://hack.bangalore.corp.yahoo.com/*// @exclude http://hack.bangalore.corp.yahoo.com/archives/category/hackuzelaentry// ==/UserScript==

function addGlobalStyle(css) { var head, style; head = document.getElementsByTagName('head')[0]; if (!head) { return; } style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = css; head.appendChild(style);}

addGlobalStyle('p { font-size: large ! important; }');

Save the file as adding-css.user.js

Greasemonkey

Example 8: Adding CSS

// ==UserScript==// @name Adding CSS// @namespace http://hack.bangalore.corp.yahoo.com/// @include http://hack.bangalore.corp.yahoo.com/*// @exclude http://hack.bangalore.corp.yahoo.com/archives/category/hackuzelaentry// ==/UserScript==

function addGlobalStyle(css) { var head, style; head = document.getElementsByTagName('head')[0]; if (!head) { return; } style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = css; head.appendChild(style);}

addGlobalStyle('p { font-size: large ! important; }');

Save the file as adding-css.user.js

Greasemonkey

Example 9: Hijacking Click Event

// ==UserScript==// @name Hijacking Click Event// @namespace http://hack.bangalore.corp.yahoo.com/// @include http://hack.bangalore.corp.yahoo.com/*// @exclude http://hack.bangalore.corp.yahoo.com/archives/category/hackuzelaentry// ==/UserScript==

document.addEventListener('click', function(event) { event.stopPropagation(); event.preventDefault();}, true);

Save the file as hijacking-click.user.js

Thank You!

Thank you!