เปลี่ยนไปใช้เนมสเปซของเบราว์เซอร์

ตั้งแต่ Chrome 148 เป็นต้นไป API ของส่วนขยาย Chrome ทั้งหมดจะพร้อมใช้งานภายใต้เนมสเปซ browser นอกเหนือจากเนมสเปซ chrome ที่มีอยู่ เช่น browser.tabs.create({}) และ chrome.tabs.create({}) มีค่าเท่ากัน

เนมสเปซจะพร้อมใช้งานทุกที่ที่คุณเรียกใช้ API ส่วนขยายได้ ซึ่งรวมถึง Content Script, Service Worker และเอกสารนอกหน้าจอ โดยจะชี้ไปยัง ออบเจ็กต์ API เดียวกันกับ chrome ดังนั้น chrome.tabs === browser.tabs

เนมสเปซ browser มาจากการทำงานใน WebExtensions Community Group (WECG) ซึ่งเป็นกลุ่มชุมชน W3C ที่ผู้ให้บริการเบราว์เซอร์ร่วมมือกันในมาตรฐานส่วนขยายที่ใช้ร่วมกัน chrome เนมสเปซจะยังคงอยู่และทั้ง 2 เนมสเปซจะยังคงทำงานต่อไป

เลือกว่าจะใช้เนมสเปซของเบราว์เซอร์หรือไม่

หากคุณใช้ webextension-polyfill ให้ข้ามไปที่หมายเหตุสำหรับผู้ใช้ Polyfill ก่อนที่จะเปลี่ยนแปลงสิ่งอื่นใด เนื่องจากคำตอบจะแตกต่างกันสำหรับคุณ

หากคุณกำลังสร้างส่วนขยายใหม่ ให้ตั้งค่า minimum_chrome_version เป็น "148" และใช้ browser โดยไม่มีเงื่อนไข คุณหยุดอ่านได้ตั้งแต่ตรงนี้ ส่วนที่เหลือของส่วนนี้มีไว้สำหรับส่วนขยายที่มีอยู่ซึ่งกำลังตัดสินใจว่าจะนำมาใช้หรือไม่

ตรวจสอบว่าผู้ใช้ใช้ Chrome เวอร์ชันใด

หากคุณมีส่วนขยายอยู่แล้ว ให้ตรวจสอบว่าผู้ใช้กำลังใช้ Chrome เวอร์ชันใดอยู่ก่อนที่จะเปลี่ยน Chrome จะอัปเดตอัตโนมัติ แต่ผู้ใช้บางรายปิดใช้การอัปเดต และผู้ใช้บางรายใช้อุปกรณ์รุ่นเก่าที่ไม่สามารถเรียกใช้เวอร์ชันล่าสุดได้ ยืนยันด้วยข้อมูลวิเคราะห์ของคุณเอง หากยังไม่ได้ตั้งค่าข้อมูลวิเคราะห์ โปรดดู ตรวจสอบประสิทธิภาพของส่วนขยายด้วย Google Analytics 4 เพื่อเริ่มต้นใช้งาน

จากนั้นเลือกเส้นทางต่อไปนี้

รับบุตรบุญธรรมโดยไม่มีเงื่อนไข

ตั้งค่า minimum_chrome_version ในไฟล์ Manifest และใช้ browser โดยไม่มีเงื่อนไข ไม่จำเป็นต้องใช้การป้องกันรันไทม์

{
  "minimum_chrome_version": "148"
}

ใช้การเปิดตัวแบบทีละขั้นเมื่อเพิ่ม minimum_chrome_version หากเกิดข้อผิดพลาด คุณสามารถย้อนกลับส่วนขยายใน Chrome เว็บสโตร์ได้

ใช้การ์ดรันไทม์

เพิ่มข้อมูลโค้ดต่อไปนี้ในช่วงต้นของโค้ดเริ่มต้นของส่วนขยายก่อน อ้างอิง browser ที่อื่น

if (!globalThis.browser) {
  globalThis.browser = chrome;
  // Consider firing an analytics event here to measure how often
  // your users hit this fallback path.
}

ซึ่งทำให้ browser เป็นชื่อแทนของ chrome ในเวอร์ชันก่อนหน้า ดังนั้นโค้ดที่เหลือ จึงใช้ browser ได้โดยไม่มีเงื่อนไข

หมายเหตุสำหรับผู้ใช้ Polyfill

หากส่วนขยายใช้ webextension-polyfill ส่วนขยายจะ ไม่มีการดำเนินการใดๆ ใน Chrome 148 ขึ้นไป Polyfill จะข้ามการห่อเมื่อมีการกำหนด browser อยู่แล้ว โดยถือว่าเบราว์เซอร์โฮสต์ได้ให้ API ไว้แล้ว

ก่อนหน้านี้เราได้พยายามเปิดตัวเนมสเปซใน Chrome 136 แต่ต้องย้อนกลับเนื่องจากเหตุผลนี้: เมื่อมีการกำหนด browser ใหม่ Polyfill จะหยุดการห่อ แต่ browser.runtime.onMessage ของ Chrome ยังไม่รองรับ Listener ที่ส่งคืน Promise ซึ่งเป็นสิ่งที่ Polyfill มีให้ ส่วนขยายที่ใช้รูปแบบดังกล่าวจึงใช้งานไม่ได้ Chrome 148 จะจัดส่งเนมสเปซและเครื่องมือฟังที่ส่งคืนสัญญาดั้งเดิม onMessageพร้อมกันเพื่อหลีกเลี่ยงช่องว่างดังกล่าว

คุณสามารถนำทรัพยากร Dependency ของ Polyfill ออกได้เมื่อฐานผู้ใช้ย้ายไปใช้ Chrome 148 แล้ว

ฟีเจอร์อื่นๆ

การตอบกลับแบบไม่พร้อมกันใน runtime.sendMessage

ใน Chrome 148 runtime.onMessage Listener สามารถส่งคืน Promise โดยตรง เพื่อส่งการตอบกลับแบบไม่พร้อมกัน ซึ่งจะใช้ได้ไม่ว่าคุณจะเรียกใช้โดยใช้ chrome.* หรือ browser.*

ก่อนหน้านี้วิธีเดียวในการตอบกลับแบบอะซิงโครนัสคือการส่งคืนลิเทอรัล true จาก Listener และเรียกใช้ sendResponse ในภายหลัง

// Old pattern - requires returning true to keep the channel open
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  fetch('https://example.com')
    .then(response => sendResponse({ statusCode: response.status }));

  return true; // keeps the message channel open for the async response
});

ตอนนี้คุณสามารถส่งคืน Promise (หรือใช้ฟังก์ชัน async) ได้โดยตรง

// New pattern - return a promise or use async/await
browser.runtime.onMessage.addListener(async (message, sender) => {
  const response = await fetch('https://example.com');
  return { statusCode: response.status };
});

รูปแบบ return true จะยังคงใช้งานได้ต่อไป ดังนั้นจึงไม่จำเป็นต้องเปลี่ยนแปลงโค้ดที่มีอยู่