1. Instalar GreaseMonkey

GreaseMonkey es una extensión del Firefox que permite añadir código Javascript a páginas que hemos descargado desde cualquier servidor. Por supuesto, ese código solo estará disponible en nuestro cliente y en aquellos que tengan instalado GreaseMonkey así como nuestros scripts.

La instalación es muy sencilla y puede hacerse directamente desde Herramientas > Complementos. Una vez instalado, aparece en la barra de herramientas un nuevo botón de acceso a los scripts instalados en nuestro cliente.

2. Primer programa usando GreaseMonkey

Podemos crear nuestros scripts directamente desde el botón que aparece en nuestra barra de herramientas: New User Script

Todo programa realizado para GreaseMonkey debe llevar una cabecera que configura la ejecución del mismo. Por ello, al crear un nuevo programa desde la barra de herramientas, un pequeño asistente nos ayudará a crear dicha cabecera.

Nuestro primer programa escrito para GreaseMonkey podría ser el siguiente:

// ==UserScript==
// @name        Hola GreaseMonkey
// @namespace   http://vrivas.es
// @description Primer programa
// @include     *
// @version     1
// ==/UserScript==
alert( "Hola GreaseMonkey!" );

La cabecera indica:

Dado que hemos indicado que se ejecute para cualquier dominio (@include *), toda página que abramos, mostrará un mensaje al terminar de cargarse.

3. Añadiendo elementos al a página web

Dado que podemos ejecutar el código que deseemos en nuestra página, hay también la posibilidad de añadir nuevos elementos. Para ello usaremos los métodos document.createElement() y document.body.appendChild().

En el siguiente ejemplo, incluimos en toda página web un pequeño "div" que nos permite enviarnos la URL de la página por correo:

    // ==UserScript==
// @name        Añadir elementos
// @namespace   http://vrivas.es
// @description Añadiendo un div que permite enviarnos un correo con la URL.
// @include     *
// @version     1
// @grant       none
// ==/UserScript==
var node=document.createElement( "div" );
node.innerHTML="Envíar por correo";
node.setAttribute( "style",
                  "width: 10em;"+
                  "border: 1px solid #a0a0d0;"+
                  "background-color: rgba( 80%, 80%, 90%, 0.2);"+
                  "position: fixed;"+
                  "top: 250px;"+
                  "right: 30px;");
document.body.appendChild( node );

var enlace=document.getElementById( "gmCorreo" );
enlace.setAttribute( "href", 
                    "mailto:vrivas@ujaen.es?"+
                    "subject=Enlace Interesante&"+
                    "body="+location.href );

4. Usando bibliotecas externas

Finalmente, es posible utilizar bibliotecas externas con el modificador @require, que además puede ser usado tantas veces como se desee. ASí, es posible, por ejemplo, hacer uso de jQuery en nuestros scripts, como en el siguiente ejemplo en el cual ponemos un recuadro rojo a todos los enlaces que devuelva el buscador Google:

// ==UserScript==
// @name        Usando ficheros externos
// @namespace   http://vrivas.es
// @description Uso de jQuery en nuestros scripts
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// @include     http://*.google.*/*
// @include     https://*.google.*/*
// @version     1
// @grant       none
// ==/UserScript==
//Avoid conflicts
this.$ = this.jQuery = jQuery.noConflict(true);
$(document).ready(function()
{
    $("a").css("border", "1px solid #d05050");
});