Como crear un script para GreaseMonkey con JQuery

Publicado en May 24, 2010 by Damian

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 @

// ==UserScript==
// @name          eMessages Timersys  
// @namespace  http://blog.timersys.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.

jQuery(document).ready(function(){
                GM_xmlhttpRequest({
    method: 'GET',
      url: 'http://blog.timersys.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)

Comparte este artículo:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • BarraPunto
  • Bitacoras.com
  • email
  • Meneame
  • MySpace
  • Print
  • Technorati
  • Twitter

Links Sponsors

Tags: ,

Categoría: Tutoriales

Leave a Reply