4

[WebExtensions] – Escribiendo el futuro!

26Oct
en API, Complementos, Tutoriales, WebExtensions

El futuro del desarrollo de extensiones de los productos de Mozilla, dígase Firefox para escritorio, Firefox en sus versiones móviles [Android y iOS (producto futuro)] y el sistema operativo móvil Firefox OS. Todo lo anteriormente expuesto en un futuro deberá ser implementado en una nueva API llamada WebExtensions, la cual se le está incorporando desde hace un tiempo a cada uno de los productos.

La principal ventaja de este cambio lo tendrán los desarrolladores pues hará mucho más fácil el desarrollo de extensiones para los navegadores web, ya que la principal ventaja de esta API es que te permite crear extensiones o complementos compatibles con Extensions API, el cual es usado por los navegadores Chrome/Chromium y Opera, o sea que podemos crear extensiones con esta API y luego usarlas fácilmente en otros navegadores como Chrome/Chromium y Opera, además de que se pueden traer las extensiones creadas para esos navegadores hacia Firefox con la misma facilidad. Agregar que esta API es altamente compatible con el proyecto Electrolysis encargado de manejar el navegador en varios procesos independientes. Por acá ya hablamos un poco sobre esta API.

Basándonos en este ejemplo de extensión de mi artículo anterior, lo que haremos será portar esa misma extensión usando WebExtension para luego verlo prácticamente funcionando en los navegadores de escritorio Firefox y Chrome. Antes de continuar, comentar que vamos a necesitar una versión de Firefox para escritorio compatible con dicha API, por lo que tendremos que usar la versión 43 que está en el canal para desarrolladores y podemos obtenerla desde nuestra página de descargas. Además de que esta tecnología es experimental por lo que muchas cosas pueden no funcionar si intentan hacer algo más de lo que aquí muestro. Es que algunos módulos no están completamente listos o soportados en el bug 1214433 podemos seguir el desarrollo y saber cuantas cosas deben estar solucionadas para tener la versión 1.0 estable. Si quieren saber que es lo que pueden usar o que está implementado hasta el momento y que aún no funciona pueden consultar esta página de MDN con la información necesaria y esta que es la página principal de la nueva API.

Escribiendo el futuro:

Luego de un poco de teoría vamos a la práctica. Primeramente creamos una carpeta y dentro de ese directorio creamos un archivo de nombre manifest.json que es donde se inicializa todos los datos importantes del complemento, yo lo haré desde la consola de GNU/Linux, ustedes pueden hacerlo visualmente o como gusten:

mkdir webext-ffxmania
cd webext-ffxmania
touch manifest.json

Abrimos el archivo manifest.json y agregamos el contenido siguiente:

{
  "name": "Extensión Web Firefoxmania!",
  "description": "Complemento para Firefox creado con la nueva API WebExtensions, compatible con Chrome/Chromium y Opera que apunta a Firefoxmania!",
  "manifest_version": 2,
  "version": "1.0",
  "applications": {
    "gecko": {
      "id": "webextffxmania@firefoxmania.uci.cu"
    }
  },
  "background": {
    "scripts": ["index.js"],
    "persistent": false
  },
  "permissions": [
    "tabs"
  ],
  "icons": {
    "48": "icon.png",
    "128": "icon.png"
  },
  "browser_action": {
    "default_icon": {
      "19": "button.png",
      "38": "button.png"
    },
    "default_title": "Extensión Web Firefoxmania!"
  }
}

En el archivo anterior se puede deducir que se está definiendo los elementos respectivos a nuestro complemento, comentando un poco cada uno sería:

  • “name”, “description” y “version” = se refiere a los datos identificativos del complemento
  • “applications > gecko > id” = que da el identificador para que Firefox pueda identificar internamente y manejar tu complemento
  • “background > scripts” = se ponen los archivos JavaScript que usará el complemento
  • “permission” = detalla los permisos que se necesitarán
  • “icons” = señala los archivos de iconos en diferentes dimensiones para el complemento
  • “browser_action” = que es el módulo del API que vamos a usar en nuestro complemento de ejemplo

Cualquier duda con los elementos anteriores puedes ponerla en los comentarios.

El siguiente paso será crear en nuestra carpeta el archivo index.js puesto en el manifest que es el que se encargará de realizar las funciones de nuestros complemento:

touch index.js

Abrimos el archivo y ponemos el siguiente contenido:

'use strict';

/*global chrome:false */

chrome.browserAction.onClicked.addListener(function(aTab) {
  chrome.tabs.query({'url': 'https://firefoxmania.uci.cu/'}, (tabs) => {
    if (tabs.length === 0) {
      // Si no existe algun tab con esta URL la creamos y vamos a ella!
      chrome.tabs.create({'url': 'https://firefoxmania.uci.cu/', 'active': true});
    } else {
      // Si existe un tab con la URL entonces cambiamos el foco a ese tab!
      chrome.tabs.query({'url': 'https://firefoxmania.uci.cu/', 'active': true}, (active) => {
        if (active.length === 0) {
          chrome.tabs.update(tabs[0].id, {'active': true});
        }
      });
    }
  });
});

