이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Chrome 132의 새로운 기능

Pete LePage

다음 사항에 유의하시기 바랍니다.

대화상자 요소 ToggleEvent를 사용하면 <dialog>가 열리거나 닫혔을 때 이를 알 수 있습니다.
동영상 공유를 위해 특정 요소를 캡처합니다.
이제 Android 및 WebView에서 File System Access API를 사용할 수 있습니다.
그 밖에도 다양한 기능이 있습니다.

저는 피트 르페이지입니다. 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부터 Android 및 WebView에서 API를 사용할 수 있습니다.

파일을 읽으려면 파일 선택 도구를 표시하는 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 키워드 지원
키보드 포커스 가능 스크롤 컨테이너의 출시가 재개되었습니다.
Request 및 Response 인터페이스에 bytes() 메서드를 추가합니다. 이 메서드는 Uint8Array로 확인되는 프로미스를 반환합니다.

추가 자료

여기에는 일부 주요 내용만 포함되어 있습니다. Chrome 132의 추가 변경사항은 다음 링크를 확인하세요.

최신 소식을 확인하려면 Chrome 개발자 YouTube 채널을 구독하세요. 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.

Chrome 133이 출시되는 대로 Chrome의 새로운 기능을 바로 알려드리겠습니다.