ส่วนขยายคือโปรแกรมที่อิงตามเหตุการณ์ซึ่งใช้ในการแก้ไขหรือปรับปรุงประสบการณ์การท่องเว็บใน Chrome เหตุการณ์คือทริกเกอร์ของเบราว์เซอร์ เช่น การนำทางไปยังหน้าใหม่ การนำบุ๊กมาร์กออก หรือการปิดแท็บ ส่วนขยายจะตรวจสอบเหตุการณ์เหล่านี้ในสคริปต์เบื้องหลัง จากนั้นตอบสนองตามคำสั่งที่ระบุ
หน้าพื้นหลังจะโหลดเมื่อจำเป็น และยกเลิกการโหลดเมื่อไม่มีการใช้งาน ตัวอย่างเหตุการณ์ ได้แก่
- ระบบจะติดตั้งหรืออัปเดตส่วนขยายเป็นเวอร์ชันใหม่ก่อน
- หน้าพื้นหลังได้รอฟังเหตุการณ์ และมีการส่งเหตุการณ์ออกไป
- สคริปต์เนื้อหาหรือส่วนขยายอื่นๆ จะส่งข้อความ
- มุมมองอื่นในส่วนขยาย เช่น ป๊อปอัป หรือการโทร
runtime.getBackgroundPage
เมื่อโหลดแล้ว หน้าพื้นหลังจะยังคงทำงานอยู่ตราบใดที่มีการดำเนินการ เช่น เรียกใช้ Chrome API หรือการส่งคำขอเครือข่าย นอกจากนี้ หน้าพื้นหลังจะไม่ยกเลิกการโหลดจนกว่ามุมมองที่มองเห็นได้ทั้งหมดและพอร์ตข้อความทั้งหมดจะปิด โปรดทราบว่าการเปิดมุมมองไม่ได้ทำให้หน้าเหตุการณ์โหลด แต่จะป้องกันไม่ให้ปิดมุมมองเมื่อโหลดแล้วเท่านั้น
สคริปต์ที่ทำงานอยู่เบื้องหลังซึ่งมีประสิทธิภาพจะไม่มีการใช้งานจนกว่าเหตุการณ์จะทําให้เกิดเพลิงไหม้ ตอบสนองตามคำสั่งที่ระบุ แล้วยกเลิกการโหลด
ลงทะเบียนสคริปต์ที่ทำงานอยู่เบื้องหลัง
สคริปต์พื้นหลังจะบันทึกอยู่ในไฟล์ Manifest ในช่อง "background"
ตัวแปรเหล่านี้จะแสดงอยู่ในอาร์เรย์หลังคีย์ "scripts"
และ "persistent"
ควรระบุเป็น false
{
"name": "Awesome Test Extension",
...
"background": {
"scripts": ["background.js"],
"persistent": false
},
...
}
คุณลงทะเบียนสคริปต์พื้นหลังหลายรายการสำหรับโค้ดแบบแยกส่วนได้
{
"name": "Awesome Test Extension",
...
"background": {
"scripts": [
"backgroundContextMenus.js",
"backgroundOmniBox.js",
"backgroundOauth.js"
],
"persistent": false
},
...
}
หากปัจจุบันส่วนขยายใช้หน้าพื้นหลังแบบถาวร โปรดอ่านคู่มือการย้ายข้อมูลในเบื้องหลังเพื่อดูวิธีเปลี่ยนไปใช้โมเดลที่ไม่ถาวร
เริ่มต้นส่วนขยาย
ฟังเหตุการณ์ runtime.onInstalled
เพื่อเริ่มส่วนขยายการติดตั้ง ใช้เหตุการณ์นี้เพื่อตั้งสถานะหรือสำหรับการเริ่มต้นแบบครั้งเดียว เช่น เมนูตามบริบท
chrome.runtime.onInstalled.addListener(function() {
chrome.contextMenus.create({
"id": "sampleContextMenu",
"title": "Sample Context Menu",
"contexts": ["selection"]
});
});
ตั้งค่า Listener
วางโครงสร้างสคริปต์พื้นหลังตามเหตุการณ์ที่ส่วนขยายใช้อยู่ การกำหนดเหตุการณ์ที่เกี่ยวข้องกับฟังก์ชันจะทำให้สคริปต์เบื้องหลังไม่มีความเคลื่อนไหวจนกว่าเหตุการณ์เหล่านั้นจะเริ่มทำงาน และป้องกันไม่ให้ส่วนขยายขาดทริกเกอร์ที่สำคัญ
Listener ต้องได้รับการลงทะเบียนแบบพร้อมกันตั้งแต่เริ่มต้นหน้าเว็บ
chrome.runtime.onInstalled.addListener(function() {
chrome.contextMenus.create({
"id": "sampleContextMenu",
"title": "Sample Context Menu",
"contexts": ["selection"]
});
});
// This will run when a bookmark is created.
chrome.bookmarks.onCreated.addListener(function() {
// do something
});
อย่าลงทะเบียน Listener แบบไม่พร้อมกัน เนื่องจากตัวเหล่านั้นจะไม่ได้รับการทริกเกอร์อย่างถูกต้อง
chrome.runtime.onInstalled.addListener(function() {
// ERROR! Events must be registered synchronously from the start of
// the page.
chrome.bookmarks.onCreated.addListener(function() {
// do something
});
});
ส่วนขยายจะนำ Listener ออกจากสคริปต์พื้นหลังได้โดยเรียกใช้ removeListener
หากผู้ฟังทั้งหมดสําหรับเหตุการณ์หนึ่งๆ ถูกนำออก Chrome จะไม่โหลดสคริปต์พื้นหลังของส่วนขยายสําหรับเหตุการณ์นั้นอีกต่อไป
chrome.runtime.onMessage.addListener(function(message, sender, reply) {
chrome.runtime.onMessage.removeListener(event);
});
กรองเหตุการณ์
ใช้ API ที่รองรับตัวกรองเหตุการณ์เพื่อจำกัด Listener ให้ครอบคลุมเฉพาะกรณีที่ส่วนขยายสนใจ หากส่วนขยายกําลังรอเหตุการณ์ tabs.onUpdated
ให้ลองใช้เหตุการณ์ webNavigation.onCompleted
กับตัวกรองแทน เนื่องจาก API ของแท็บไม่รองรับตัวกรอง
chrome.webNavigation.onCompleted.addListener(function() {
alert("This is my favorite website!");
}, {url: [{urlMatches : 'https://www.google.com/'}]});
แสดงความรู้สึกต่อผู้ฟัง
Listener มีไว้เพื่อเรียกใช้ฟังก์ชันการทำงานเมื่อเหตุการณ์เริ่มทำงานแล้ว ในการตอบสนองต่อเหตุการณ์ ให้กำหนดโครงสร้างปฏิกิริยาที่ต้องการภายในเหตุการณ์ Listener
chrome.runtime.onMessage.addListener(function(message, callback) {
if (message.data == "setAlarm") {
chrome.alarms.create({delayInMinutes: 5})
} else if (message.data == "runLogic") {
chrome.tabs.executeScript({file: 'logic.js'});
} else if (message.data == "changeColor") {
chrome.tabs.executeScript(
{code: 'document.body.style.backgroundColor="orange"'});
};
});
ยกเลิกการโหลดสคริปต์เบื้องหลัง
ควรเก็บข้อมูลไว้เป็นระยะๆ เพื่อไม่ให้ข้อมูลสำคัญสูญหายหากส่วนขยายขัดข้องโดยไม่ได้รับ onSuspend
โปรดใช้ storage API เพื่อช่วยเหลือในเรื่องนี้
chrome.storage.local.set({variable: variableInformation});
หากส่วนขยายใช้การส่งข้อความ ให้ตรวจสอบว่าพอร์ตทั้งหมดปิดอยู่ สคริปต์เบื้องหลังจะไม่ยกเลิกการโหลดจนกว่าพอร์ตข้อความทั้งหมดจะปิดลง การฟังเหตุการณ์ runtime.Port.onDisconnect จะให้ข้อมูลเชิงลึกเมื่อพอร์ตที่เปิดอยู่กำลังปิด ให้ปิดส่วนขยายด้วยตนเองโดยใช้ runtime.Port.disconnect
chrome.runtime.onMessage.addListener(function(message, callback) {
if (message == 'hello') {
sendResponse({greeting: 'welcome!'})
} else if (message == 'goodbye') {
chrome.runtime.Port.disconnect();
}
});
คุณสามารถตรวจสอบอายุการใช้งานของสคริปต์เบื้องหลังได้โดยการตรวจสอบว่ารายการสำหรับส่วนขยายปรากฏขึ้นและหายไปจากตัวจัดการงานของ Chrome เมื่อใด
เปิดตัวจัดการงานโดยคลิกที่เมนู Chrome จากนั้นวางเมาส์เหนือเครื่องมือเพิ่มเติมแล้วเลือก "ตัวจัดการงาน"
สคริปต์เบื้องหลังจะยกเลิกการโหลดด้วยตัวเองหลังจากที่ไม่มีการใช้งานเป็นเวลา 2-3 วินาที หากต้องล้างข้อมูลในนาทีสุดท้าย
ให้ฟังเหตุการณ์ runtime.onSuspend
chrome.runtime.onSuspend.addListener(function() {
console.log("Unloading.");
chrome.browserAction.setBadgeText({text: ""});
});
อย่างไรก็ตาม คุณควรใช้ข้อมูลคงเดิมมากกว่าการใช้ runtime.onSuspend
ทำให้ไม่สามารถล้างข้อมูลได้มากเท่าที่จำเป็น และจะไม่ช่วยแก้ปัญหาในกรณีที่เกิดข้อขัดข้อง