Anatomía de una extension

Una extensión se compone de una colección de archivos, empaquetados para su distribución e instalación. En este artículo vamos a repasar rápidamente los archivos que deben estar presentes en una extensión.

Toda extensión debe contener un archivo llamado "manifest.json". Este puede tener enlaces a otros tipos de archivos:

manifest.json

Este es el único archivo que debe estar presente en toda WebExtension. Este contiene los metadatos básicos acerca de la extensión, como su nombre, versión, y los permisos que esta requiere. También provee los enlaces a otros archivos de la extensión.

Mira la página de referencia manifest.json para ver todos los detalles.

Scripts en segundo plano

Las extensiones a menudo necesitan mantener estados de larga duración, o ejecutar operaciones a largo plazo, independientemente del tiempo de vida de una página web en particular o las ventanas del navegador. Para eso son los scripts en segundo plano.

Los scripts en segundo plano son cargados cuando la extensión es cargada y se mantienen cargados hasta que la extensión es deshabilitada o desinstalada. Tu puedes usar cualquier API de WebExtensions en el script, siempre y cuando hayas solicitado el permiso necesario.

Especificando los scripts en segundo plano

Puedes incluir un script en segundo plano usando la propiedad background en "manifest.json":

json
// manifest.json

"background": {
  "scripts": ["background-script.js"]
}

Puedes especificar múltiples scripts en segundo plano: Si lo haces, ellos se ejecutarán en el mismo contexto, justo como son cargados múltiples scripts en una página web.

Entorno del script en segundo plano

APIs del DOM

Los scripts en segundo plano se ejecuta en el contexto de páginas especiales llamadas páginas en segundo plano. Esto le da un variable global window, junto con todas las APIs estándar del DOM que proporciona.

No necesitas proveer tu propia página en segundo plano. Si incluyes un script en segundo plano, una página en segundo plano vacía se creará para ti.

Sin embargo, puedes escoger y proveer tu página en segundo plano como un archivo HTML separado:

json
// manifest.json

"background": {
  "page": "background-page.html"
}

APIs de WebExtension

Los scripts en segundo plano pueden usar cualquier API de WebExtension en el script, siempre que tu extensión tenga los permisos necesarios.

Acceso de origen cruzado

Los scripts en segundo plano pueden hacer peticiones XHR a cualquier host para los cuales tienen permisos del host.

Acciones del navegador

Si tu extensión define una acción del navegador, y esa acción del navegador no tiene ventanas emergentes, entonces puedes escuchar los eventos "clic" del botón en el navegador empleando el objeto onClicked de las acciones del navegador:

js
browser.browserAction.onClicked.addListener(handleClick);

Contenido web

Los scripts en segundo plano no tienen acceso directo a las páginas web. Sin embargo, pueden cargar scripts de contenido en páginas web, y comunicarse con esos scripts empleando la API de paso de mensajes.

Políticas de seguridad para el contenido

Los scripts de segundo plano están restringidos de algunas operaciones dañinas, como el uso de eval(), a través de la Política de Seguridad del Contenido. Vea la Política de Seguridad del Contenidopara más detalles sobre esto.

Scripts de contenido

Usa los scripts de contenido para acceder y manipular páginas web. Los scripts de contenido son cargados dentro de las páginas web y ejecutados en el contexto particular de esa página.

Los scripts de contenido son scripts provistos por la extensión los cuales se ejecutan en el contexto de la página web; estos difieren de los scripts que son cargados por la página misma, incluye aquellos que son proporcionados en los elementos <script> dentro de la página.

Los scripts de contenido pueden ver y manipular el DOM de las páginas, igual que los scripts cargados normalmente por la página.

A diferencia de los scripts normales, ellos pueden:

  • Realizar peticiones XHR de dominio cruzado
  • Usar un pequeño subconjunto de las APIs de WebExtension
  • Intercambiar mensajes con sus scripts en segundo plano, y por esta vía, tener acceso indirecto a todas las APIs de WebExtension.

Los scripts de contenido no pueden acceder directamente a los scripts normales de una página web, pero pueden intercambiar mensajes con ellos usando la API estándar window.postMessage().

Generalmente, cuando hablamos acerca de scripts de contenido, nos referimos a JavaScript, pero tu puedes inyectar CSS dentro de las páginas web empleando el mismo mecanismo.

Mira el artículo scripts de contenido para aprender más.

Recursos web accesibles

Los recursos web accesibles son recursos como imágenes, HTML, CSS y JavaScript que tu puedes incluir en la extensión y los quieres hacer accesible a los scripts en segundo plano y los scripts de las páginas. Los recursos que son hechos accesibles desde la web pueden ser referenciados desde scripts de páginas web y scripts de contenido mediante un esquema especial de URI.

Por ejemplo, si un script de contenido quiere insertar algunas imágenes dentro de páginas web, tu puedes incluirlos en la extensión y hacerlos accesibles desde la web. El script de contenido creará y añadirá las etiquetas img que referencia a las imágenes mediante el atributo src.

Para aprender más, vea la documentación para la el parámetro web_accessible_resource del manifest.json.