En este artículo abordaremos la creación de una WebExtension para Firefox, desde el comienzo hasta el final. Los add-on solo agregan un borde rojo a cualquiera de las páginas cargadas desde "mozilla.org" o cualquiera de sus subdominios.
El código fuente de este ejemplo se encuentra en el GitHub: https://github.com/mdn/webextensions-examples/tree/master/borderify.
Primero, necesitas tener un Firefox version 45 o posterior.
Escribiendo una WebExtension
Crea una nuevo directorio e ingresa en él:
mkdir borderify cd borderify
manifest.json
Ahora crearemos un nuevo archivo llamado "manifest.json" directamente en la carpeta "borderify". Debe tener el siguiente contenido:
{
"manifest_version": 2,
"name": "Borderify",
"version": "1.0",
"description": "Adiciona un borde rojo sólido a todas las paginas que calcen con mozilla.org.",
"icons": {
"48": "icons/border-48.png"
},
"applications": {
"gecko": {
"id": "[email protected]",
"strict_min_version": "45.0"
}
},
"content_scripts": [
{
"matches": ["*://*.mozilla.org/*"],
"js": ["borderify.js"]
}
]
}
- Los primeros 3 parámetros: manifest_version, name, y version, son obligatorios, y contienen metadatos básicos para la add-on.
- description es opcional, pero se recomienda: Se muestra en el Administrador de Add-ons.
- icons es opcional, pero recomendado: te permite especificar un icono para el add-on, se mostrará en el Administrador de Add-ons.
applicationses obligatorio para Firefox, y especifica la ID del add-on. También puede ser utilizado para especificar el número mínimo y máximo de la versión de Firefox soportadas por este add-on.
El parámetro más interesante aquí es content_scripts, el cual le dice a Firefox que cargue el script en las páginas Web, cuyas URL coincidan con un patrón especifico. En este caso, le estamos pidiendo a Firefox que cargue el script llamado "borderify.js" en todas las paginas HTTP o HTTPS cargadas desde "mozilla.org" o cualquiera de sus subdominios.
icons/border-48.png
El add-on debería tener un icono. Este se mostrará junto al listado de add-ons en el Administrador de Add-ons. Nuestro manifest.json promete que tendremos un icono en el directorio "icons/border-48.png".
Crea el directorio "icons" dentro de la carpeta "borderify". Almacena ahí el icono y nómbralo "border-48.png". Puedes utilizar el de nuestro ejemplo, el cual se obtuvo a partir del Google Material Design iconset, y es utilizado bajo los términos de la licencia Creative Commons Attribution-ShareAlike.
Si eliges emplear tu propio icono, este debe ser de 48x48 pixeles. También puedes aplicar un icono de 96x96 pixeles, para resoluciones mayores, y si haces esto, se especifica como la propiedad 96 en el objeto icons del manifest.json:
"icons": {
"48": "icons/border-48.png",
"96": "icons/border-96.png"
}Alternativamente, puedes aplicar un archivo SVG ahí, y este se escalará apropiadamente.
borderify.js
Finalmente, crea un archivo de nombre "borderify.js" directamente en el directorio "borderify". Y déjale el siguiente contenido:
document.body.style.border = "5px solid red";
Este script se cargara que coincidan con el patrón dado en el parámetro content_scripts del archivo manifest.json. El script tiene acceso directo al documento, de la misma manera que los scripts cargados por la propia página.
Probandolo
Lo primero, verifica que tienes todos los archivos en su lugar:
borderify/
icons/
border-48.png
borderify.js
manifest.json
A partir de Firefox 45, se pueden instalar WebExtensions temporalmente desde el disco.
Abre "about:debugging" en Firefox, da click en "Cargar complemento temporal" y selecciona tu archivo manifest.json:
El add-on se encontrará instalado, y lo estará hasta que reinicies Firefox.
Para verificar, visita "about:addons" para abrir el Administrador de Add-ons. Deberás ver el Add-on en la lista, con su icono, nombre y descripción:
Ahora intenta ver una página bajo "mozilla.org", y deberías ver un borde rojo alrededor de la página:
Experimenta un poco. Cambia el color del borde, o has algo más en el contenido de la página. Si actualizas el script de contenido, recarga la página objetivo, y podrás ver los cambios en el momento:
Nota, piensa, que si modificas el manifest.json, deberás recargar manualmente el add-on. Por el momento, esto significa que necesitas reiniciar Firefox, y cargar el add-on en about:debugging otra vez. Se está trabajando en mejorar esto.
Empaquetado y publicación
Para que otras personas puedan utilizar tu add-on, necesitas empaquetarlo. Los add-ons de Firefox son empaquetados como archivos XPI, los cuales son meros archivos ZIP con una extensión "xpi".
El truco está en que el archivo ZIP debe ser un ZIP de los archivos, no del directorio. Por lo que para crear el XPI a partir de los archivos de borderify, es necesario navegar a la carpeta "borderify" en la línea de comandos y luego ejecutar:
zip -r ../borderify.xpi *A partir de Firefox 43 en adelante, los add-ons deben estar firmados antes de que puedan ser instalados en Firefox. Se puede quitar esta restricción solamente en Firefox Developer Edition o Firefox Nightly, siguiendo estos sencillos pasos:
- escribe about:config En la barra de navegación de Firefox
- en el cuadro de búsqueda escribe: xpinstall.signatures.required
- dale doble click a la opción, o click derecho y selecciona "Toggle", para dejarlo en false.
Que sigue?
Ahora que tienes una idea acerca del proceso de desarrollo de una WebExtension para Firefox, continúa con: