24May 2010 2 Comments */?>

Como crear un script para GreaseMonkey con JQuery

Categorías: Tutoriales - Tags: ,

En mi post anterior prometí que iba a explicar un poco de que trata GreaseMonkey y como lo prometido es deuda aca estamos.

Como bien dice la wikipedia Greasemonkey es una extensión para el navegador Mozilla Firefox e Iceweasel que permite, por medio de pequeñas porciones de código creadas por usuarios, modificar el comportamiento de páginas web específicas. Con esta extensión es posible mejorar la experiencia de lectura de un sitio web, hacerlo más usable, añadir nuevas funciones a las páginas web, corregir errores, mejorar servicios de búsquedas y muchas otras cosas más.

Estas pequeñas o no tan pequeñas porciones de código estan creadas por diversos usuarios de internet en lenguaje javascript y se les llama user scripts. Los nombres de dichos script tienen el formato xxxxxx.user.js , donde xxxxxx es el nombre que querramos ponerle.

Ahora veamos como es un user script por dentro empezando por la cabezera y sus @

1
2
3
4
5
6
7
// ==UserScript==
// @name          eMessages Timersys  
// @namespace  http://masquewordpress.com 
// @description   eMessages tool to display messages in eRepublik 
// @require        http://direccionweb.com/jquery.js  
// @include        http://ww*.erepublik.com/*
// ==/UserScript==
  • @name :nombre del programa
  • @namespace :web del autor o otra dirección de interes
  • @description :descripción del programa
  • @include : Página web en la cual nuestro script funcionará
  • @require : A diferencia del resto esta no es obligataria y tan solo la debemos usar cuando querramos cargar uno o más archivos externos. En este caso lo voy a usar para cargar JQuery

A partir de la cabezera todo lo que sigue es código Javascript. En nuestro caso podemos usar JQueryya que hemos incluido el archivo en la cabezera metadata.

Además Greasemonkey dispone de su propia API. Con la cual por ejemplo podemos hacer llamada AJAX de forma similar a como lo hacemos con JQuery.

1
2
3
4
5
6
7
8
9
10
jQuery(document).ready(function(){
				GM_xmlhttpRequest({
	method: 'GET',
      url: 'http://masquewordpress.com/erepublik/ajax_progreso.php?usuario=12',
 
	onload:function(response){
			  $('.column:first').prepend( response.responseText);
 
    }	
	});

Con esta explicación se pueden dar un pequeña idea de como funciona GreaseMonkey. La mayor base de datos de user scripts está en userscripts.org
.
En taringa hay 2 buenos tutoriales para los que quieran empezar: Parte I + Parte II
Documentación de GreaseMonkey (en ingles)

Damián Logghe

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. WordPress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus

  • JuDelCo

    Bueno, me gustaría empezar, pero los tutoriales en taringa han desaparecido y no encuentro ninguna copia por ningun lado. Tienes tu esos tutoriales o sabes donde encontrarlos ? Gracias

  • Pepe

    magnifigo tutoria, que bien te explicas hijo