Novedades de Chrome 132

Pete LePage

Tenga en cuenta lo siguiente:

• El elemento de diálogo ToggleEvent te permite saber cuándo se abrió o cerró un <dialog>.
• Captura elementos específicos para compartir videos.
• La API de File System Access ahora está disponible en Android y en WebViews.
• Y hay mucho más.

Soy Pete LePage. Analicemos las novedades para desarrolladores en Chrome 132.

Eventos de activación de elementos de diálogo

El elemento <dialog> es útil para representar cualquier tipo de diálogo en HTML. Está disponible en Baseline de forma general, lo que significa que funciona en todos los navegadores. Lamentablemente, la implementación inicial no incluía una forma directa de detectar cuándo se abre o cierra un diálogo.

A partir de Chrome 132, hay un nuevo ToggleEvent. Incorpora el mismo ToggleEvent que envía un popover. En el caso de los elementos <dialog>, cuando se llama a showModal o show, <dialog> envía un ToggleEvent con newState=open. Cuando se cierra un <dialog> (con un formulario, un botón o closewatcher), se envía un ToggleEvent con newState=closed.

const dialog = document.getElementById("myDialog");

// Fired just before dialog is shown/hidden
dialog.addEventListener("beforetoggle", (event) => {
  if (event.newState === "open") {
    console.log("Dialog is about to be shown");
  } else {
    console.log("Dialog is about to be hidden");
  }
});

// Fired just after dialog is shown/hidden
dialog.addEventListener("toggle", (event) => {
  if (event.newState === "open") {
    console.log("Dialog is now visible");
  } else {
    console.log("Dialog is now hidden");
  }
});

Captura de elementos

La plataforma web permite que una app web capture una pista de video de la pestaña o región actual y, a partir de Chrome 132, las apps web pueden capturar un elemento. Esto es particularmente útil cuando los elementos se colocan de manera que se superpongan entre sí.

const myElem = document.getElementById('elementToShare');

// Request screen sharing
const stream = await navigator.mediaDevices
  .getDisplayMedia({preferCurrentTab: true});
const [videoTrack] = stream.getVideoTracks();

// Restrict the video stream to myElem and its subtree
const restrictionTarget = await RestrictionTarget.fromElement(myElem);
await videoTrack.restrictTo(restrictionTarget);

// Set the video source to my newly restricted stream
video.srcObject = stream;

Consulta la demo.

La API de File System Access en Android y WebView

La API de acceso al sistema de archivos está disponible en Chrome para computadoras desde hace tiempo y permite que las apps web interactúen con archivos en el sistema de archivos local de los usuarios. A partir de Chrome 132, la API ahora está disponible en Android y en WebViews.

Para leer un archivo, llama a showOpenFilePicker(), que muestra un selector de archivos y, luego, muestra un identificador de archivo que puedes usar para leerlo. Para guardar un archivo en el disco, puedes usar el identificador de archivo que obtuviste antes o llamar a showSaveFilePicker() para obtener un nuevo identificador de archivo.

async function saveFile(fileHandle) {
  if (!fileHandle) {
    fileHandle = await window.showSaveFilePicker();
  }
  const writable = await fileHandle.createWritable();
  await writable.write(contents);
  await writable.close();
}

Y mucho más.

Por supuesto, hay mucho más.

• Compatibilidad con las palabras clave sideways-rl y sideways-lr para la propiedad CSS writing-mode
• Se reanudó el lanzamiento de los contenedores de desplazamiento enfocables en el teclado.
• Agrega un método bytes() a las interfaces Request y Response, que muestra una promesa que se resuelve con un Uint8Array.

Lecturas adicionales

Esto solo abarca algunos aspectos clave. Consulta los siguientes vínculos para ver cambios adicionales en Chrome 132.

• Notas de la versión de Chrome 132.
• Novedades de las herramientas para desarrolladores de Chrome (132).
• Actualizaciones de ChromeStatus.com para Chrome 132.
• Calendario de lanzamientos de Chrome.

Suscribirse

Para mantenerte al tanto de las novedades, suscríbete al canal de YouTube de Chrome Developers y recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.

En cuanto se lance la versión 133 de Chrome, estaremos aquí para contarte las novedades.