Greasemonkey, y cómo modificar páginas a tu gusto

Bueno, ya era hora de que actualizase, ¿no?

Estos días he estado jugando a travian, típico juego web que abunda. Dicho juegecito tiene ventajas por ser “plus”… si pagas puedes poner unos enlaces para acceder más rápido a tus vacas (dicese de aquellos que te dan las materias para que crezcas…. por la fuerza, claro), o allá dónde quieras. Es una opción que te ahorra un par de clicks para atacar (y así poner tus tropas a salvo si te están atacando).

Asiq, de todos es sabido que soy pobre, y que soy vago. “¿Pq no hacer yo lo mismo? ” pensé, “¡Seguro que hay alguna extensión de firefox que te lo permite!”.

Y efectivamente, dicha extensión existe. Se llama Greasemonkey, es bastante conocida… y te permite hacer justamente lo que quiero. Y ahora, sin más dilación, procedo a explicar cómo añadir unos “links” dónde quieras, en la página que quieras (usaremos de ejemplo a travian xD).

Veamos, esta es la pantalla básica de travian:

Vemos que en la parte derecha (que se llama “side_info” (para buscar id’s, va muy bien la extensión web developer de ff)) existe mucho espacio, y ya sabemos dónde colocaremos nuestros links

Ahora, instalamos Greasemonkey. Es muy sencillo de instalar (como cualquier complemento de firefox). Una vez instalado, reiniciado firefox (o chrome, o el navegador que quieras) te saldrá el dibujito de un mono (¡mira! ¡el animal que le gusta a Sam!) en el “pie” del navegador (a la derecha). Allí podremos activar / desactivar scripts de forma rápida. Ahora mismo nos interesa crear uno nuevo. Vamos al mono, click, y le damos a “Nuevo Script”. Aquí tenemos una imagen:

Es bien fácil de rellenar:

Name: Nombre del script

Namespace: Viene a ser un id. Para diferenciar en caso de que coincidan los nombres

Description: la descripción, obvio

Includes: Las urls a las que afectará (se puede modificar). El uso de “comodines” está permitido. En nuestro caso, podríamos poner “http://speed.travian.net/*”

Excludes: lo mismo que antes, pero para las url a las que NO afectará.

Al darle a aceptar, aparecerá el editor que hayamos seleccionado (en mi caso Notepad++). Veréis unas líneas comentadas, del estilo:

// ==UserScript==
// @name           travian
// @namespace      eleazan@mio.com
// @include       http://speed.travian.net/*
// ==/UserScript==

Eso es lo que se llama “metadata”. Debajo de estas líneas podemos escribir código en JS para modificar la página a gusto del consumidor.

No hace falta ser muy hábil con js para lo que queremos hacer hoy. Veamos el código.

Primero, deberíamos obtener el objeto side_info

var	side_info = document.getElementById('side_info');

Después, añadimos la información deseada:

        side_info.innerHTML += '<br><a href="allianz.php">Alianza</a><br>';
	side_info.innerHTML += '<a href="allianz.php?s=2">Foro Alianza</a><br>';
	side_info.innerHTML += '<a href="build.php?id=33">Cuartel</a><br>';
	side_info.innerHTML += '<a href="build.php?id=22">Establos</a><br>';
	side_info.innerHTML += '<a href="a2b.php?z=228839">Atacar HamooD (lejano)</a><br>';
	side_info.innerHTML += '<a href="a2b.php?z=185525">Atacar domador (cercano)</a><br>';
Y este es el resultado :
Ahora hemos introducido los links en la página  . Y nos ahorramos clicks, y "oros".
¿Cómo podemos pasarle a alguien el script? Bueno, se lo podéis pegar en la ventanita del msn o bien pasarle este post. Aunque, a decir verdad, existe una forma más sencilla. Puedes subir el archivo a algún host y cuando alguien haga click, y tenga greasemonkey instalado, si tiene la extensión .user.js le preguntará si quiere instalar el script, o ver el código. Por ejemplo, este mismo lo tenéis aquí
La próxima entrega de greasemonkey aprenderemos a guardar valores en local (tb con travian).