Yang baru di Chrome 132

Pete LePage

Berikut hal yang perlu Anda ketahui:

• Elemen dialog ToggleEvent memberi tahu Anda saat <dialog> terbuka atau tertutup.
• Merekam elemen tertentu untuk berbagi video.
• File System Access API kini tersedia di Android dan di WebView
• Dan masih banyak lainnya.

Saya Pete LePage. Mari kita lihat apa yang baru untuk developer di Chrome 132.

Peristiwa tombol elemen dialog

Elemen <dialog> adalah elemen yang berguna untuk merepresentasikan jenis dialog apa pun dalam HTML. Dasar Pengukuran ini tersedia secara luas, yang berarti berfungsi di semua browser. Sayangnya, implementasi awal tidak menyertakan cara langsung untuk mendeteksi kapan dialog terbuka atau menutup.

Mulai Chrome 132, ada ToggleEvent baru. Fungsi ini menggabungkan ToggleEvent yang sama yang dikirim oleh popover. Untuk elemen <dialog>, saat showModal atau show dipanggil, <dialog> akan mengirim ToggleEvent dengan newState=open. Saat ditutup, <dialog> (menggunakan formulir, tombol, atau closewatcher) akan mengirimkan ToggleEvent dengan 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");
  }
});

Perekaman elemen

Platform web memungkinkan aplikasi web merekam trek video dari tab saat ini, atau wilayah, dan mulai Chrome 132, aplikasi web dapat mengambil elemen. Hal ini sangat berguna saat elemen diposisikan sedemikian rupa sehingga dapat tumpang-tindih satu sama lain.

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;

Lihat demo.

File System Access API di Android dan WebView

File System Access API telah tersedia di Chrome Desktop selama beberapa waktu, dan memungkinkan aplikasi web berinteraksi dengan file di sistem file lokal pengguna. Mulai Chrome 132, API kini tersedia di Android dan di WebView.

Untuk membaca file, panggil showOpenFilePicker(), yang menampilkan pemilih file, lalu tampilkan handle file yang dapat Anda gunakan untuk membaca file. Untuk menyimpan file ke disk, Anda dapat menggunakan handle file yang Anda dapatkan sebelumnya, atau memanggil showSaveFilePicker() untuk mendapatkan handle file baru.

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

Dan banyak lagi!

Tentu saja masih banyak lagi.

• Dukungan untuk kata kunci sideways-rl dan sideways-lr untuk properti CSS writing-mode.
• Peluncuran penampung scroll yang dapat difokuskan keyboard telah dilanjutkan.
• Tambahkan metode bytes() ke antarmuka Request dan Response, yang menampilkan promise yang diselesaikan dengan Uint8Array.

Bacaan lebih lanjut

Bagian ini hanya mencakup beberapa sorotan utama. Lihat link berikut untuk mengetahui perubahan tambahan di Chrome 132.

• Catatan rilis untuk Chrome 132.
• Yang baru di Chrome DevTools (132).
• Info terbaru ChromeStatus.com untuk Chrome 132.
• Kalender rilis Chrome.

Langganan

Agar selalu mendapatkan info terbaru, subscribe ke channel YouTube Chrome Developers, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

Segera setelah Chrome 133 dirilis, kami akan segera memberi tahu Anda tentang yang baru di Chrome.