How-To: Crear Extensiones para Firefox.

Introducción

Esto es un pequeño tutorial de como crear extensiones para Firefox. Las extensiones de firefox y thunderbird están hechas con XUL y JavaScript. XUL es un lenguaje muy parecido a XML así que es bien fácil de entender. No soy un experto ni nada parecido en esto pero aprendí un poco y quiero compartirlo para ver si motivo a alguien y termina haciendo grandes extensiones

Durante este pequeño how-to estaremos creando el típico Hola Mundo.

+ Materiales:
•   Firefox (version 1.5+)
•   Editor de Texto
•   Conocimiento de JavaScript
•   WinZip o algo que haga la misma función

Primero tenemos que definir una estructura de árbol que es prácticamente la base:

/chrome/chromeFiles/content
/defaults/preferences

El Instalador

El instalador es un archivo llamado install.rdf que pueden crearlo con cualquier editor de texto. Este es un simple instalador que pueden modificar para usarlo:

Código:

<?xml version="1.0"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:em="http://www.mozilla.org/2004/em-rdf#">

<Description about="urn:mozilla:install-manifest">
<em:id>tu@email.com</em:id>
<em:version>1.0</em:version>
<em:type>2</em:type>


<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>1.5</em:minVersion>
<em:maxVersion>1.5.0.4</em:maxVersion>
</Description>
</em:targetApplication>


<em:name>Nombre de tu extensión</em:name>
<em:description>Descripción de que hace</em:description>
<em:creator>El Autor</em:creator>
<em:homepageURL>http://www.elhacker.net/</em:homepageURL>
</Description>
</RDF>

Este instalador es para las versiones de Firefox de 1.5 en adelante, en versiones previa era distinto y en las mas antiguas era con un archivo de javascript. Veamos:

•   El ID donde dice tu@email.com es un ID de quien lo creo la extensión, anteriormente había que crear un ID con un programa, una larga tontería.
•   La Version es la version de tu extensión no se sugiere poner 1.0 hasta que no este completamente estable tu extensión.
•   TYPE esto debería de quedarse así el 2 especifica que es una extensión no se que son los otros, quizás plugins.
•   MinVersion deberían de dejarlo así porque es la version mínima de firefox que soportaras. La MaxVersion si puedes cambiarlo según te vaya funcionando con Firefox superiores

Lo último se entiende y lo demás dejarlo igual. El segundo ID que parece cosas aleatorias es una identificación de Firefox. Antes de continuar se me había olvidado decirles que todo esto es CASE SENSITIVE, diferencia minúsculas de mayúsculas, no es lo mismo CASA , Casa , CaSa.

Menús

Ahora estaremos creando nuestro primer XUL, este va servir para ser sobre añadido al del firefox. Aquí esta el ejemplo:

Código:

<?xml version="1.0"?>

<overlay id="browsero"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">



<script type="application/x-javascript"
src="chrome://holamundo/content/funciones.js">

</script>



<popup id="contentAreaContextMenu">
<menuitem id="helloworld" label="Hola Mundo" accesskey="H"
insertafter="context-stop" oncommand="run();"/>
</popup>



<menupopup id="menu_ToolsPopup">
<menuitem insertafter="devToolsSeparator" label="Hola Mundo"
accesskey="H" oncommand="run();" />
</menupopup>

</overlay>

Ahora explicamos por pedazos. Podemos notar que en todos los xul y casi todos los documentos a excepción a los de javascript tienen de cabecera <?xml version="1.0"?> , esta es la cabecera indicando la version de XML y es vital.

Código:

Este pedazo de código indica que el overlay (en realidad no se una definición exacta de esto pero es algo como para pasar por encima, para sobre escribir y añadir) tiene de ID browsero, esto podemos modificarlo por el nombre que queramos lo de XMLNS lo pueden dejar igual. Es muy importante recordar que nunca deberíamos tener dos elementos con ID iguales porque causara problemas, uno no funcionara.

Código:

Para los que han programado en javascript alguna ves, saben que esto es para importar un JavaScript externo, un javascript que esta localizado en un archivo llamado funciones.js . Lo que si pueden encontrar curioso es la tipo de dirección, chrome es llamado a las ventanas de XUL, es un tipo de ventana algo distinto. El holamundo es el nombre que le daremos al overlay , esto lo veremos mas adelante en el archivo chrome.manifest . Si no queremos poner el javascript externo podemos hacerlo ahí mismo estilo html.

Código:

