Discover Greasemonkey for Firefox

In the Google Operating System blog and in other blogs as well, we are talking about the fact that Google Chrome added the Greasemonkey Support. Okay, but my experience with Chrome is too poor. May be because I am a foolish fun of Firefox and especially its beautiful Add-ons (Web Developer…). The main thing to discuss here is Greasemonkey itself. What is it, and for which purpose it is used.

Greasemonkey is a Firefox extension that gives you huge and tremendous control over how a page appears in your browser. Just imagine what you like see displayed in the page you got when you visit it and begin to think “JavaScriptly” that you wish would run when a site loads, you can make it so. Rearrange completely a site's layout

, hide annoying elements (advertisement, images?), or replace every occurrence of "Nicolas Sarkozy" with "Bling-bling president" All it takes is a few lines of JavaScript and of course the Greasemonkey extension.

To understand this let’s go with some examples.
Since you are opening Firefox window, go to the Greasemonkey extension page (here) and click "Add to Firefox." Follow the instructions, then restart Firefox.






















Okay you had already restarted your Firefox and now you should be able to have something like this in the bottom right of the status bar. If the monkey is faded just activate it by right clicking over.








You can find all sorts of Greasemonkey scripts at userscripts.org. To keep things simple as everyone normally wants now, try installing this Hello World script we cooked up.
But before, please make sure that the Greasemonkey is activated.
Install this Hello world script:
To do so just follow the following steps:

• Create a file whose filename ending in .user.js. The full name, let’s say: helloworld.user.js. this file will contain this code:

// ==UserScript==
// @name Webmonkey's Hello World
// @namespace http://www.webmonkey.com
// @description A basic example of Greasemonkey that causes an alert at each page load.
// @include *
// ==/UserScript==

alert('JCargoo Community... "Hello World!"');

The alert function tells the browser to give the message passed to it in a string value.

Most of the code above is metadata, which doesn't even need to be included to work. The name, description, namspace etc., are used by Greasemonkey to reference each script in the Manage User Scripts screen. The metadata is also used on sites like userscripts.org to show information about the scripts. Check out available metadata properties (Here).

• Create a test.html file in the same directory as the file helloworld.user.js with this code:

<a href="helloworld.user.js">helloworld.user.js</a>

Now you open the test.html and normally if you have already the Greasemonkey activated you will be facing to this box (Now just accept to install the script):
(Whenever Greasemonkey sees a file that matches that format, it prompts you to install the script)

Remark: In addition to this direct method of installation, you can add scripts that are stored on your computer via the Manage User Scripts window.
















Let’s go now to open for example the Firefox start page and hop:

Whenever you open a page, the JavaScript alert will be executed. Please disable this script; otherwise it might become really annoying.










Getting More Advanced JS stuff?

Create a file named hidingimages.user.js with code below:

// ==UserScript==
// @name Webmonkey's Hiding Elements
// @namespace http://www.webmonkey.com
// @description An example Greasemonkey script that hides every image.
// @include *
// ==/UserScript==

var imgs = document.getElementsByTagName('img');
for (i=0; i<imgs.length; i++)
{
imgs[i].style.visibility = 'hidden';
}

Open now the Google URL. What genuine surprise you got? No Google Logo !

The principle is simple; the for loop goes through each image one by one in the opened HTML file and sets the visibility CSS value to "hidden". Do you feel that you've changed the way you're viewing the web?
Now I don’t want to give more examples as it is obvious that it was informally a small introduction about what can the strong Greasemonkey do for us.
Now's the time when you can go forth and use it. Fo people needing some inspiration, you can usually find it at userscripts.org. For example, check out everything people have written to alter GMail.
For instance here is an example letting you changing the style of the delete button.

// Gmail2 RedDelete
// version 0.3b
// 2008-10-08
// by Diego De Vita
// based on Bruno Caimar's idea.
//
// ==UserScript==
// @name Gmail2 RedDelete
// @description change the style of the delete button on your gmail account
// @include http://mail.google.com/*
// @include https://mail.google.com/*
// ==/UserScript==

var label = 'Delete';
var interval = 1000;

var canvasDocument;

function initState(){
canvas=document.getElementById('canvas_frame');
if(canvas!=null){
canvasDocument=canvas.contentDocument;
return true;
}
return false;
}

function changeStyle(n){
n.style.background = 'red';
n.style.color = 'white';
n.style.fontWeight = 'bold';
}

function modButtons() {
buttons = canvasDocument.getElementsByTagName('button');
for(i=0;i<buttons.length;i++){
if (buttons[i].innerHTML.indexOf(label) != -1) changeStyle(buttons[i]);
}
}

function onLoadHandler(){
if (initState()==true) setInterval(modButtons,interval);
}

window.addEventListener('load',onLoadHandler,true);

Result:







Make happiness with Greasemonkey is possible.

How to encourage this blog if you like it:

• Promote our sponsors;
• Add any kind of comment or critic;
• Ask me directly by email if you prefer.

Just do something like that, and I will have the huge pleasure to continue posting the best of the creativity I have.

Share this post ?

---