Cómo crear y publicar tu primera extensión para Firefox

Hay diferentes formas de hacer extensiones para Firefox. En este tutorial veremos como crear extensiones para el navegador de Mozilla usando el Add-on SDK de este navegador gratuito y totalmente de código abierto.

Entre los características y beneficios tenemos:

• Se pueden crear fantásticas extensiones sólo con javaScript, HTML y CSS.
• Cualquiera pueda crear y publicar sus extensiones en el directorio de Mozilla, gratis.
• No tienes que preocuparte de ningún consumo, memoría, ancho de banda, etc.
• Podemos llegar a más gente a través de las búsquedas en el directorio de extensiones.

Sin embargo, antes de que te pongas a ello has de saber el "pequeño" inconveniente de usar este método: Solo funciona en el navegador web de Mozilla; Firefox. En el epígrafe Add-on SDK vs WebExtensions te hablo de ello.

Tutorial para crear extensiones para Firefox

El primer paso es instalar el kit de desarrollo de software, o SDK, por sus siglas en inglés. Aquí tienes las instrucciones en ingles para instalar el SDK. Además de instalar node.js, también tendrás que instalar la herramienta jpm, como se indica.

También te será útil tener Firefox instalado para poder probar tu aplicación. Esta es una versión para desarrolladores, incluye la extensión Valence con la que analizar y depurar el funcionamiento de tu extensión. Para escribir código recomiendo Notepad++.

Todas las extensiones para Firefox necesitan un archivo llamado 'package.json'. Este podemos crearlo automáticamente con la herramienta jpm que hemos instalado previamente. Sigue estos pasos desde la terminal de tu sistema:

• Crear un directorio: mkdir mi-extension
• Desplazarse hasta él: cd mi-extension
• Ejecutar el comando: jpm init

Se te requerirá información que puedes optar por desatender pulsando el botón Intro hasta que aparezca un mensaje para aceptar los datos para crear finalmente el archivo.

Una vez hecho esto ya puedes estar feliz; ya tienes tu primera extensión para el navegador Firefox. Pero todavía nos queda empaquetarla para poder instalarla (próximamente ya no habrá que hacer esto).

Pero antes de eso llevaremos a cabo unas modificaciones de nuestra extensión. En esta página de Mozilla está el mismo ejemplo que usaremos en esta entrada.

Añadiendo funcionalidades a tu recién creada extensión

Ahora ya puedes editar el código de tu extensión para Firefox. Si vas al directorio que acabas de crear verás que hay varios archivos. Uno es el mencionado package.json, hay también una carpeta y otro archivo README.md y otro llamdo 'index.js'. 

Este archivo index.js es el "centro de operaciones". Desde él se lleva a cabo toda la "acción" de la extensión. Vamos a añadirle unas funcionalidades a la extensión que acabas de crear. Abre el archivo index.js desde un editor de textos y pega en él el siguiente ejemplo:

var botones = require('sdk/ui/button/action');
var tabs = require("sdk/tabs");
var boton = botones.ActionButton({
  id: "enlace",
  label: "Visita este enlace",
  icon: {
    "16": "./icon-16.png",
    "32": "./icon-32.png",
    "64": "./icon-64.png"
  },
  onClick: manejaelClick
});
function manejaelClick(state) {
  tabs.open("http://www.mozilla.org/");
}

Si quieres seguir progresando en el desarrollo de tu extensión, continúa con los tutoriales que tiene Mozilla preparados en su Mozilla Developer Network. Todo lo que necesitarás para llevar a cabo tus extensiones son conocimientos de programación y más o menos habilidad y tiempo.

Un interciso: Add-on SDK vs WebExtensions

Notarás que además del Add-on SDK está muy presente el WebExtensions. Este último es la nueva forma con la que se desarrollarán las extensiones para el navegador Firefox.

Los beneficios de WebExtensions son mucho mayores que los de su rival. Firefox está migrando todavía hacia este sistema pero en el futuro es más que probable que el SDK original quede obsoleto.

Así que realmente esta entrada principalmente es para fines educativos (y porque con ello están hechas las versiones actuales de mi primera extensión), ya que sería más realista crear extensiones mediante WebExtensions. Seguramente lo veamos próximamente.

Empaquetar y probar la extensión en tu navegador

Para llevar a cabo el empaquetado de tu extensión dirígete desde el terminal hasta el directorio en donde están los archivos de tu extensión. Allí escribe jpm xpi y espera unos segundos.

Ahora ya puedes instalar tu extensión como un archivo externo (mi-extension.xpi) desde la sección Add-ons de tu navegador Firefox. Todavía no está disponible para todo el mundo, solo para ti.

Hacer pública tu extensión: Subirla al directorio

Antes de poder subir tu extensión al directorio de herramientas deberás crear una cuenta. Una vez la tengas echa dirígete al menú Herramientas y pulsa en Envía un nuevo complemento.

Selecciona el archivo XPI que acabas de crear y súbelo. Índica su compatibilidad con los principales sistemas (si solo usan la web generalmente es con compatible con todos) y sigue los pasos hasta que puedas escoger el modo de verificación.

Podrás encontrar toda la ayuda necesaria en la comunidad y respondiendo a los correos electrónicos cuando la revisión de tu extensión no se haya producido con éxito.

Probablemente en una próxima entrada veremos algunas opciones más y algunas ideas para crear una extensión que nos genere ingresos cuando otras personas la usen. Suscríbete a mi blog para estar al tanto de todas ellas.