Cómo conectar una extensión desde una AWP de kiosco

Las apps de Chrome dejarán de estar disponibles después de Chrome 102 para Windows, Linux y macOS. En el caso de ChromeOS, las Apps de Chrome serán compatibles hasta, al menos, enero de 2025, pero recomendamos enfáticamente migrar a las apps web, ya que las Apps de Chrome están programadas para darse de baja. Anteriormente, las apps de Chrome tenían funciones adicionales disponibles en el modo de kiosco que actualmente no son compatibles solo con las apps web. Puedes seguir usando algunas de estas funciones si implementas una extensión complementaria con tu aplicación web de kiosco.

¿Cómo se implementan las extensiones?

Las extensiones se implementan a través de la Consola del administrador de Chrome en la pantalla de configuración del kiosco (para encontrarla, navega a Devices > Chrome > Apps & Extensions > Kiosks). Las extensiones pueden alojarse por cuenta propia en un vínculo de acceso público o alojarse en Chrome Web Store. Para obtener más información sobre cómo administrar extensiones en un entorno empresarial o educativo, consulta este documento.

¿Cómo puedo llamar a las APIs de extensiones desde mi app web?

Como puedes implementar extensiones complementarias con tu app web para kiosco, puedes aprovechar las capacidades de las extensiones llamando a las APIs de extensiones para realizar acciones como obtener información útil sobre el dispositivo y la plataforma de hardware, o administrar las funciones de accesibilidad de Chrome.

Si usarás APIs solo para quioscos, deberás habilitarlas en el manifiesto. Luego, implementa el paso de mensajes entre tu app web de kiosco y la extensión complementaria para que puedan comunicarse entre sí.

Habilita las APIs de extensiones solo para kioscos

Algunas APIs de extensiones solo están disponibles en el modo de kiosco. Para que tu extensión llame a estas APIs exclusivas para quioscos, debes agregar el campo "kiosk_enabled" al manifiesto y establecerlo en true:

{
    "manifest_version": 3,
    "version": "1.0",
    ...
    "kiosk_enabled": true
 }

Implementa el paso de mensajes

Configuración de la extensión

Para recibir y responder mensajes de tu app web, deberás exponer una secuencia de comandos en segundo plano que escuche los mensajes que llegan del cliente (tu app web) y, luego, envíe esas solicitudes a una llamada a la API correspondiente. En el siguiente ejemplo, se reenvía una solicitud para reiniciar el dispositivo ChromeOS cuando la app web envía un objeto de mensaje personalizado que contiene un methodName de callRestart.

// message handler - extension code
chrome.runtime.onMessageExternal.addListener(function (request, sender, sendResponse) {
  if (request.methodName == 'callRestart') {
    chrome.runtime.restart();
  }
});

El manifiesto de la extensión se puede configurar para permitir llamadas a funciones externas a la extensión a través de la clave externally_connectable, que especifica qué sitios y extensiones pueden llamar a métodos en la extensión. Puedes encontrar más información sobre las extensiones de Chrome y Manifest V3 en la documentación oficial.

{
    "background": {
       "service_worker": "background.js"
    },
    "description": "This restarts your ChromeOS device. Lucky you!",
    "manifest_version": 3,
    "name": "Restart your kiosk app",
    "version": "1.0",
    "kiosk_enabled": true,
    "externally_connectable": {
         "accepts_tls_channel_id": false,
         "matches": [ "://developer.android.com/" ]
      }
 }

Configuración de la app web

Para llamar a la extensión desde una app web, debes conocer su ID estático. Este ID se puede encontrar en la página chrome://extensions, que se muestra cuando instalas tu extensión de Chrome, o en Chrome Web Store después de que se sube la extensión. Esto permite que tu app web especifique la extensión exacta con la que desea comunicarse. Después de eso, llama a chrome.runtime.sendMessage y pasa el ID de la extensión con un mensaje que desees enviarle.

const STATIC_EXTENSION_ID = 'abcdefghijklmnopqrstuvwxyz'; // found from chrome extensions page of chrome web store.
const callExtensionAPI = function (method) {
  chrome.runtime.sendMessage(STATIC_EXTENSION_ID, {
    methodName: method,
  });
};
callExtensionAPI('callRestart');

Para obtener más información sobre cómo conectar páginas web a extensiones para el envío de mensajes, consulta esta documentación.

Nota: Las extensiones y las apps web no pueden comunicarse entre sí de forma arbitraria. La extensión solo intentará escuchar mensajes de los dominios que se indican en la sección externally_connectable de su manifiesto. Del mismo modo, una app web debe conocer el ID estático de la extensión con la que desea comunicarse.