Este tutorial lo realizaré usando Ubuntu 8.10 y Firefox 3.0.8. Para comandos específicos de tu sistema operativo puedes revisar la documentación de Mozilla

¿Qué necesito saber?

• Javascript
• Nociones de XML
• Estar familiarizado con la línea de comando
• Conocimiento básico de inglés (sobre todo para leer información externa a esta guia)
• Sed de aprendizaje

En este primer post, realizaremos lo siguiente:

• Estableceremos un entorno de desarrollo sencillo
• Crearemos una pequeña extension de prueba que nos permitirá probar nuestro entorno.

Estableciendo el entorno de desarrollo sencillo

Lo primero que debemos hacer es crear un perfil distinto al que usamos en Firefox con la finalidad de que, en caso de ocurrir algún error grave, no dañemos los datos que tenemos guardados en nuestro firefox como Marcadores, Extensiones,Preferencias, etc.

Esto lo conseguimos corriendo Firefox desde la línea de comandos con los siguientes parámetros:

firefox -no-remote -P dev

Con esto estamos corriendo Firefox usando el Perfil “dev”. Al correrlo por primera vez, se lanzará el Administrador de perfiles de firefox. Pulsaremos el botón “Create Profile..” y estableceremos el nombre de nuestro perfil de desarrollo “dev”, de esta forma tendremos dos perfiles distintos: default, que es el predeterminado y dev, que será nuestro perfil de desarrollo.

Para correr Firefox con este perfil sin usar la línea de comandos, podemos crear un acceso directo o un launcher dependiendo de nuestro sistema operativo.

Una vez iniciado nuestro navegador con el perfil de desarrollo, procedemos a modificar la configuración que nos será útil en el momento del desarrollo. Esto lo realizamos ingresando ‘about:config’ en la barra de direcciones. Obtendremos una advertencia. Ya que somos desarrolladores y sabemos lo que hacemos (ajá), aceptamos y prometemos con la mano en el pecho que serémos cuidadosos.

Utilizaremos el Filtro para buscar las variables de configuración. En caso de no existir las crearemos con Click derecho -> Nuevo -> Lógico. Estas son las variables que modificaremos y el valor que debemos establecerle.

• javascript.options.showInConsole = true. Guarda los errores en los archivos del chrome en la Consola de errores.
• nglayout.debug.disable_xul_cache = true. Deshabilita el cache de XUL de tal forma que los cambios a las ventanas y diálogos no requieren reiniciar.
• browser.dom.window.dump.enabled = true. Nos permite usar la sentencia dump() para imprimir en la consola standard. Ver window.dump para mas información.
• javascript.options.strict = true. Habilita las advertencias estrictas de JavaScript en la consola de errores.
• extensions.logging.enabled = true. Enviará información más detallada acerca de problemas con la instalación y actualización en la Consola de errores.

Posteriormente instalaremos alguna extensión que nos ayude en la creación y pruebas de nuestra nueva extensión. Para este tutorial usaré la extensión Extension Developer’s Extension que es específica para nuestra tarea y es un todo en uno para el desarrollo de extensiones. Si encuentras más útil alguna otra, puedes usarla y si crees que es mejor que ésta, coméntalo y comparte.

Descargamos e instalamos la extensión de la forma clásica presionando el botón verde que dice “Add to Firefox” y reiniciamos el navegador. (Automáticamente reiniciará en el perfil de desarrollo). Encontraremos los comandos de la extensión en el menú Herramientas.

Ahora creamos una carpeta en donde comenzaremos a desarrollar nuestra extensión. Puede ser en cualquier lugar, ya que la extensión que acabamos de instalar nos permite indicarle en qué directorio trabajaremos. Yo específicamente hice una carpeta ‘extensiones’ dentro de la que trabajaré todas las extensiones que voy a hacer.

Dentro de esta carpeta crearemos nuestra primera extensión que nos servirá de prueba para comenzar nuestro desarrollo. Esta carpeta será llamada ‘hola_mundo’.

Una vez creada la carpeta vamos al menú Herramientas -> Extension Developer -> Extension Builder.  En esta ventana comenzaremos a crear nuestra nueva extensión. El primer dato solicitado es “Working Directory” que será específicamente la carpeta de nuestra nueva extensión. Notaremos que al seleccionar la carpeta de nuestra extensión (hola_mundo). Se le asignará automáticamente el nombre de la carpeta a nuestra extensión (aunque podremos cambiarlo manualmente).

