Novedades de Chrome 116 para extensiones

Chrome 116 ya está disponible en versión beta e incluye muchas actualizaciones interesantes para los desarrolladores de extensiones de Chrome. Veamos rápidamente las novedades.

Sebastián Benz
Sebastian Benz

Cómo abrir un panel lateral de manera programática

El panel lateral es una de las funciones más solicitadas en las extensiones de Chrome y está disponible en Chrome desde la versión 114. Después de lanzar la API del panel lateral, uno de los primeros comentarios que recibimos fue que los desarrolladores querían una forma de abrir un panel lateral de manera programática. chrome.sidePanel.open ya está en versión beta. Puedes usarla para abrir el panel lateral de la extensión de manera programática en respuesta a una interacción del usuario, como un clic en el menú contextual:

chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === 'openSidePanel') {
    // This will open the panel in all the pages on the current window.
    chrome.sidePanel.open({ windowId: tab.windowId });
  }
});

Compatibilidad de WebSocket en Service Workers

La compatibilidad con WebSocket es fundamental para muchas extensiones que planean migrar a Manifest V3. Chrome 116 mejora aún más la compatibilidad de WebSocket en los service workers, ya que toda la actividad de WebSocket restablecerá el temporizador de inactividad del service worker de 30 s. Esto significa que mientras tu WebSocket esté activo, el service worker seguirá activo.

Puedes usar esto para implementar un mecanismo de keepalive que garantiza que el service worker se mantenga activo mientras esperas los mensajes del servidor, incluso si demoren más de 30 segundos en llegar el siguiente mensaje:

function keepAlive() {
  const keepAliveIntervalId = setInterval(
    () => {
      if (webSocket) {
        webSocket.send('keepalive');
      } else {
        clearInterval(keepAliveIntervalId);
      }
    },
    // It's important to pick an interval that's shorter than 30s, to
    // avoid that the service worker becomes inactive.
    20 * 1000
  );
}

Echa un vistazo a la guía y la muestra nuevas de WebSocket para obtener más detalles.

Keepalive sólido para Service Workers

Hablando del ciclo de vida del service worker, llegó otra actualización importante: un sólido keepalive para las APIs que requieren la interacción del usuario. Las APIs que requieren una interacción del usuario tendrán keepalives “fuertes” para los service workers de extensión (es decir, permiten que el trabajador tarde más de 5 minutos en esta tarea):

Grabación de audio y video en segundo plano

Se cerró otra brecha entre Manifest V2 y Manifest V3: puedes grabar audio y video en segundo plano con tabCapture y documentos fuera de pantalla. Usa la API de chrome.tabCapture en un service worker para obtener un ID de transmisión después de un gesto del usuario. Luego, puedes pasarlo a un documento fuera de pantalla para comenzar a grabar.

Consulta nuestra guía actualizada de tabCapture para descubrir cómo funciona o, para ver un ejemplo práctico, consulta la muestra Captura de pestañas: Grabadora.

Nueva API: runtime.getContexts()

La nueva API de runtime.getContexts() te permite recuperar información sobre contextos activos asociados con tus extensiones. Por ejemplo, puedes usarlo para verificar si hay un documento fuera de pantalla activo:

const existingContexts = await chrome.runtime.getContexts({});
const offscreenDocument = existingContexts.find(
    (c) => c.contextType === 'OFFSCREEN_DOCUMENT'
  );

Nuevo motivo fuera de pantalla: GEOLOCATION

Se agregó geolocation como otro motivo válido para usar un documento fuera de pantalla. Consulta nuestra guía sobre el uso de la ubicación geográfica para obtener más información sobre cómo obtener la ubicación geográfica de la extensión con la API de Offscreen.

chrome.action.setBadgeText()

Se actualizó action.setBadgeText para solucionar una incoherencia entre Manifest V2 y Manifest V3. Si pasas una cadena vacía o null a action.setBadgeText, se borrará el texto de la insignia de la pestaña especificada y, en su lugar, se usará el texto de la insignia global de forma predeterminada.

action.setBadgeText({tabId: tabId, text: ''});

Resumen: Otro paso hacia Manifest V3

Con la compatibilidad mejorada del ciclo de vida del service worker y la API de TabCapture actualizada, continuamos progresando en nuestro objetivo de reducir la brecha de funciones entre Manifest V2 y V3. Consulta nuestra página de problemas conocidos para obtener el estado actual.