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.

Every 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
// @namespace
// @description
// @include
// @exclude
// ==/UserScript==

Hello World
http://hack.bangalore.corp.yahoo.com/
Example script to alert "Hello world!" on hack day website
http://hack.bangalore.corp.yahoo.com/*
http://hack.bangalore.corp.yahoo.com/archives/category/hackuzelaentry

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

Greasemonkey
// ==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 World

The 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


This is a URL, and Greasemonkey uses it to distinguish user scripts that have the same name but are written by different authors.
// @description


It 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
// @exclude


These 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
// @namespace
// @description
// @include
// @exclude
// ==/UserScript==

Hello World

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 status
bar 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
// @namespace
// @include
// @exclude
// ==/UserScript==

Hide Images

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
// @namespace
// @include
// @exclude
// ==/UserScript==

XPath Example

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
// @namespace
// @include
// @exclude
// ==/UserScript==

Insert Before

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
// @namespace
// @include
// @exclude
// ==/UserScript==

Insert After

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
// @namespace
// @include
// @exclude
// ==/UserScript==

Replace Element

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
// @namespace
// @include
// @exclude
// ==/UserScript==

Inserting Raw HTML

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
// @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
// @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

Introduction to Greasemonkey

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (10)

Destaque

Destaque (20)

Semelhante a Introduction to Greasemonkey

Semelhante a Introduction to Greasemonkey (20)

Mais de Gurpreet Singh Sachdeva

Mais de Gurpreet Singh Sachdeva (6)

Último

Último (20)

Introduction to Greasemonkey