Новое в Chrome 132

Pete LePage

Вот что вам нужно знать:

• Элемент диалога ToggleEvent позволяет узнать, когда <dialog> диалог> открылся или закрылся.
• Захватывайте определенные элементы для обмена видео.
• API доступа к файловой системе теперь доступен на Android и в WebViews.
• И есть еще много чего .

Я Пит Лепейдж. Давайте углубимся и посмотрим, что нового для разработчиков в Chrome 132.

События переключения элементов диалогового окна

Элемент <dialog> — полезный элемент для представления любого типа диалога в HTML. Это базовый вариант, широко доступный, что означает, что он работает во всех браузерах. К сожалению, первоначальная реализация не включала прямого способа определения открытия или закрытия диалога.

Начиная с Chrome 132, появился новый ToggleEvent . Он включает в себя тот же ToggleEvent , который отправляется popover . Для элементов <dialog> при вызове showModal или show <dialog> отправляет ToggleEvent с newState=open . Когда <dialog> закрывается (с помощью формы, кнопки или closewatcher ), он отправляет ToggleEvent с 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");
  }
});

Захват элемента

Веб-платформа позволяет веб-приложению захватывать видеодорожку текущей вкладки или региона , а начиная с 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;

Посмотрите демо .

API доступа к файловой системе на Android и WebView

API доступа к файловой системе уже некоторое время доступен на Chrome Desktop и позволяет веб-приложениям взаимодействовать с файлами в локальной файловой системе пользователя. Начиная с Chrome 132, API теперь доступен на Android и в WebViews.

Чтобы прочитать файл, вызовите showOpenFilePicker() , который показывает средство выбора файла, а затем возвращает дескриптор файла, который можно использовать для чтения файла. Чтобы сохранить файл на диск, вы можете либо использовать полученный ранее дескриптор файла, либо вызвать showSaveFilePicker() чтобы получить новый дескриптор файла.

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

И многое другое!

Конечно, есть еще много всего.

• Поддержка ключевых словsideways sideways-rl sideways-lr для свойства CSS writing-mode .
• Возобновлен выпуск контейнеров прокрутки с возможностью фокусировки на клавиатуре .
• Добавьте метод bytes() к интерфейсам Request и Response , который возвращает обещание, которое разрешается с помощью Uint8Array.

Дальнейшее чтение

Здесь рассматриваются лишь некоторые ключевые моменты. Перейдите по следующим ссылкам, чтобы узнать о дополнительных изменениях в Chrome 132.

• Примечания к выпуску Chrome 132 .
• Что нового в Chrome DevTools (132) .
• Обновления ChromeStatus.com для Chrome 132 .
• Календарь выпусков Chrome .

Подписаться

Чтобы быть в курсе новостей, подпишитесь на канал YouTube для разработчиков Chrome , и вы будете получать уведомления по электронной почте каждый раз, когда мы запускаем новое видео.

Как только выйдет Chrome 133, мы будем здесь, чтобы рассказать вам, что нового в Chrome!