JetPack

El desarrollo de extensiones para Firefox siempre ha sido un poco difícil de emprender, hay que aprender todo un sistema nuevo para la representación de la interfaz gráfica (llamado XUL) y además las APIs de Firefox (a través de XPCOM) no son muy “intuitivas”. Claro está que a través de estos métodos uno puede cambiar cualquier cosa que se le ocurra del navegador… Creo que citando a un personaje bastante conocido todo se va a entender mejor: “Un gran poder conlleva una gran responsabilidad”.

Es para solucionar todo esto que Mozilla decidió crear una nueva manera de crear extensiones: el Add-on SDK. Iniciado con el nombre código “Jetpack”, el Add-on SDK es un conjunto de herramientas para hacer más fácil y cómodo el desarrollo de extensiones, ¡y también el uso de las mismas!

Como desarrollador de extensiones, los beneficios son también muy tentadores. Para comenzar, todo se programa en Javascript, incluso las APIs. No hay que aprender ninguna cosa rara de XPCOM ni nada, las APIs fueron diseñadas con el desarrollador en mente. Son todas muy simples y sobre todo, están bien documentadas. Pero las sorpresas no terminan ahí, para la interfaz gráfica se utiliza HTML y CSS, ¡incluso se pueden utilizar todas las ventajas de HTML5 y CSS3 disponibles en Firefox! Un buen post sobre el SDK es éste ultimo de Jono (en inglés) donde muestra como en pocos pasos logró una extensión funcional.

Modo de Uso – Comenzando

Desde el sitio oficial podemos obtener la descarga y así comenzar a trabajar creando extensiones para firefox.

Para poder comenzar necesitamos tener instalado python 2.5 o 2.6, las version 3.0 todavía no es soportada.

Después de extraer el archivo .zip que bajamos desde jetpack tenemos que ingresar en el directorio y ejecutar el siguiente comando:

   source bin/activate

 

En pc’s windows hay que hacerlo desde una terminal también, corriendo:

 

   bin\activate.bat

 

Luego ejecutamos:

   cfx docs

 

Esto va a iniciar la documentación dentro del navegador.

 

Creando Extensiones

El comando cfx tiene el siguiente formato:

   cfx
   Usage: cfx [options] command [command-specific options]

   Supported Commands:
     docs       - view web-based documentation
     init       - create a sample addon in an empty directory
     test       - run tests
     run        - run program
     xpi        - generate an xpi

Para crear una extensión nueva, necesitamos crear un nuevo directorio y luego ejecutar:

   cfx init

Eso crea toda la estructura necesaria.

Este comando es usado dentro de JetPack para crear la estructura de directorios de nuestra extensión. Luego de ejecutarlo proboca unsa salida como esta:

   * lib directory created
   * data directory created
   * test directory created
   * doc directory created
   * README.md written
   * package.json written
   * test/test-main.js written
   * lib/main.js written
   * doc/main.md written

En este momento nuestra extensión está lista para ser testeada y podemos probarla ejecutando:

   cfx test

Y luego:

   cfx run

En primer lugar, cfx init crea la estructura de directorios que nuestra extensión necesita:

/data contiene recursos como iconos o strings. Podemos acceder al contenido del subdirectorio data desde el código de nuestra extensión usando el módulo self del Add-on SDK.

/doc contiene la documentación para nuestra extensión.

/lib contiene los módulos javascript implementados en nuestra extensión.

/test contiene codigo para unit testing.

Luego, cfx init crea un archivo llamado package.json en el directorio raíz de nuestra extensión. Este archivo contiene información sobre nuestra extensión y debería verse como esto:

   {
       "name":"translator",
       "fullName":"translator",
       "description":"This is an example of addon description.",
       "author":"",
       "license":"MPL",
       "version":"0.1"
   }

Finalmente, cfx init crea algunos archivos de ejemplo en doc, lib y test que tendremos que reemplazar.

 

Ejecutando Extensiones

Para ejecutar una extensión, solo necesitamos ejecutar:

   cfx run

Eso crea abre una nueva ventana firefox donde estará cargada nuestra extensión y podemos probar su funcionamiento.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s