Acciones de extensión en Manifest V3

Simeon Vincent
Simeon Vincent

Desde el lanzamiento de las extensiones de Chrome, la plataforma permitió a los desarrolladores exponer la funcionalidad de las extensiones directamente en la IU de Chrome de nivel superior con 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ágina. Manifest V3 cambió esto consolidando su funcionalidad en una nueva API de chrome.action.

Un breve historial de las acciones de extensión

Si bien chrome.action en sí es nuevo en Manifest V3, la funcionalidad básica que proporciona se remonta a la primera vez que las extensiones estaron 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 les brindaron a los usuarios una manera fácil de activar la funcionalidad de las extensiones en cualquier página. Por otro lado, el objetivo de las acciones de página era "representar acciones que se pueden realizar en la página actual, pero que no se aplican a todas las páginas" (fuente).

En la barra omni, aparece una acción de página (izquierda) que indica que la extensión puede hacer algo en esta página. Siempre se puede ver una acción del navegador (derecha).

En otras palabras, las acciones del navegador brindaban a los desarrolladores de extensiones una superficie de IU persistente en él, mientras que las acciones de la página aparecían solo cuando la extensión podía hacer algo útil en la página actual.

Ambos tipos de acciones eran opcionales, por lo que un desarrollador de extensiones podía optar por proporcionar 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 comprender qué extensiones tenían, Chrome comenzó a mostrar todas las extensiones activas a la derecha de la barra de direcciones. Si lo desean, los usuarios pueden "ampliar" las extensiones al Menú de Chrome.

Los íconos de extensiones ocultos aparecían en el menú de Chrome.

Para mostrar un ícono para cada extensión, esta actualización también introdujo dos cambios importantes en el comportamiento de las extensiones en la IU de Chrome. En primer lugar, todas las extensiones comenzaron a mostrar íconos en la barra de herramientas. Si la extensión no tuviera un ícono, Chrome lo generaría automáticamente. En segundo lugar, las acciones de página se movieron a la barra de herramientas junto con las acciones del navegador y se les proporcionó una indicación visual para diferenciar entre sus estados "mostrar" y "ocultar".

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

Este cambio permitió que las extensiones de acciones de página sigan funcionando como se esperaba, pero también disminuyó el rol de las acciones de página con el tiempo. Uno de los efectos del rediseño de la IU fue que las acciones de la página se incluyeban efectivamente en las acciones del navegador. Dado que todas las extensiones aparecían en la barra de herramientas, los usuarios comenzaron a esperar que hacer clic en el ícono de la barra de herramientas de una extensión la invocara, y las acciones del navegador se convirtieron 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 siguieron evolucionando en los años posteriores al rediseño de la IU de extensiones en 2016, pero las acciones del navegador y de la página permanecieron en gran medida sin cambios. Es decir, al menos hasta que comenzamos a planificar cómo modernizar la plataforma de extensiones con Manifest V3.

Para el equipo de extensiones, estaba claro que las acciones del navegador y las acciones de página eran cada vez más una distinción sin sentido. Peor aún, sus diferencias de comportamiento sutiles dificultaban que los desarrolladores determinaran 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 la API de Action; chrome.action es el análogo más directo a chrome.browserAction, pero tiene algunas diferencias notables.

Primero, 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'}.`);

Es posible que "getUserSettings" parezca un nombre un poco inusual 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. Por lo tanto, nuestro objetivo con esta API es exponer las preferencias del usuario relacionadas con las acciones 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 siquiera 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 haría una extensión con una acción de 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 el método setExtensionActionOptions de la API de declarativeNetRequest para mostrar la cantidad de solicitudes bloqueadas por la extensión para 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

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

Espero que esta publicación haya ayudado a aclarar este aspecto en particular de la plataforma de manifiesto V3. Para obtener más información sobre cómo el equipo de Chrome se está acercando al futuro de las extensiones de 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 conversar sobre las extensiones de Chrome con otros desarrolladores en el Grupo de Google chromium-extensions.