หน้านี้ได้รับการแปลโดย Cloud Translation API

เหตุการณ์ใน 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