Una WebExtension 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 WebExtension.

Toda WebExtension 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

WebExtensions 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":

// 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:

// 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:

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.

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.

Acciones del navegador

Una acción del navegador es un botón que tu puedes añadir a la barra de herramientas del navegador. Los usuarios puedes dar clic en el botón para interactuar con tu extensión.

Opcionalmente tu puedes definir una ventana emergente para el botón empleando HTML, CSS y JavaScript.

Si tu no defines una ventana emergente, entonces cuando el usuario de clic sobre el botón se disparará un evento hacia la extensión, la cual pueden escuchar utilizando browserAction.onClicked:

browser.browserAction.onClicked.addListener(handleClick);

Si defines una ventana emergente el evento clic no es disparado: en lugar de eso, la ventana emergente será mostrada cuando el usuario hace clic en el botón. El usuario puede interactuar con la ventana y será cerrada automáticamente cuando el usuario de clic afuera.

Aprenda más sobre las acciones del navegador.

Acciones de página

Las acciones de página son como las acciones del navegador en general, con estas excepciones:

  • Las acciones del navegador son mostradas todo el tiempo y son para acciones que son aplicables más o menos todo el tiempo.
  • Las acciones de página son para acciones que sólo tienen sentido en algunas páginas y son solamente mostradas cuando esas pestañas están activas.

Para resaltar que las acciones de la página están estrechamente vinculadas a páginas concretas, aquellas se muestran en la barra de direcciones, en lugar de en la barra de herramientas principal:

Aprenda más sobre las acciones de las páginas.

Página de opciones

Las páginas de opciones te permiten definir preferencias para tu WebExtension que los usuarios pueden cambiar. Los usuarios pueden acceder a la página de opciones de un complemento desde el administrador de complementos del navegador:

La forma en que los usuarios acceden a la página, y la forma que está integrada en la interfaz de usuario del navegador, puede variar de un navegador a otro.

Aprenda más sobre las opciones de las páginas.

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.

 

Etiquetas y colaboradores del documento

Etiquetas: 
 Colaboradores en esta página: rgo, jde-gr, doztrock, hecaxmmx, yuniers
 Última actualización por: rgo,