以下是您需要知晓的相关信息：
- 对话框元素 ToggleEvent 可让您知道
<dialog>何时打开或关闭。 - 截取特定元素以分享视频。
- File System Access API 现已在 Android 和 WebView 中推出
- 还有许多其他功能。
我是 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();
}
等等！
当然，还有许多其他功能。
- 支持
writing-modeCSS 属性的sideways-rl和sideways-lr关键字。 - 键盘可聚焦滚动容器的发布已恢复。
- 向
Request和Response接口添加了bytes()方法，该方法会返回一个 promise，由 Uint8Array 解析。
深入阅读
本文仅介绍了一些主要亮点。如需了解 Chrome 132 中的其他变更，请参阅以下链接。
订阅
如需及时了解最新动态，请订阅 Chrome 开发者 YouTube 频道，这样每当我们发布新视频时，您就会收到电子邮件通知。
一旦 Chrome 133 发布，我们便会立即在此处告知您 Chrome 中的新变化！