Tính năng mới trong Chrome 132

Pete LePage

Dưới đây là những gì bạn cần phải biết:

Tôi là Pete LePage. Hãy cùng tìm hiểu những tính năng mới dành cho nhà phát triển trong Chrome 132.

Sự kiện bật/tắt phần tử hộp thoại

Phần tử <dialog> là một phần tử hữu ích để biểu thị mọi loại hộp thoại trong HTML. Đây là Đường cơ sở có sẵn rộng rãi, nghĩa là hoạt động trên tất cả trình duyệt. Rất tiếc, cách triển khai ban đầu không bao gồm cách trực tiếp để phát hiện thời điểm hộp thoại mở hoặc đóng.

Kể từ Chrome 132, sẽ có một ToggleEvent mới. Phương thức này kết hợp cùng một ToggleEvent do popover gửi. Đối với các phần tử <dialog>, khi showModal hoặc show được gọi, <dialog> sẽ gửi một ToggleEvent với newState=open. Khi <dialog> đóng (sử dụng biểu mẫu, nút hoặc closewatcher), <dialog> sẽ gửi ToggleEvent bằng 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");
  }
});

Ghi lại phần tử

Các phần tử chồng chéo với tính năng chụp phần tử.

Nền tảng web cho phép ứng dụng web ghi lại một kênh video của thẻ hoặc khu vực hiện tại và bắt đầu từ Chrome 132, ứng dụng web có thể ghi lại một phần tử. Điều này đặc biệt hữu ích khi các phần tử được đặt vị trí sao cho có thể chồng chéo lên nhau.

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;

Hãy xem bản minh hoạ.

API Truy cập hệ thống tệp trên Android và WebView

File System Access API (API truy cập hệ thống tệp) đã có trên Chrome dành cho máy tính được một thời gian và cho phép các ứng dụng web tương tác với các tệp trên hệ thống tệp cục bộ của người dùng. Kể từ Chrome 132, API này hiện đã có trên Android và trong WebView.

Để đọc tệp, hãy gọi showOpenFilePicker(). Thao tác này sẽ hiển thị một bộ chọn tệp, sau đó trả về một handle tệp mà bạn có thể dùng để đọc tệp. Để lưu tệp vào ổ đĩa, bạn có thể sử dụng handle tệp mà bạn đã nhận được trước đó hoặc gọi showSaveFilePicker() để nhận handle tệp mới.

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

Và nhiều tính năng khác!

Tất nhiên, còn rất nhiều tính năng khác.

Tài liệu đọc thêm

Nội dung này chỉ đề cập đến một số điểm nổi bật chính. Hãy xem các đường liên kết sau để biết thêm các thay đổi trong Chrome 132.

Đăng ký

Để nắm bắt thông tin mới nhất, hãy đăng ký kênh YouTube dành cho nhà phát triển Chrome. Bạn sẽ nhận được thông báo qua email mỗi khi chúng tôi ra mắt video mới.

Ngay khi Chrome 133 được phát hành, chúng tôi sẽ thông báo cho bạn về các tính năng mới trong Chrome!