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.
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.
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 );
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"); });