Programando GreaseMonkey

Soy un adicto a Ikariam, lo acepto. :D

En mi alianza juego con gente de España y Argentina y nos cuesta un poco mantenernos sincronizados para algunas "campañas".

Decidí hacer un pequeño script para que al lado de la fecha pueda poner la fecha de GT y de ARG.

GreaseMonkey es un complemento de Firefox que permite pogramar javascripts adicionales a las paginas que sean actualizados en el browser. Algo asi como... modificar la pagina de cualquier servidor web con funcionalidad javascript programada por nosotros.

El ejemplo que use fue:
El server de Ikariam muestra la hora del servidor en españa. Yo quería modificar la pagina de ikariam para que al lado aparezca la hora de Guatemala y la de Argentina.

Las primeras lineas dan información del script:

// ==UserScript==
// @name HoraArgGua
// @namespace http://carcasco.blogspot.com
// @description Poner varios horarios en el ikariam
// @include http://s6.ikariam.es/index.php*
// ==/UserScript==

Las funciones que puse despues son cosas que solo utilicé de la misma pagina ikariam. Luego mi funcion de cambia de horario.

busco el elemento que quiero cambiar:
servertime = document.getElementById('servertime');

Si existe entonces creo un nuevo elemento:
detalleHoras = document.createElement('span');

Y lo inserto luego de ese. Es decir, agregue un tag de html extra a la pagina:
servertime.parentNode.insertBefore(detalleHoras, servertime.nextSibling);

Adicional hice la funcion que calcula la fecha (puro javascript) y cambio el innerHtml del elemento recién creado.

saludos!

Codigo Completo:
=================

// ==UserScript==
// @name HoraArgGua
// @namespace http://carcasco.blogspot.com
// @description Poner varios horarios en el ikariam
// @include     http://s6.ikariam.es/index.php*
// ==/UserScript==

function dezInt(num,size,prefix){prefix=(prefix)?prefix:"0";var minus=(num<0)?"-":"",result=(prefix=="0")?minus:"";num=Math.abs(parseInt(num,10));size-=(""+num).length;for(var i=1;i<=size;i++){result+=""+prefix;}
result+=((prefix!="0")?minus:"")+num;return result;}

function getFormattedDate(timestamp,format){var currTime=new Date();currTime.setTime(timestamp);str=format;str=str.replace('d',dezInt(currTime.getDate(),2));str=str.replace('m',dezInt(currTime.getMonth()+1,2));str=str.replace('Y',currTime.getFullYear());str=str.replace('y',currTime.getFullYear().toString().substr(2,4));str=str.replace('G',currTime.getHours());str=str.replace('H',dezInt(currTime.getHours(),2));str=str.replace('i',dezInt(currTime.getMinutes(),2));str=str.replace('s',dezInt(currTime.getSeconds(),2));return str;}


function cambiarHorario() {
 var d = new Date();
 d.setMinutes(d.getMinutes()+d.getTimezoneOffset()-6*60);
 var strHoraGt = "GT: "+ getFormattedDate(d, 'd/G:i');
 d = new Date();
 d.setMinutes(d.getMinutes()+d.getTimezoneOffset()-3*60);
 var strHoraArg = "AR: "+ getFormattedDate(d, 'd/G:i');
 document.getElementById('servertime').nextSibling.innerHTML=" | "+strHoraGt+" | "+strHoraArg;
}

iniciaCambioHorario = function() {
 var servertime,detalleHoras;
 servertime = document.getElementById('servertime');
 if (servertime) {
  detalleHoras = document.createElement('span');
  detalleHoras.innerHTML="";
  servertime.parentNode.insertBefore(detalleHoras, servertime.nextSibling);
 } 
 cambiarHorario();
}

iniciaCambioHorario();