Yunier J publicó un artículo con la llegada de la nueva versión del SDK de Mozilla para la creación de addons, ahora les traigo un pequeño manual de cómo instalarlo(en Linux) y crear el primer addons(muy sencillo).

Instalación:

Primero descomprimimos el paquete y nos vamos al directorio donde lo desempaquetamos; le damos permiso de ejecución al archivo bin/activate y lo ejecutamos desde la terminal, luego ejecutamos cfx docs(situado en /bin). Con esto construimos la documentación y la muestra en el navegador por defecto en nuestro sistema, si no pasa esto, podemos verla en: doc/index.html.

Creando el primer addon:

Haremos un pequeño ejemplo: mostrar en una ventana el texto seleccionado de la página. Primero creamos nuestro directorio de trabajo: creamos una carpeta llamada mensaje(en nuestro caso) y luego cambiamos a este directorio con el comando cd:

 cd /home/docencia/Desktop/mensaje/

hecho esto creamos un alias para el script cfx del SDK(para facilitarnos un poco las cosas):

alias addonSDK=/home/docencia/Desktop/addon-sdk-1.2.1/bin/cfx

todo esto desde la terminal, a continuación construiremos el armazón para nuestro proyecto ejecutando:

addonSDK init

quedará así:

Descripción:

• /data: contiene archivos que van a ser usados por nuestro addon, como imágenes y otros archivos HTML, por ejemplo. Puedes acceder a este contenido usando el módulo self del SDK.
• /doc: contiene documentación acerca del addon.
• /lib: contiene los módulos JavaScript de tu addon.
• package.json: contiene información del addon, en nuestro ejemplo la modificamos así:

{
    "name": "mensaje",
    "fullName": "mensaje",
    "description": "Un pequeno addon",
    "author": "Firefoxmania",
    "license": "Totalmente libre",
   "version": "0.1"
 }

Adicionando funcionalidad:

En el directorio /lib abrir el fichero main.js y remplazar su contenido por:

// Importa las apis necesarias
var contextMenu = require("context-menu");
var selection = require("selection");

exports.main = function(options, callbacks){
  console.log(options.loadReason);

  //Crea un nuevo elemento en el menu contextual
  var menuItem = contextMenu.Item({

    label: "Ver texto seleccionado",

    // Muestra el elemento en el menu si hay texto seleccionado.
    context: contextMenu.SelectionContext(),

    //Cuando le damos click al elemento en el menu se ejecuta un script,
    //mostrando el texto seleciconado
    contentScript: 'self.on("click", function() {' +
                   '  var texto = window.getSelection().toString();' +
                   '  alert( texto );' +
                   '});'
  });
};

Ejecutando nuestro addon:

Ahora es tiempo de acción, ejecutemos:

addonSDK run

hecho esto nos mostrará el mensaje:

No 'id' in package.json: creating a new ID for you.
package.json modified: please re-run 'cfx run'

esto sucederá la primera ves que se ejecute, no os preocupéis, ejecuten de nuevo el comando anterior. Ahora se abrirá Firefox con el addon instalado(solo para probarlo), entremos a una página y seleccionemos un texto, demos clic secundario y wualaaa!! ahí está el elemento(con el texto: Ver texto seleccionado) en el menú, cuando damos clic en este nos sale(por ejemplo):

Empaquetado:

Para crear nuestro archivo xpi final, solo debemos ejecutar:

addonSDK xpi

y listo, revisamos en nuestro directorio de trabajo /mensaje e instalamos mensaje.xpi en nuestro Firefox, algo bueno es que no se necesita reiniciar el navegador.

OJO: el addon creado es compatible con Firefox 7.0 – 8.*, esto lo podemos cambiar ASI.

Hasta aquí hemos aprendido como instalar y crear nuestro primer addon, consulten la documentación del SDK y prueben hacer algo por ustedes mismos.