Javier Pérez

Creación de extensiones para Firefox

Prólogo

1. Introducción

2. IDE de Extensiones

Lo llamaremos FEIDE (Firefox Extensions IDE). Todo desarrollo debe hacerse sobre un IDE, y ya que Firefox no provee de forma directa uno, nosotros nos vamos a crear el nuestro.

Este IDE no contará con un GUI, más allá del IDE que usemos para escribir código (Zend Studio en mi caso), y algún IDE que encontréis para desarrollar XUL. Hasta el momento no he encontrado ningún IDE para XUL que me convenza, pero si encontráis alguno decente no dudéis en comentarlo por aquí.

NOTA: A lo largo del curso haré las explicaciones exclusivamente para Linux, aunque haré una excepción en este capítulo. Motivo: no me gusta Windows, no lo uso, y no tengo tiempo para molestarme en buscar cómo se hace algo en Windows. Quien quiera aportar esa información, o la de cualquier otro OS, en los comentarios será bien recibida.

2.1. Directorio de trabajo

Lo primero que debemos hacer, es crear un directorio de trabajo:

c:\extensiones o ~/extensiones, dependiendo de si usamos Windows o Linux.

En ese directorio crearemos los directorios de nuestra extensión, de un perfil de Firefox para desarrollo, y de utilidades para testear extensiones, ejecutar un Firefox de desarrollo, etc.

Ejemplo:

• ~/extensiones
  • miextension/
    • content/
    • locale/
    • skin/
    • install.rdf
    • chrome.manifest
  • firefox-dev.profile/
  • firefox-dev.sh

2.2. Perfil de desarrollo en Firefox

Seguramente tengas tu Firefox bastante saturado de extensiones, como esa molesta pero bonita extensión llamada RainFox... Así que lo que haremos será crearnos una copia limpia de Firefox, o lo que es lo mismo, crearemos un perfil en Firefox sólo para desarrollo.

Para ello, en nuestro directorio de trabajo, lo primero que haremos será crear un script para lanzar Firefox con dicho perfil:

Windows: firefox-dev.bat 

@echo off
"C:\Archivos de programa\Mozilla Firefox\firefox.exe" -P dev -console -moz-no-remote

Linux: firefox-dev.sh 

#!/bin/sh
firefox -P dev -console -moz-no-remote

En Linux podemos crear un lanzador, y configurarlo para que sea abra con una terminal:

Los parámetros significan lo siguiente:

• -P profile
  • Carga el perfil con nombre profile. Si no existe el perfil os saldrá la ventana de gestión de perfiles.
• -console
  • Muestra por consola los mensajes enviados desde Firefox a través de la función Javascript dump().
• -moz-no-remote
  • Con este parámetro conseguimos abrir varias instancias distintas de Firefox, para, por ejemplo, abrir Firefox con nuestro perfil por defecto, y otro Firefox con el perfil de desarrollo sin extensiones, y que podamos abrir y cerrar constantemente.

En Linux será necesario darle permisos de ejecución:

$ sudo chmod 770 firefox-dev.sh

Ejecutamos nuestro script, y nos saldrá la ventana de perfiles de Firefox. Seleccionamos "Crear perfil", y luego a "Siguiente".

Seleccionamos el directorio "c:\extensiones\firefox-dev.profile" o "~/extensiones/firefox-dev.profile", mediante el botón "Elegir carpeta/directorio" (o "Choose Folder"). Le ponemos como nombre del perfil "dev", y le damos a "Terminar".

Ya tenemos nuestro nuevo y limpio perfil, listo para usarlo. Podemos ejecutar ahora mismo Firefox con el perfil "dev" pulsando sobre "Iniciar Firefox".

La próxima vez que ejecutemos nuestro script se abrirá el perfil "dev" de forma automática sin tener que pasar por este proceso de nuevo. Recordad que después de crear este perfil, si intentáis ejecutar vuestro Firefox anterior, cargará el perfil dev. Para volver a ejecutar Firefox con vuestro perfil antiguo, debéis ejecutarlo así:

$ firefox -P default -moz-no-remote

2.3. Extensiones útiles para desarrollar extensiones

Hay muchas extensiones que nos facilitarán la vida a la hora de desarrollar extensiones. Yo recomiendo instalar (en el nuevo perfil "dev") de momento las siguientes extensiones, y SÓLO las siguientes extensiones:

