Descripción general de la arquitectura

Las extensiones son paquetes comprimidos de HTML, CSS, JavaScript, imágenes y otros archivos que se utilizan en la Web. de Google, que personalizan la experiencia de navegación de Google Chrome. Las extensiones se crean con sitios web y pueden usar las mismas APIs que proporciona el navegador a la Web abierta.

Las extensiones tienen una amplia variedad de posibilidades funcionales. Pueden modificar el contenido web que los usuarios ven y ampliarán su comportamiento o interactuarán con él.

Considera las extensiones como la puerta de enlace para hacer del navegador Chrome el navegador más personalizado.

Archivos de extensión

Las extensiones varían en tipos de archivos y cantidad de directorios, pero todas deben tener un [manifest][docs-manifest]. Algunas extensiones básicas, pero útiles, pueden consistir solo en el manifiesto y el ícono de su barra de herramientas.

El archivo de manifiesto, titulado manifest.json, proporciona al navegador información sobre la extensión, como como los archivos más importantes y las capacidades que podría usar la extensión.

{
  "name": "My Extension",
  "version": "2.1",
  "description": "Gets information from Google.",
  "icons": {
    "128": "icon_16.png",
    "128": "icon_32.png",
    "128": "icon_48.png",
    "128": "icon_128.png"
  },
  "background": {
    "persistent": false,
    "scripts": ["background_script.js"]
  },
  "permissions": ["https://*.google.com/", "activeTab"],
  "browser_action": {
    "default_icon": "icon_16.png",
    "default_popup": "popup.html"
  }
}

Las extensiones deben tener un ícono ubicado en la barra de herramientas del navegador. Los iconos de la barra de herramientas permiten un fácil acceso y mantener a los usuarios al tanto de las extensiones instaladas. La mayoría de los usuarios interactuarán con una extensión que usa una ventana emergente haciendo clic en el ícono.

Esta extensión Google Mail Checker usa una acción del navegador:

Una captura de pantalla de la extensión Google Mail Checker

Esta extensión de Mappy utiliza una acción de página y contenido. secuencia de comandos:

Captura de pantalla de la extensión Mappy

Cómo hacer referencia a archivos

Se puede hacer referencia a los archivos de una extensión por medio de una URL relativa, al igual que los archivos en un código HTML común. .

<img src="images/my_image.png">

Además, se puede acceder a cada archivo con una URL absoluta.

chrome-extension://EXTENSION_ID/PATH_TO_FILE

En la URL absoluta, EXTENSION_ID es un identificador único que el sistema de extensión genera para cada extensión. Los ID de todas las extensiones cargadas se pueden ver en la URL. chrome://extensions. PATH_TO_FILE es la ubicación del archivo en el la carpeta superior de la extensión; coincide con la URL relativa.

Mientras trabajas en una extensión sin empaquetar, el ID de la extensión puede cambiar. Específicamente, el ID de un extensión sin empaquetar cambiará si se carga desde otro directorio. el ID cuando se empaqueta la extensión. Si el código de una extensión se basa en una URL absoluta, puedes usar el método chrome.runtime.getURL() para evitar codificar el ID durante en el desarrollo de software.

Arquitectura

La arquitectura de una extensión dependerá de su funcionalidad, pero muchas extensiones sólidas incluyen varios componentes:

Secuencia de comandos en segundo plano

La secuencia de comandos en segundo plano es el controlador de eventos de la extensión. contiene objetos de escucha para los eventos del navegador que son importantes para la extensión. Permanece inactivo hasta que se activa un evento. Luego, realiza la lógica instruida. Una secuencia de comandos eficaz en segundo plano solo se carga cuando es necesaria se descargan cuando están inactivos.

Elementos de la IU

La interfaz de usuario de una extensión debe ser significativa y mínima. La IU debe personalizar o mejoran la experiencia de navegación sin distraernos. La mayoría de las extensiones tienen un navegador acción o de página, pero puede contener otras formas de IU como menús contextuales, el uso del cuadro multifunción o la creación de una combinación de teclas.

Las páginas de extensiones de IU, como una ventana emergente, pueden contener páginas HTML comunes con JavaScript. lógica. Las extensiones también pueden llamar a tabs.create o window.open() para mostrar archivos HTML adicionales presentes en la extensión.

Una extensión que usa una acción de página y una ventana emergente puede usar la página content para establecer reglas en la secuencia de comandos en segundo plano para cuando aparezca la ventana emergente disponibles para los usuarios. Cuando se cumplen las condiciones, la secuencia de comandos en segundo plano se comunica con la ventana emergente. para que los usuarios puedan hacer clic en el ícono.

Una ventana del navegador que contiene una acción de la página en la que se muestra una ventana emergente

Guiones de contenido

Las extensiones que leen o escriben páginas web utilizan una secuencia de comandos de contenido. El La secuencia de comandos de contenido contiene JavaScript que se ejecuta en los contextos de una página que se cargó en el navegador. Las secuencias de comandos de contenido leen y modifican el DOM de las páginas web que visita el navegador.