Una extensión es un archivo empaquetado en un formato zip con una extensión xpi (pronunciada zippy). Dentro de él tendremos la siguiente estructura básica de archivos (extisten más carpetas y compontentes, pero éstos son los mínimos requeridos).

install.rdf
chrome.manifest
chrome\
   content\

El archivo install.rdf es un archivo xml con una estructura definida que contendrá información acerca de nuestra extensión como el nombre del creador (osea nosotros), la versión de la extensión, las versiones de firefox en donde funciona, etc. Dado que de momento estamos estableciendo el entorno y la extensión de desarrollo nos genera el archivo de una forma más sencilla, aún no ahondaremos en las opciones completas del manifiesto de instalación.

El archivo chrome.manifest es otro archivo clave para la extensión, en él registraremos nuestros archivos de la extensión. Así que creamos nuestro archivo de texto chrome.manifest y guardamos lo siguiente en él.

content hola_mundo chrome/content/
overlay chrome://browser/content/browser.xul chrome://hola_mundo/content/hola_mundo.xul

De esta manera estamos diciendo a Firefox que registre el contenido “hola_mundo” que se encuentra en la ruta (relativa a chrome.manifest), ‘chrome/content/’. No olvides la diagonal al final, ya que de no ser así, el contenido no será registrado. En la línea siguiente registramos una superposición al chrome original del navegador mediante un archivo XUL que crearemos en un momento.

Luego creamos la carpeta ‘chrome’ y dentro de ella la carpeta ‘content’. Dentro de ésta última es donde crearemos nuestro archivo XUL.

XUL es una estructura XML que utiliza Firefox para definir y presentar sus elementos en la ventana, e incluso la ventana misma (esto se denomina Chrome). Con un archivo XUL podemos extender y manipular la estructura y disposición de los elementos en la ventana del navegador.

CHROME es el nombre que se le da precisamente a los elementos del navegador que no forman parte del sitio que estamos visitando, como la barra de estado, botones de navegación, etc. No se debe confundir con Google Chrome, ya que precisamente se le dio ese nombre al navegador de manera sarcástica ya que éste carece de CHROME.

Creamos un archivo llamado hola_mundo.xul dentro de nuestra carpeta content y le agregamos el siguiente texto:

<?xml version="1.0"?>
<overlay id="hola_mundo"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<statusbar id="status-bar">
    <statusbarpanel id="mi-panel" label="Hola Mundo !"  />
</statusbar>
</overlay>

Con este último archivo estamos modificando la estructura básica del navegador. Estamos superponiendo un panel al elemento status-bar con el identificador ‘mi-panel’ y una etiqueta “Hola Mundo!”.

Ahora volvemos a la Herramienta Extension Builder y volvemos a cargar nuestra carpeta “Hola Mundo”. Ahora editaremos la información básica de nuestra extensión, presionamos el botón “Edit install.rdf” y nos presentará un formulario que llenaremos con la información de nuestra primera extensión.

Presionamos “Save” (No hay algun aviso explícito de que se haya guardado, así que confiemos en que lo hizo) y presionamos Close para cerrar la ventana.

Ahora, podemos notar que ya está activo el botón “Build Extension”, lo presionamos para que nos genere el archivo XPI. Vemos en la barra de estado que aparece la leyenda: Built hola_mundo.xpi

Ahora vamos a nuestra carpeta de la extensión y encontraremos nuestra extensión empaquetada y lista para probar. La abrimos con nuestro Firefox de desarrollo. y la instalamos como cualquier extensión normal. Nos pedirá reiniciar Firefox.

Al reiniciarse veremos que nuestra extensión ¡ya está corriendo en Firefox !. En la barra de estado en la esquina inferior derecha observaremos nuestra superposición “Hola Mundo!”. Felicidades !! acabamos de dar el primer paso en la creación de extensiones.

Más adelante veremos tareas más avanzadas y cómo podemos ayudarnos con la extensión para desarrolladores de extensiones que instalamos en nuestro Firefox de desarrollo.

Espero tus comentarios, trackbacks, dudas y sugerencias.