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

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

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

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

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

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

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

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

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

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

ใช้เนมสเปซ browser โดยไม่มีเงื่อนไข

ตั้งค่า 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 จะเปิดตัวเนมสเปซและ Listener onMessage ที่แสดงผล Promise แบบเนทีฟพร้อมกันเพื่อหลีกเลี่ยงช่องว่างดังกล่าว

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

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

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

ใน Chrome 148 Listener runtime.onMessage สามารถแสดงผล 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 จะยังคงทำงานต่อไป ดังนั้นจึงไม่จำเป็นต้องเปลี่ยนแปลงโค้ดที่มีอยู่