Introduction to Greasemonkey
Upcoming SlideShare
Loading in...5
×
 

Introduction to Greasemonkey

on

  • 238 views

 

Statistics

Views

Total Views
238
Views on SlideShare
238
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Introduction to Greasemonkey Introduction to Greasemonkey Presentation Transcript

    • 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 metadata 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 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 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 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 website 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 http://hack.bangalore.corp.yahoo.com/* http://hack.bangalore.corp.yahoo.com/archives/category/hackuzelaentry 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 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 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 http://hack.bangalore.corp.yahoo.com/ http://hack.bangalore.corp.yahoo.com/* http://hack.bangalore.corp.yahoo.com/archives/category/hackuzelaentry 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 http://hack.bangalore.corp.yahoo.com/ http://hack.bangalore.corp.yahoo.com/* http://hack.bangalore.corp.yahoo.com/archives/category/hackuzelaentry 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 http://hack.bangalore.corp.yahoo.com/ http://hack.bangalore.corp.yahoo.com/* http://hack.bangalore.corp.yahoo.com/archives/category/hackuzelaentry 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 http://hack.bangalore.corp.yahoo.com/ http://hack.bangalore.corp.yahoo.com/* http://hack.bangalore.corp.yahoo.com/archives/category/hackuzelaentry 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 http://hack.bangalore.corp.yahoo.com/ http://hack.bangalore.corp.yahoo.com/* http://hack.bangalore.corp.yahoo.com/archives/category/hackuzelaentry 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 http://hack.bangalore.corp.yahoo.com/ http://hack.bangalore.corp.yahoo.com/* http://hack.bangalore.corp.yahoo.com/archives/category/hackuzelaentry 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!