本頁面由 Cloud Translation API 翻譯而成。

Chrome 132 的新功能

Pete LePage

以下是一些注意事項：

對話方塊元素 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");
  }
});

元素擷取

網頁平台可讓網頁應用程式擷取目前分頁或區域的影片軌跡，從 Chrome 132 開始，網頁應用程式可以擷取元素。當元素的位置可能會互相重疊時，這項功能就特別實用。

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 電腦版上推出一段時間，可讓網頁應用程式與使用者本機檔案系統中的檔案互動。自 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-mode CSS 屬性的 sideways-rl 和 sideways-lr 關鍵字。
可透過鍵盤聚焦的捲軸容器的推出作業已恢復。
將 bytes() 方法新增至 Request 和 Response 介面，該方法會傳回以 Uint8Array 解析的承諾。

延伸閱讀

這份說明僅涵蓋部分重點。如要瞭解 Chrome 132 的其他變更，請參閱以下連結。

如要隨時掌握最新消息，請訂閱 Chrome 開發人員 YouTube 頻道，這樣一來，我們發布新影片時，你就會收到電子郵件通知。

只要 Chrome 133 一推出，我們就會在這裡告訴你 Chrome 有哪些新功能！