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

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

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

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

ไม่แนะนํา

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

ดีขึ้น

chrome.action.onClicked.addListener(handleActionClick);

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

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

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

chrome.action

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

chrome.management

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

chrome.notifications

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

chrome.permissions

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

chrome.runtime

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

chrome.storage.onChanged

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

chrome.webNavigation

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

ตัวกรอง

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

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

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

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

เจ้าหน้าที่ฝ่ายสนับสนุนด้านเทคนิคสามารถให้ความช่วยเหลือเกี่ยวกับเหตุการณ์ในวงจรของลูกค้าได้มากกว่าที่อธิบายไว้ที่อื่น

ServiceWorkerGlobal.fetch

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

ServiceWorkerGlobal.message

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

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