Tu primera extensión

Crea una nuevo directorio y navega a él. Por ejemplo, en tu línea de comandos/terminal se hace de esta manera:

mkdir borderify
cd borderify

Ahora crearemos un archivo nuevo llamado "manifest.json" directamente en la carpeta "borderify". Añádale el siguiente contenido:

{
  "manifest_version": 2,
  "name": "Borderify",
  "version": "1.0",

  "description": "Agrega un borde rojo a todas las páginas web de mozilla.org.",

  "icons": {
    "48": "icons/border-48.png"
  },

  "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 extensión.
• description es opcional, pero se recomienda: Se muestra en el Administrador de Add-ons.
• icons es opcional, pero recomendado: permite especificar un ícono para la extensión, se mostrará en el Administrador de Add-ons.

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.

• Aprenda más acerca de los scripts contenidos.
• Aprenda más acerca de los patrones coincidentes.

"applications": {
  "gecko": {
    "id": "borderify@example.com"
  }
}

La extensión debería tener un ícono. Este se mostrará junto al listado de extensiones en el Administrador de Add-ons. Nuestro manifest.json promete que tendremos un ícono 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. (Aunque: si usas SVG y tu icono incluye texto, puedes usar la herramienta "convert to path" del editor SVG para aplanar el texto, de modo que se escalone con un tamaño/posición coherente).

• Aprender mas acerca de la especificación de iconos.

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 en las páginas 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.

• Aprender más acerca de los scripts de contenido.

Primero, verifica que tienes todos los archivos en su lugar:

borderify/
    icons/
        border-48.png
    borderify.js
    manifest.json

Abre "about:debugging" en Firefox, da click en "Cargar complemento temporal" y selecciona cualquier archivo en el directorio de la extensión:

La extensión se encontrará instalada, y lo estará hasta que reinicies Firefox.

Alternativamente, puede ejecutar la extensión desde la línea de comandos utilizando la herramienta web-ext.

Ahora pruebe visitando una página bajo "mozilla.org", y usted verá el borde rojo alrededor de la página:

Experimenta un poco. Edita el contenido del script para cambiar el color del borde, o haz algo más en el contenido de la página. Si actualizas el script de contenido, recarga los archivos de la extensión haciendo clic en el botón "Recargar" en about:debugging. Podrás ver los cambios en el momento:

• Aprende más sobre cómo recargar las extensiones

Para que otras personas puedan utilizar tu extensión, necesitas empaquetarlo y enviarlo a Mozilla para que lo firmen. Para que aprendas más sobre eso, mira "Publicando tu extension" (en-US).

Ahora que tienes una idea acerca del proceso de desarrollo de una WebExtension para Firefox, continúa con:

• escribe una extensión más compleja
• leer más acerca de la anatomía de una extensión
• explora los ejemplos de extensiones
• encuentra lo que necesitas para desarrollar, probar y publicar tu extensión
• leer acerca de las APIs de JavaScript disponibles para las extensiones.
• lleva tu aprendizaje más lejos