• FireBug
  • No podrás vivir sin él una vez que lo tengas instalado. Con esta extensión, dispondremos a golpe de click una línea de comandos para la consola JavaScript, un panel de mensajes de consola, un depurador Javascript, y un maravilloso "Inspector" del DOM.
  • Aunque no está pensado para depurar extensiones, nos será muy útil para pruebas, edición de CSS "en tiempo de ejecución", inspeccionar páginas web, etc.
• Restart Firefox
  • Con esta extensión dispondremos de un botón para reiniciar rápidamente Firefox, y así poder ver los cambios que hayamos hecho en nuestra extensión, ahorrándonos la tediosa operación de cerrar y abrir.
  • Pero tiene un problema. Si reinicias Firefox con esta extensión perderemos los mensajes dump() que genere nuestra extensión.
• Web Developer
  • Contiene muchas utilidades para el desarrollador web, que nos valdrán también a nosotros, los desarrolladores de extensiones.

2.4. Depuración de extensiones

La depuración de extensiones, es algo complicado, debido a nuestro precario y casero IDE. Pero podremos disponer de la herramienta dump(), un comando Javascript con el que poder sacar texto por la consola (por la consola terminal desde donde ejecutemos Firefox).

Pero para poder usarlo, debemos habilitarlo (siempre en nuestro perfil "dev"). Para ello, debemos crear la entrada lógica browser.dom.window.dump.enabled , y ponerlo a "true". Hay dos formas de hacerlo (o más), las dos igual de simples:

• Creando el fichero user.js en el directorio del perfil "dev" (c:\extensiones\firefox-dev.profile\user.js o ~/extensiones/firefox-dev.profile/user.js), con el contenido:

  • user_pref("browser.dom.window.dump.enabled", true);

• Abriendo la url "about:config" en el navegador Firefox, haciendo clic derecho en la lista, y seleccionando "Nuevo > Lógico". Introducimos en la caja browser.dom.window.dump.enabled para crear la entrada, y luego hacemos doble clic en dicha entrada para cambiar su valor a "true".

Con esto, al abrir Firefox (con el comando "-console" que pusimos en nuestro script) irán apareciendo en la terminal los mensajes que enviemos mediante dump(). Por ejemplo:

dump("Hola mundo\n");

De esta manera, podremos introducir dentro del código Javascript de nuestra extensión puntos de control que ir monitorizando en el terminal.

2.5. Empaquetado de extensiones

Vamos a crear ahora también un script para empaquetar extensiones en paquetes XPI. Lo usaremos al final del siguiente capítulo, así que no lo describiremos hasta entonces, pero como es parte de nuestro IDE, será ahora, en este capítulo, cuando lo creemos.

Lo que hará el empaquetador es muy sencillo, tan sólo comprimir (en realidad se archiva sin compresión) el directorio de una extensión en un ZIP, y renombrarlo a XPI. Para lo cual, recomiendo utilizar el compresor 7zip a los que usen Windows.

Windows: firefox-pack.bat 

@echo off
rm %XPINAME%
cd %EXTENSIONDIR%
7z a -tzip -mx0 ..\%XPINAME% * -r

Antes de ejecutar ese batch, debemos poner en la variable XPINAME y en EXTENSIONDIR, el nombre del fichero de la extensión y el directorio con las fuentes de la extensión respectivamente:

Windows: 

SET XPINAME=miextension.xpi
SET EXTENSIONDIR=/misextensiones/miextension 

En Linux tenemos también 7zip, pero nos bastará con la herramienta zip. Dentro del directorio de la extensión ejecutamos:

Linux: 

$ zip -r0 ../miextension.xpi * 

Y con esto ya tenemos nuestro IDE listo para ser usado. En el próximo capítulo crearemos una extensión de prueba, el típico "Hola mundo", para ir tomando contacto con todos los elementos de una extensión.

NOTA: Esto lo hemos hecho para Firefox, pero Thunderbird funciona exactamente de la misma manera. Podemos crearno un perfil "dev" también en Thunderbird, y podremos crear extensiones también para Thunderbird. Tan sólo cambia el fichero de instalación (install.rdf) que trataremos en el siguiente capítulo.

Como recordaré en todos los capítulos, todo comentario, pregunta, sugerencia, propuesta, etc., serán tomadas en cuenta, y muy bien recibidas y agradecidas.