มีอะไรใหม่ใน Chrome 116 สำหรับส่วนขยาย

Chrome 116 พร้อมใช้งานในรุ่นเบต้าแล้ว และมีการอัปเดตที่น่าสนใจหลายอย่างสําหรับนักพัฒนาส่วนขยาย Chrome มาดูกันว่ามีอะไรใหม่บ้าง

เซบาสเตียน เบนซ์
Sebastian Benz
Twitter GitHub Mastodon

เปิดแผงด้านข้างด้วยโปรแกรม

แผงด้านข้างเป็นฟีเจอร์ที่มีการร้องขอมากที่สุดอย่างหนึ่งในส่วนขยาย Chrome และพร้อมใช้งานใน Chrome ตั้งแต่เวอร์ชัน 114 หลังจากเปิดตัว Side Panel API ความคิดเห็นอย่างหนึ่งที่เราได้รับคือนักพัฒนาซอฟต์แวร์ต้องการวิธีเปิดแผงด้านข้างด้วยการเขียนโปรแกรม ข้อความมีดังนี้: chrome.sidePanel.open อยู่ในรุ่นเบต้าแล้ว คุณสามารถใช้เครื่องมือนี้เพื่อเปิดแผงด้านข้างของส่วนขยายแบบเป็นโปรแกรมเพื่อตอบสนองต่อการโต้ตอบของผู้ใช้ เช่น การคลิกเมนูตามบริบท โดยทำดังนี้

chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === 'openSidePanel') {
    // This will open the panel in all the pages on the current window.
    chrome.sidePanel.open({ windowId: tab.windowId });
  }
});

การสนับสนุน WebSocket ใน Service Worker

การรองรับ WebSocket มีความสำคัญมากสำหรับส่วนขยายจำนวนมากที่วางแผนจะเปลี่ยนไปใช้ไฟล์ Manifest V3 Chrome 116 ปรับปรุงการรองรับ WebSocket ในโปรแกรมทำงานของบริการเพิ่มเติม เนื่องจากกิจกรรม WebSocket ทั้งหมดจะรีเซ็ตตัวจับเวลาเมื่อไม่มีการใช้งานของ Service Worker 30 วินาที ซึ่งหมายความว่าตราบใดที่ WebSocket ของคุณยังทำงานอยู่ โปรแกรมทำงานของบริการจะยังคงอยู่

คุณสามารถใช้วิธีนี้เพื่อใช้งานกลไก Keepalive เพื่อให้แน่ใจว่าโปรแกรมทำงานของบริการจะยังทำงานอยู่ในขณะที่คุณกำลังรอข้อความจากเซิร์ฟเวอร์ แม้ว่าจะใช้เวลานานกว่า 30 วินาทีจนกว่าข้อความถัดไปจะมาถึง

function keepAlive() {
  const keepAliveIntervalId = setInterval(
    () => {
      if (webSocket) {
        webSocket.send('keepalive');
      } else {
        clearInterval(keepAliveIntervalId);
      }
    },
    // It's important to pick an interval that's shorter than 30s, to
    // avoid that the service worker becomes inactive.
    20 * 1000
  );
}

ดูคู่มือ WebSocket ใหม่ของเราและตัวอย่างสำหรับรายละเอียดเพิ่มเติม

Keepalive อย่างมีประสิทธิภาพสำหรับ Service Worker

เมื่อพูดถึงวงจรการทำงานของ Service Worker การอัปเดตที่สำคัญอีกอย่างหนึ่งก็มีผลแล้ว ซึ่งก็คือการรักษาสถานะที่แข็งแกร่งสำหรับ API ที่ต้องมีการโต้ตอบกับผู้ใช้ API ที่ต้องมีการโต้ตอบของผู้ใช้จะมีข้อควรปฏิบัติที่ "มีประสิทธิภาพ" สำหรับโปรแกรมทำงานของบริการส่วนขยาย (กล่าวคือ ให้ผู้ปฏิบัติงานใช้เวลาในการทำงานนี้นานกว่า 5 นาที) ดังนี้

กำลังบันทึกเสียงและวิดีโอในพื้นหลัง

เราได้ปิดช่องว่างระหว่างไฟล์ Manifest V2 กับไฟล์ Manifest V3 อีกครั้งแล้ว นั่นคือคุณบันทึกเสียงและวิดีโอในพื้นหลังได้โดยใช้ tabCapture และเอกสารนอกหน้าจอ ใช้ chrome.tabCapture API ใน Service Worker เพื่อรับรหัสสตรีมตามท่าทางสัมผัสของผู้ใช้ ซึ่งจะส่งผ่านไปยังเอกสารนอกหน้าจอเพื่อเริ่มบันทึก

อ่านคู่มือ tabCapture ฉบับปรับปรุงของเราเพื่อดูวิธีการทํางาน หรือดูตัวอย่างการใช้งานได้ที่ตัวอย่างการจับภาพแท็บ - โปรแกรมอัดเสียง

API ใหม่: running.getContexts()

runtime.getContexts() API ใหม่ช่วยให้คุณดึงข้อมูลเกี่ยวกับบริบทที่ใช้งานอยู่ซึ่งเชื่อมโยงกับส่วนขยายได้ เช่น คุณสามารถใช้เพื่อตรวจสอบว่ามีเอกสารนอกหน้าจอที่ใช้งานอยู่หรือไม่ ดังนี้

const existingContexts = await chrome.runtime.getContexts({});
const offscreenDocument = existingContexts.find(
    (c) => c.contextType === 'OFFSCREEN_DOCUMENT'
  );

เหตุผลใหม่ที่ไม่ได้อยู่ในหน้าจอ: GEOLOCATION

มีการเพิ่ม geolocation เป็นเหตุผลที่ถูกต้องอีกข้อหนึ่งในการใช้เอกสารนอกจอภาพ อ่านคู่มือการใช้ตำแหน่งทางภูมิศาสตร์เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีรับตำแหน่งทางภูมิศาสตร์ของส่วนขยายโดยใช้ Offscreen API

chrome.action.setBadgeText()

action.setBadgeText ได้รับการอัปเดตเพื่อแก้ไขปัญหาที่ไม่สอดคล้องกันระหว่างไฟล์ Manifest V2 กับไฟล์ Manifest V3 การส่งสตริงว่างหรือ null ไปยัง action.setBadgeText จะล้างข้อความป้ายของแท็บที่ระบุและเปลี่ยนไปใช้ข้อความป้ายส่วนกลางแทน

action.setBadgeText({tabId: tabId, text: ''});

สรุป: อีกขั้นตอนหนึ่งสำหรับไฟล์ Manifest V3

ด้วยการสนับสนุนตลอดอายุการใช้งาน Service Worker และ API แบบ TabCapture ที่ได้รับการอัปเดต เราจึงดำเนินการตามเป้าหมายเพื่อลดช่องว่างของฟีเจอร์ระหว่างไฟล์ Manifest V2 กับ V3 ดูสถานะปัจจุบันได้ที่หน้าปัญหาที่ทราบ