Chrome 132 中的新变化

Pete LePage

以下是您需要知晓的相关信息：

我是 Pete LePage。我们来深入了解一下 Chrome 132 中面向开发者的新功能。

对话框元素切换事件

<dialog> 元素是一种非常有用的元素，可用于在 HTML 中表示任何类型的对话框。它是“广泛提供的基准”功能，也就是说，适用于所有浏览器。遗憾的是，初始实现不包含检测对话框何时打开或关闭的直接方法。

从 Chrome 132 开始，新增了 ToggleEvent。它包含由 popover 分派的相同 ToggleEvent。对于 <dialog> 元素，调用 showModal 或 show 时，<dialog> 会分派带有 newState=open 的 ToggleEvent。关闭 <dialog>（使用表单、按钮或 closewatcher）时，它会使用 newState=closed 调度 ToggleEvent。

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");
  }
});

元素截取

使用元素捕获功能叠加元素。

Web 平台允许 Web 应用捕获当前标签页或区域的视频轨道，从 Chrome 132 开始，Web 应用还可以捕获元素。当元素的排列方式可能会导致它们重叠时，此功能特别有用。

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;

请查看演示版。

Android 和 WebView 上的 File System Access API

File System Access API 已在 Chrome 桌面版上推出一段时间了，可让 Web 应用与用户本地文件系统中的文件进行交互。从 Chrome 132 开始，该 API 现已在 Android 和 WebView 中推出。

如需读取文件，请调用 showOpenFilePicker()，它会显示文件选择器，然后返回可用于读取文件的文件句柄。如需将文件保存到磁盘，您可以使用之前获取的文件句柄，也可以调用 showSaveFilePicker() 来获取新的文件句柄。

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

等等！

当然，还有许多其他功能。

深入阅读

本文仅介绍了一些主要亮点。如需了解 Chrome 132 中的其他变更，请参阅以下链接。

订阅

如需及时了解最新动态，请订阅 Chrome 开发者 YouTube 频道，这样每当我们发布新视频时，您就会收到电子邮件通知。

一旦 Chrome 133 发布，我们便会立即在此处告知您 Chrome 中的新变化！