มีอะไรใหม่ใน Chrome 132

Pete LePage

สิ่งที่จำเป็นต้องทราบมีดังนี้

และ Pete LePage จะเป็นผู้ดูแลคุณในวันนี้ มาดูกันว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน 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;

ดูเดโม

File System Access API ใน Android และ WebView

File System Access API ใช้งานได้ใน Chrome Desktop มาระยะหนึ่งแล้ว และช่วยให้เว็บแอปโต้ตอบกับไฟล์ในระบบไฟล์ในเครื่องของผู้ใช้ได้ ตั้งแต่ 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();
}

และอีกมากมาย

แน่นอนว่ายังมีอีกมากมาย

อ่านเพิ่มเติม

ข้อมูลนี้เป็นเพียงไฮไลต์สำคัญบางส่วนเท่านั้น ดูการเปลี่ยนแปลงเพิ่มเติมใน Chrome 132 ได้ที่ลิงก์ต่อไปนี้

สมัครใช้บริการ

หากต้องการติดตามข่าวสารล่าสุด โปรดติดตามช่อง YouTube ของนักพัฒนาซอฟต์แวร์ Chrome แล้วคุณจะได้รับอีเมลแจ้งเตือนทุกครั้งที่เราเปิดตัววิดีโอใหม่

ทันทีที่ Chrome 133 เปิดตัว เราจะมาแจ้งให้คุณทราบถึงสิ่งใหม่ๆ ใน Chrome