New in Chrome 132

Pete LePage

Here's what you need to know:

Dialog element ToggleEvent lets you know when a <dialog> has opened or closed.
Capture specific elements for video sharing.
The File System Access API is now available on Android and in WebViews
And there's plenty more.

I'm Pete LePage. Let's dive in and see what's new for developers in Chrome 132.

Dialog element toggle events

The <dialog> element is a useful element for representing any kind of dialog in HTML. It's Baseline Widely available, which means it works across all browsers. Unfortunately, the initial implementation didn't include a direct way to detect when a dialog opens or closes.

Starting in Chrome 132, there's a new ToggleEvent. It incorporates the same ToggleEvent that is dispatched by a popover. For <dialog> elements, when showModal or show is called, the <dialog> dispatches a ToggleEvent with newState=open. When a <dialog> is closed (using a form, button or closewatcher) it dispatches a ToggleEvent with 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");
  }
});

Element capture

Overlapping elements with element capture.

The web platform allows a web app to capture a video track of the current tab, or region, and starting in Chrome 132, web apps can capture an element. This is especially useful when elements are positioned in a way that they may overlap one another.

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;

Check out the demo.

The File System Access API on Android and WebView

The File System Access API has been available on Chrome Desktop for some time now, and allows web apps to interact with files on the users local file system. From Chrome 132, the API is now available on Android and in WebViews.

To read a file call showOpenFilePicker(), which shows a file picker, then returns a file handle that you can use to read the file. To save a file to disk, you can either use that file handle that you got earlier, or call showSaveFilePicker() to get a new file handle.

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

And more!

Of course there's plenty more.

Support for sideways-rl and sideways-lr keywords for the writing-mode CSS property.
Roll out of keyboard focusable scroll containers has resumed.
Add a bytes() method to the Request and Response interfaces, which returns a promise that resolves with a Uint8Array.

New in Chrome 132

Dialog element toggle events

Element capture

The File System Access API on Android and WebView

And more!

Further reading

Subscribe