2

Automatización de los xpi para WebExtensions con gulp!

29Oct
en API, Complementos, Firefox, nodeJS, Tutoriales, WebExtensions

En mi entrada anterior una de las cosas que encontraba como deficiencia, es que aún Firefox no tiene soporte para probar complementos con la nueva API WebExtensions desde el código fuente como lo hace Chrome/Cromium, esta característica fue muy solicitada por la comunidad y próximamente debe ser incorporada en el bug 1185460.

Mientras el bug es solucionado les muestro una manera de automatizar la creación del xpi, siendo el formato de complementos para Firefox.

Entrando en materia:

En resumen, lo que haremos será instalarnos la herramienta “gulp”, paquete de nodejs que se usa para crear tareas escribiendo código javascript, con “gulp” crearemos un sencillo script con el contenido necesario para crear el xpi del complemento que estemos desarrollando, para irlo probando mientras vamos haciendo cambios en el código que escribimos.

Antes de comenzar es necesario que tengan algunas dependencias instaladas, en mi caso que uso GNU/Linux, necesito los paquete “nodejs-legacy” y “npm” con su repositorio de paquetes de nodejs configurado y listo para instalar paquetes, cualquier duda pueden mirar mi ejemplo de como instalarlos en esta entrada. Lo siguiente sería irnos a la carpeta del complemento, instalar los paquetes necesario, que serían “gulp” y “gulp-zip”, creamos el archivo gulpfile.js que tendrá nuestra tarea a ejecutar:

cd ~/www/webext-ffxmania
npm install gulp gulp-zip
touch gulpfile.js

Con el archivo gulpfile.js creado le adicionamos el siguiente contenido:

'use strict';

var gulp = require('gulp');
var zip = require('gulp-zip');

var list = ['manifest.json', 'index.js', 'button.png', 'icon.png'];
var xpi = 'webext-ffxmania.xpi';

gulp.task('default', function () {
  gulp.src(list)
    .pipe(zip(xpi))
    .pipe(gulp.dest('.'));
});

Brevemente lo que hace el script es incluir los módulos de nodejs necesarios, crear la lista de elementos que tendrá el compactado y el nombre que tendrá la salida del archivo, luego se llama la función task para crear la tarea y dentro se le actualizan los parámetros, como la dirección de los archivos a incluir, el nombre del archivo salida y el destino de este. Solo nos queda probar que funciona y para ello ejecutamos el comando:

gulp

El comando anterior ejecutado de esa manera lo que hace es buscar en ese directorio un archivo de nombre gulpfile.js y dentro del archivo una tarea de nombre default para ejecutar. Con esto ya tenemos una tarea para ejecutar y crear el archivo xpi con los archivo necesario para nuestro complemento. Esto es algo sencillo hecho con gulp para demostrar de que va la cosa, pero gulp tiene mucho potencial que se puede explotar y podemos aprovechar en nuestros desarrollos.

Como siempre, debajo dejo el acceso a los repositorios de código para que puedan revisar los cambios que he realizado en el complemento y espero sus impresiones en los comentarios.
Código fuente en Gitlab (Disponible solo para la red UCI)

Código fuente en Github

2 Comentarios

  1. Nilmar dice:

    Perfecto, y todo con js jejejejeje.

Dejar un comentario

¿Eres humano? Entonces resuelve esta operación: * Límite de tiempo se agote. Por favor, recargar el CAPTCHA por favor.