En esto no estoy muy claro, el ID del popup creo que se refiere al nombre del ID que Firefox le da al menú de Click Derecho. Lo demás es un poco comprensible, el accesskey se refiere a la tecla por cual podamos acceder a esto alt+H o ctrl+H dependiendo de tu sistema, el insertafter es insertar luego de que también parece ser una variable de Firefox el context-stop. Y lo más importante es el oncommand , esto se refiere a lo que sucederá al tener una acción, ser clickeado más específicamente. Como vemos esto llamara a una función llamada run() en nuestro archivo de javascript.

El JavaScript

Las extensiones están compuesta de dos partes básicas el XUL que son los formularios y/o ventanas y el JavaScript que es el código que hace que interactúa con todo el alrededor. Es altamente sugerible leer varios tutoriales o un libro completo de JavaScript que enseñe a usar los objetos. Para interactuar con los elementos de XUL se usa document.getElementById('iddelelemento') los que han programado JavaScript un poco avanzado o han programado en Ajax entenderán perfectamente esto. Para seguir con nuestro how-to crearemos el funciones.js en la carpeta de content . Y le pondremos el siguiente código:

Código:

function run()
{
alert('Hola Mundo');
}

Esto es una simple función llamada run() que es la que es llamada al menú recibir acción. Solo tendrá un alert() que es un messagebox con el mensaje Hola Mundo.

chrome.manifest

Este archivo deben de crearlo en la carpeta root, no en ninguna de las carpetas creadas sino en la carpeta principal. Esto es como un .htaccess (los webmasters comprenderán) , indica donde va todo y los overlay que vas hacer. Para este simple hola mundo solo tendremos que ponerle dos líneas:

content holamundo chrome/chromeFiles/content/
overlay chrome://browser/content/browser.xul chrome://holamundo/content/browsero.xul

La primera línea indica la ruta a donde estará el contenido de nuestra extensión, por eso veíamos anteriormente que la dirección era chrome://holamundo/content/cualquierarchivo . La segunda línea indica el overlay, lo que vamos a sobre escribir o agregar, le agregaremos a chrome://browser/content/browser.xul que es donde esta la configuración del browser y el 2do argumento es el archivo que le agregaremos para modificaciones.

Compilando e Instalando

Compilar todo esto es bien simple, es solamente meter todo en un zip. Metemos todo lo que esta en la carpeta root, incluyendo las carpetas chrome y defaults (se que no hicimos nada aquí). Luego que tengamos todo en un zip le cambiamos la extensión por .xpi . Luego para instalar simplemente abrimos el Firefox le damos a Ctrl+O y buscamos el archivo, se instalara nos pedirá que reiniciemos el Firefox para ver los efectos y al reiniciar deberías de poder ver tus menú y el Hola Mundo al dar click.

Durante la instalación tendrás que esperar unos 5 segundos, esto es debido a que no esta firmado, para que una extensión este firmada tienen que comunicarse con Mozilla para que ellos te lo firmen y lo acepten como una extensión valida y verificada. Esto es para evitar que se descarguen extensiones maliciosas y luego culpen a Mozilla.

Referencias