Una ventana del navegador con una acción de página y una secuencia de comandos de contenido

Las secuencias de comandos de contenido pueden comunicarse con su extensión superior intercambiando mensajes. y almacenar valores con la API de storage.

Muestra una ruta de comunicación entre la secuencia de comandos del contenido y la extensión superior.

Página de opciones

Así como las extensiones permiten a los usuarios personalizar el navegador Chrome, la página de opciones permite la personalización de la extensión. Se pueden usar opciones para habilitar funciones y permitir que los usuarios elegir qué funcionalidad es relevante para sus necesidades.

Uso de las APIs de Chrome

Además de tener acceso a las mismas APIs que las páginas web, las extensiones también pueden usar APIs específicas de la extensión que crean una estrecha integración con el navegador. Extensiones y las páginas web pueden acceder al método window.open() estándar para abrir una URL, pero las extensiones sí especificar en qué ventana se debe mostrar esa URL con la API de Chrome tabs.create en su lugar.

Métodos síncronos frente a asíncronos

La mayoría de los métodos de la API de Chrome son asíncronos: se muestran de inmediato sin esperar la operación. para terminar. Si una extensión necesita conocer el resultado de una operación asíncrona, puede pasar un función de devolución de llamada en el método. La devolución de llamada se ejecuta más tarde, posiblemente mucho más tarde, después de método.

Si la extensión necesita navegar a una nueva URL por la pestaña seleccionada actualmente del usuario, deberá obtener el ID de la pestaña actual y, luego, actualizar la dirección de esa pestaña a la nueva URL.

Si el método tabs.query fuera síncrono, podría verse como se muestra a continuación.

//THIS CODE DOESN'T WORK
var tab = chrome.tabs.query({'active': true}); //WRONG!!!
chrome.tabs.update(tab.id, {url:newUrl});
someOtherFunction();

Este enfoque fallará porque query() es asíncrono. Regresa sin esperar el trabajo para completarse y no devuelve un valor. Un método es asíncrono cuando el parámetro de devolución de llamada disponible en su firma.

// Signature for an asynchronous method
chrome.tabs.query(object queryInfo, function callback)

Para consultar correctamente una pestaña y actualizar su URL, la extensión debe usar el parámetro de devolución de llamada.

//THIS CODE WORKS
chrome.tabs.query({'active': true}, function(tabs) {
  chrome.tabs.update(tabs[0].id, {url: newUrl});
});
someOtherFunction();

En el código anterior, las líneas se ejecutan en el siguiente orden: 1, 4, 2. La función de devolución de llamada especificado para query() y, luego, ejecuta la línea 2, pero solo después de obtener información sobre el está disponible la pestaña seleccionada actualmente. Esto sucede en algún momento después de que regresa query(). Si bien update() es asíncrono: el código no usa un parámetro de devolución de llamada, ya que la extensión no realiza con los resultados de la actualización.

// Synchronous methods have no callback option and returns a type of string
string chrome.runtime.getURL()

Este método muestra la URL de forma síncrona como un string y no realiza ningún otro trabajo asíncrono.

Más detalles

Para obtener más información, explora los documentos de referencia de la API de Chrome y mira los siguientes video.

Comunicación entre páginas

A menudo, los diferentes componentes de una extensión necesitan comunicarse entre sí. Diferentes páginas HTML pueden encontrarse mutuamente con los métodos chrome.extension, como getViews(). y getBackgroundPage(). Una vez que una página tiene una referencia a otras páginas de extensión, la primera puede invocar funciones en las otras páginas y manipular sus DOM. Además, todos los componentes del puede acceder a los valores almacenados con la API de storage y comunicarse mediante el paso de mensajes.

Guardando datos y modo Incógnito

Las extensiones pueden guardar datos mediante la API de storage, el almacenamiento web HTML5 API o realiza solicitudes de servidor que provoquen el guardado de datos. Si la extensión necesita guardar algo, primero considera si es de una ventana de incógnito. De forma predeterminada, las extensiones no se ejecuten en ventanas de incógnito.

El modo Incógnito promete que la ventana no dejará recorridos. Cuando se trata de datos de en las ventanas de incógnito, las extensiones deben cumplir con esta promesa. Si una extensión suele guardar la navegación historial, no guardes el historial de las ventanas de incógnito. Sin embargo, las extensiones pueden almacenar configuración desde cualquier ventana, de incógnito o no.

Para detectar si una ventana está en modo Incógnito, comprueba la propiedad incognito de la objeto tabs.Tab o windows.Window.

function saveTabData(tab) {
  if (tab.incognito) {
    return;
  } else {
    chrome.storage.local.set({data: tab.url});
  }
}

Da el siguiente paso

Después de leer la descripción general y completar el instructivo Cómo comenzar, haz lo siguiente: los desarrolladores deben estar listos para comenzar a escribir sus propias extensiones. Sumérgete aún más en el mundo de personalizar Chrome con los siguientes recursos.