Acciones de extensión en Manifest V3

Simeón Vicente
Simeon Vincent

Desde el lanzamiento de las extensiones de Chrome, la plataforma ha permitido que los desarrolladores expongan la funcionalidad de las extensiones directamente en la IU de Chrome de nivel superior mediante acciones. Una acción es un botón de ícono que puede abrir una ventana emergente o activar algunas funcionalidades de la extensión. Históricamente, Chrome admitía dos tipos de acciones: acciones del navegador y acciones de páginas. Manifest V3 cambió esto consolidando su funcionalidad en una nueva API de chrome.action.

Un breve historial de las acciones de las extensiones

Si bien chrome.action es nueva en Manifest V3, la funcionalidad básica que proporciona se remonta a la primera vez que las extensiones se volvieron estables en enero de 2010. La primera versión estable de la plataforma de extensiones de Chrome admitía dos tipos diferentes de acciones: acciones del navegador y acciones de página.

Las acciones del navegador permitieron que los desarrolladores de extensiones mostraran un ícono "en la barra de herramientas principal de Google Chrome, a la derecha de la barra de direcciones" (fuente), y brindaron a los usuarios una manera fácil de activar la funcionalidad de extensiones en cualquier página. Por otro lado, las acciones de página estaban destinadas a “representar acciones que se pueden realizar en la página actual, pero que no son aplicables a todas las páginas” (fuente).

En el cuadro multifunción, aparecerá una acción de la página (izquierda) que indica que la extensión puede realizar acciones en esta página. Una acción del navegador (derecha) siempre está visible.

En otras palabras, las acciones del navegador les brindaron a los desarrolladores de extensiones una superficie de IU persistente en el navegador, mientras que las acciones de la página solo aparecían cuando la extensión podía realizar una acción útil en la página actual.

Ambos tipos de acciones eran opcionales, por lo que un desarrollador de extensiones podía optar por no proporcionar ninguna acción, o bien una acción de la página o del navegador (no se permite especificar varias acciones).

Aproximadamente seis años después, Chrome 49 introdujo un nuevo paradigma de IU para las extensiones. Para ayudar a los usuarios a entender qué extensiones tenían, Chrome comenzó a mostrar todas las extensiones activas a la derecha del cuadro multifunción. Los usuarios podrían "ampliar" las extensiones en el menú de Chrome si lo desean.

Los íconos de extensiones ocultos aparecerán en el menú de Chrome.

A fin de mostrar un ícono para cada extensión, esta actualización también dio lugar a dos cambios importantes en el comportamiento de las extensiones en la IU de Chrome. Primero, todas las extensiones comenzaron a mostrar iconos en la barra de herramientas. Si la extensión no tuviera un ícono, Chrome generaría uno automáticamente. En segundo lugar, las acciones de la página se trasladaron a la barra de herramientas junto con las acciones del navegador y se les dio una indicación visual de diferenciar los estados de "mostrar" y "ocultar".

Una acción de página inhabilitada (izquierda) representa una imagen en escala de grises en la barra de herramientas, mientras que una habilitada (derecha) aparece con todo color.

Este cambio permitió que las extensiones de acción de la página siguieran funcionando según lo esperado, pero también disminuyó el rol de estas acciones con el tiempo. Uno de los efectos del rediseño de la IU fue que las acciones de la página se subsumieron efectivamente por las acciones del navegador. Como todas las extensiones aparecían en la barra de herramientas, los usuarios esperaban que, al hacer clic en el ícono de la barra de herramientas de una extensión, se invocara la extensión, y las acciones del navegador se convertían en una interacción cada vez más importante para las extensiones de Chrome.

Cambios en Manifest V3

La IU y las extensiones de Chrome continuaron evolucionando en los años posteriores al rediseño de la IU de la extensión de 2016, pero las acciones del navegador y de la página permanecieron sin cambios. Es decir, al menos hasta que comenzamos a planificar cómo modernizar la plataforma de extensiones con Manifest V3.

Estaba claro para el equipo de extensiones que las acciones del navegador y de la página eran cada vez más distinguidas sin significado. Y lo que es peor, sus sutiles diferencias de comportamiento hicieron que fuera difícil para los desarrolladores determinar cuál usar. Nos dimos cuenta de que podíamos abordar estos problemas combinando la acción del navegador y la acción de la página en una sola "acción".

Ingresa a la API de Action: chrome.action es más directamente análogo a chrome.browserAction, pero tiene algunas diferencias notables.

En primer lugar, chrome.action presenta un nuevo método llamado getUserSettings(). Este método les brinda a los desarrolladores de extensiones una forma de verificar si el usuario fijó la acción de su extensión en la barra de herramientas.

let userSettings = await chrome.action.getUserSettings();
console.log(`Is the action pinned? ${userSettings.isOnToolbar ? 'Yes' : 'No'}.`);

"getUserSettings" puede parecer un nombre poco común para esta funcionalidad en comparación con, por ejemplo, "isPinned", pero el historial de acciones en Chrome muestra que la IU del navegador cambia más rápido que las APIs de extensión. Como tal, nuestro objetivo con esta API es exponer las preferencias del usuario relacionadas con la acción en interfaces genéricas para minimizar la deserción futura de la API. También permite que otros proveedores de navegadores expongan conceptos de IU específicos del navegador en el objeto UserSettings que muestra este método.

En segundo lugar, el ícono y el estado habilitado o inhabilitado de la acción de una extensión se pueden controlar con la API de contenido declarativo. Esto es importante porque permite que las extensiones reaccionen al comportamiento de navegación del usuario sin acceder al contenido ni incluso a las URLs de las páginas que visita. Por ejemplo, veamos cómo una extensión puede habilitar su acción cuando el usuario visita páginas en example.com.

// Manifest V3
chrome.runtime.onInstalled.addListener(() => {
  chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {
    chrome.declarativeContent.onPageChanged.addRules([
      {
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl: {hostSuffix: '.example.com'},
          })
        ],
        actions: [new chrome.declarativeContent.ShowAction()]
      }
    ]);
  });
});

El código anterior es casi idéntico a lo que una extensión haría con una acción de la página. La única diferencia es que, en Manifest V3, usamos declarativeContent.ShowAction en lugar de declarativeContent.ShowPageAction en Manifest V2.

Por último, los bloqueadores de contenido pueden usar setExtensionActionOptions de la API declarativeNetRequest para mostrar la cantidad de solicitudes que bloquea la extensión en una pestaña determinada. Esta función es importante porque permite que los bloqueadores de contenido mantengan informados a los usuarios finales sin exponer metadatos de navegación potencialmente sensibles a la extensión.

Conclusión

La modernización de la plataforma de extensiones de Chrome fue una de nuestras principales motivaciones para Manifest V3. En muchos casos, eso implicó cambiar a nuevas tecnologías, pero también simplificar la superficie de nuestra API; ese era nuestro objetivo.

Espero que esta publicación te ayude a comprender este aspecto particular de la plataforma Manifest V3. Para obtener más información sobre cómo el equipo de Chrome aborda el futuro de las extensiones del navegador, consulta las páginas Visión de la plataforma y Descripción general de Manifest V3 en nuestra documentación para desarrolladores. También puedes hablar sobre las extensiones de Chrome con otros desarrolladores en el Grupo de Google chromium-extensions.