เหตุการณ์ใน Service Worker

Service Worker ของส่วนขยายรองรับทั้งเหตุการณ์ Service Worker มาตรฐานและเหตุการณ์จำนวนมากใน API ของส่วนขยาย ส่วนนี้จะอธิบายถึงสิ่งที่พร้อมใช้งานและให้เคล็ดลับในการใช้งาน

ประกาศเหตุการณ์ของส่วนขยาย

ต้องประกาศตัวแฮนเดิลเหตุการณ์ใน Service Worker ในขอบเขตส่วนกลาง ซึ่งหมายความว่าควรอยู่ที่ระดับบนสุดของสคริปต์และไม่ควรซ้อนอยู่ภายในฟังก์ชัน ซึ่งจะช่วยให้มั่นใจได้ว่ามีการลงทะเบียนแบบพร้อมกันเมื่อมีการเรียกใช้สคริปต์ครั้งแรก ซึ่งจะช่วยให้ Chrome ส่งเหตุการณ์ไปยัง Service Worker ได้ทันทีที่เริ่มต้น เช่น

browser.storage.local.get(["badgeText"], ({ badgeText }) => {
  browser.action.setBadgeText({ text: badgeText });
  browser.action.onClicked.addListener(handleActionClick);
});

browser.action.onClicked.addListener(handleActionClick);

browser.storage.local.get(["badgeText"], ({ badgeText }) => {
  browser.action.setBadgeText({ text: badgeText });
});

เหตุการณ์ทั่วไป

Service Worker ของส่วนขยายรองรับเหตุการณ์ใน API บางรายการ เราจะอธิบายตัวอย่างที่พบบ่อยบางส่วนในส่วนถัดไป โปรดทราบว่า API บางรายการเหล่านี้ต้องได้รับสิทธิ์ในการใช้งาน และ API อื่นๆ อาจมีเหตุการณ์ เมธอด หรือพร็อพเพอร์ตี้ที่ใช้ไม่ได้ใน Chrome บางเวอร์ชัน ดูรายละเอียดได้ที่เอกสารประกอบเกี่ยวกับ API ที่ลิงก์ไว้ โดยเฉพาะเหตุการณ์ เมธอด หรือพร็อพเพอร์ตี้ที่คุณต้องการใช้

browser.action

ทริกเกอร์เพื่อตอบสนองต่อการโต้ตอบของผู้ใช้กับไอคอนแถบเครื่องมือของส่วนขยาย ไม่ว่าการกระทำนั้นจะเป็นสำหรับหน้าเว็บ (แท็บ) ใดหน้าหนึ่งหรือสำหรับส่วนขยายทั้งหมดก็ตาม

browser.management

แสดงเหตุการณ์ที่เกี่ยวข้องกับการติดตั้ง การถอนการติดตั้ง การเปิดใช้ และการปิดใช้ส่วนขยาย

browser.notifications

แสดงเหตุการณ์ที่เกี่ยวข้องกับการโต้ตอบของผู้ใช้กับการแจ้งเตือนของระบบที่ส่วนขยายสร้างขึ้น

browser.permissions

ระบุเมื่อผู้ใช้ให้หรือเพิกถอนสิทธิ์ของส่วนขยาย

browser.runtime

แสดงเหตุการณ์ที่เกี่ยวข้องกับวงจรของส่วนขยาย ข้อความที่ส่งจากส่วนอื่นๆ ของส่วนขยาย และการแจ้งเตือนเกี่ยวกับส่วนขยายหรือการอัปเดต Chrome ที่พร้อมใช้งาน

browser.storage.onChanged

ทริกเกอร์ทุกครั้งที่ล้างออบเจ็กต์ StorageArea หรือเมื่อมีการเปลี่ยนหรือตั้งค่าของคีย์ โปรดทราบว่าStorageAreaอินสแตนซ์แต่ละรายการมีเหตุการณ์ onChanged ของตัวเอง

browser.webNavigation

ให้ข้อมูลเกี่ยวกับสถานะของคำขอการนำทางในเที่ยวบิน

ตัวกรอง

หากต้องการจำกัดเหตุการณ์ให้ใช้เฉพาะกรณีการใช้งานที่เฉพาะเจาะจง หรือยกเลิกการเรียกเหตุการณ์ที่ไม่จำเป็น ให้ใช้ API ที่รองรับตัวกรองเหตุการณ์ ตัวอย่างเช่น ลองพิจารณาการขยายเวลาที่รอเหตุการณ์ tabs.onUpdated เพื่อตรวจหาเมื่อผู้ใช้ไปยังเว็บไซต์ที่เฉพาะเจาะจง ระบบจะเรียกใช้เหตุการณ์นี้ในการนำทางทุกครั้งในทุกแท็บ ให้ใช้ webNavigation.onCompleted กับตัวกรองแทน เช่น

const filter = {
  url: [
    {
      urlMatches: 'https://www.google.com/',
    },
  ],
};

browser.webNavigation.onCompleted.addListener(() => {
  console.info("The user has loaded my favorite website!");
}, filter);

เหตุการณ์ของ Service Worker บนเว็บ

Service Worker ของส่วนขยายรองรับเหตุการณ์วงจรมากกว่าที่อธิบายไว้ที่อื่น

ServiceWorkerGlobal.fetch

ทริกเกอร์เมื่อมีการดึงข้อมูลจากแพ็กเกจส่วนขยาย หรือเมื่อมีการเรียกใช้ fetch() และ XMLHttpRequest() จากสคริปต์ส่วนขยายหรือป๊อปอัป (Service Worker fetch จะไม่สกัดกั้นการโทรจาก Content Script) ในกรณีหลัง คุณจะต้องเพิ่ม URL ของหน้าที่ต้องการดึงข้อมูลไปยังคีย์ "host_permissions" ใน manifest.json

ServiceWorkerGlobal.message

การส่งข้อความของ Service Worker พร้อมใช้งานนอกเหนือจากการส่งข้อความของส่วนขยาย แต่ทั้ง 2 ระบบทำงานร่วมกันไม่ได้ ซึ่งหมายความว่าตัวแฮนเดิลข้อความของ Service Worker จะไม่สกัดกั้นข้อความที่ส่งโดยใช้ sendMessage() (ซึ่งใช้ได้จาก API ของส่วนขยายหลายรายการ) ในทำนองเดียวกัน ตัวแฮนเดิลข้อความของส่วนขยายจะไม่ดักจับข้อความที่ส่งโดยใช้ postMessage() Service Worker ของส่วนขยายรองรับทั้งตัวแฮนเดิลข้อความทั้ง 2 ประเภท ซึ่งหมายถึงทั้ง ServiceWorkerGlobal.message และ browser.runtime.onMessage

คุณควรใช้การรับส่งข้อความของส่วนขยาย เว้นแต่จะมีเหตุผลเฉพาะในการใช้การรับส่งข้อความของ Service Worker