En el archivo anterior lo que hacemos es crear una función listener que está escuchando sobre la imagen button.png que definimos en el manifest y comprueba si existe alguna pestaña(tab) con la URL que le proporcionamos y si no existe, creamos la pestaña con esa URL y vamos a ella, en caso contrario busca la URL y verifica si esa pestaña (tab) tiene el foco sino entonces le da el foco y vamos a ella.

Bueno básicamente esto es todo lo que teníamos definido para la funcionalidad de este complemento y lo tenemos casi listo, solo nos queda para probar nuestro complemento empaquetar nuestros archivos en un xpi que no es más que un archivo zip que tiene los archivos necesarios para hacer funcionar nuestro complemento. Para realizar el empaquetamiento necesitamos tener instalado el paquete 7-Zip, pero como estoy en GNU/Linux me lo voy a instalar desde mi repositorio con mi manejador de paquetes y luego voy a unir los archivos en un xpi para tener el instalador de mi complemento listo y vamos al lío:

sudo apt install p7zip
7z a webext-ffxmania.xpi manifest.json icon.png index.js button.png

Como ya estabamos en el directorio del complemento solo sería instalar el paquete, en mi caso desde ubuntu y luego el comando para crear el xpi. A mi me gusta usar 7z pero creo que el paquete zip de GNU/Linux debe funcionar igualmente.

Listo, con esto ya tenemos el complemento preparado para instalar, como dije al principio. Como mínimo debemos usar la versión 43 que está ahora mismo en el canal para desarrolladores(aurora) que es donde está la primera parte de la API implementada. Presionando “Crtl + o” nos sale una pestaña donde debemos buscar nuestro archivo generado webext-ffxmania.xpi y nos debe preguntar si queremos instalar este complemento sin ser verificado, damos instalar y listo, deberían ver algo como lo siguiente:
Screenshot from 2015-10-25 02:10:12En caso de un error diciendo que no se puede instalar porque el complemento no pudo ser verificado es por el nuevo mecanismo de firmado que se está implementando desde hace algunas versiones y vendrá por defecto en la versión 44 de Firefox donde no se pueden instalar complementos que no estén revisados/firmados por Mozilla, permitiéndolo solamente en las versiones para desarrolladores (Developer – Aurora) y compilaciones diarias(Nigthly) mediante una preferencia, por lo que deben abrir la URL about:config y buscar la preferencia “xpinstall.signatures.required” cambirla a false y listo con esto ya pueden instalar complementos sin firmar.

Bien ahora muestramelo en Chrome:

Bueno para probar la compatibilidad vamos a instalar el complemento anteriormente realizado en otro navegador compatible, abrimos el navegador Chrome en la URL “chrome://extensions/” y habilitamos el checkbox del modo desarrollador y seleccionamos “Cargar extensión descomprimida” y buscamos la carpeta donde tenemos los archivos del complemento y listo!, nuestro complemento funcionando en Chrome.
Screenshot from 2015-10-25 02:23:25

Nos muestra una advertencia sobre la llave “applications” de nuestro archivo manifest, pero no pasa nada, es una key que necesita el complemento en Firefox, de todas maneras el complemento funciona bien en Chrome/Chromium que es lo que he podido probar, si alguien puede probarlo en las última versiones de Opera me dice en los comentarios, aunque en teoría debería funcionar sin problemas.

Conclusiones finales

Para concluir este tutorial quería comentarles que es un poco molesto tener que empaquetar la extensión cada vez que hago un cambio mientras desarrollamos para probarlo en Firefox, pero ya está abierto el bug 1185460 que proveerá un parche para añadir esta funcionalidad al navegador al igual que permite su homólogo, aunque de momento he encontrado otra manera de hacer la tarea del empaquetamiento pero lo dejaré para otro tutorial. Con el archivo empaquetado quizás el próximo paso sería subir la extensión para AMO, el repositorio principal de complementos de Mozilla pero de momento no están soportados los complementos desarrollados con esta API, pero ya tenemos el bug 1210037 para corregir este problema.

Debajo dejo los enlaces hacia los repositorios de código donde está el complemento de ejemplo para que lo revisen y tomen el resto de archivos como imágenes que no incluye este artículo para no hacerlo tan extenso y como siempre espero sus impresiones en los comentarios.

Código fuente en Gitlab (Disponible solo para la red UCI)

Código fuente en Github

4 Comentarios

  1. Nilmar dice:

    Parece interesante esta nueva forma de desarrollar complementos y aunque aun no es estable, es muy bueno que vayamos aprendiendo desde ahora. Me gustaría que se pensara con las API existente la posibilidad de ir migrando los complementos ya existentes como primer paso. Felicidades!!!

  2. Yunier J dice:

    En MDN estamos traduciendo todo lo referente a WebTextensions en español
    Como a developer.chrome.com no podemos acceder pues tendremos que mejorar la documentación.
    https://developer.mozilla.org/es/docs/Mozilla/Add-ons/WebExtensions

  3. Pochy dice:

    Bien!, es muy importante tener todo documentado para mejor comprensión, si tuviera mejor conexión ayudaría!

Dejar un comentario

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