•   XUL Planet (http://www.xulplanet.com/) el mejor lugar para aprender todo sobre XUL.
•   JavaScript (http://www.w3schools.com/js/default.asp) , la escuelita del JavaScript.
•   Foro de MozillaZine (http://forums.mozillazine.org/viewforum.php?f=19) tienen gran soporte para los iniciados y avanzados.
•   Google (tengo que decirlo?) lo que no encuentras aquí no lo encuentras en ningún lado.
•   ElHacker.net (foro.elhacker.net) , pueden comunicarse conmigo por aquí.

---------------------------------------------------------------

Cualquier duda y/o sugerencia y aportes son resividos

XUL

Introduccion

XUL (XML User-Interface Language) (se pronuncia zul y dicen que rima con cool), es un lenguaje multi-plataforma usado especialmente para los GUI de los programas. Como su nombre indica, es un derivado del XML asi que funciona al igual que el XML las etiquetas que se abran tendran que ser ceradas; tambien se puede incluir algunos codigos HTML al estilo XHTML.

Ventanas

Aqui un simple ejemplo de una ventana sin contenido hecha en XUL:

Código:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window
id="miventana"
title="Mi ventana"
orient="horizontal"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
...
</window>

Le ventana no hara ninguna ejecucion ni tendra como interactuar porque no le hemos puesto nada. Donde estan los .... irian los elementos de la ventana.

Código:

<?xml version="1.0"?>

Esta linea indica claramente que estamos trabajando con un documento XML y la version del XML sera 1.0

Código:

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

Esta linea hace llamada a un CSS , una hoja de estilo, si nos fijamos en la direccion en realidad no entenderemos nada, solamente que esta llamando a un chrome en algun lugar llamado global/skin . Esto es llamando al skin que esta utilizando actualmente Firefox. Si no incluimos esta linea pues nuestra ventana no tendra color ni botones.

Código:

<window

Indicamos que estamos trabajando con un window es el equivalente de Body en html. No siempre tiene que ser una ventana, tambien existen los dialogos.

Código:

id="miventana"

Indicamos el id de nuestra ventana, este id debe ser unico y no repetido. Mediante este id podremos acceder a nuestra ventana con JavaScript cuando queramos hacer un script.

Código:

title="Mi Ventana"

Creo que esta bastante claro que se trata del titulo que tendra nuestra ventana.

Código:

orient="horizontal"

Esto hace referencia a como se iran posicionando los elementos en nuestra ventana, puede ser horizontal o vertical (este por defecto).

Código:

xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

Esta linea en verdad no estoy muy seguro de que indica, dicen que es para indicar que todos los elementos son hijos de XUL.

Código:

</window>

Damos fin a nuestra ventana como cuando cerramos nuestro Body en un html.

Abriendo una ventana

Existen varias formas de abrir las ventanas (XUL) pero la mas correcta o mas indicada es hacerlo mediante JavaScript.

Código:

window.open(url,nombredeventana,flags);

El flag debe ser "chrome".

Ejemplo:
window.open("chrome://navigator/content/navigator.xul", "bmarks", "chrome,width=600,height=300");

Con esto abriremos la ventana de Bookmarks (Favoritos). Funciona igual que el window.open() normal solo que con el flag de chrome, podemos indiciar demas atributos separandolos por comas.

Botones

Código:

Asi se hace un simple boton. Pueden haber otros atributos como image para ponerle una imagen al boton o accesskey que indica con que tecla puede ser llamada (alt+tecla o ctrl+tecla).

Texto e Imagenes

No puedes poner texto directamente en los XUL como en html, necesitas usar elementos especificos. El mas comun es el label:

Código:

Es utilizado mayormente para textos breves. Para textos mas largos, como parrafos se usa description:

Código:

<description>
Hola mundo, estoy probando tonterias lalalala
</desciption>

Para insertar imagenes es muy parecido a como lo hacemos en html:

Código:

Y aqui hay un ejemplo de como hacer una combinacion de XUL y CSS:

Código:

XUL:
<image id="image1"/>
<image id="search"/>

Style Sheet:
#image1 {
list-style-image: url("chrome://michrome/skin/banner.jpg");
}

#search {
list-style-image: url("chrome://chrome/skin/images/search.jpg");
}

Input

El elemento para input simple es llamado textbox tiene los mismo atributos que un input en html.

Código:

Puedes espcificar el type="password" para cuando se vaya a tratar contraseñas o cosas que no quieres que otros vean. Tambien esta el atributo maxlength para solo permitir X cantidad de caracteres. El atributo multiline para permitir varias lineas de texto y no solamente una linea, este debemos darle el valor de true.

Añadir HTML

En XUL podemos incluir casi todos los elementos de html, aunque la mayoria de los elementos ya estan en XUL pero quizas hay algo que consideren mas facil en html. Un ejemplo:

Código:

<html:img src="banner.jpg"/>

<html:input type="checkbox" value="true"/>

<html:table>
<html:tr>
<html:td>
A simple table
</html:td>
</html:tr>
</html:table>

Algunos que no son validos:

Código:

<html:po>Case 1</html:po>
<div>Case 2</div>
<html:description value="Case 3"/>

PD: Mozilla tiene una web para los programadores http://developer.mozilla.org/es/docs/Portada es estilo wiki y actualmente la documentacion en Español es muy poca. Pero aun considero mejor y mas organizado la documentacion de XUL en xulplanet.com que es de donde aprendi y saco la mayoria de los ejemplos.

Muy interesante, gracias por compartir la info.

Ahora bien, me he quedado perdido en una parte, en las ubicaciones, podrias resumir en unas cuatro lineas mas las ubicaciones de los archivos? algo asi como:

archivo tal ----> /tal/etc
otro file -------> /aqui/etc

Cuando llego al primer XUL me bloqueo, no se donde ubicarlo.

saludos