จัดการกิจกรรมด้วยสคริปต์เบื้องหลัง

ส่วนขยายคือโปรแกรมที่อิงตามเหตุการณ์ซึ่งใช้ในการแก้ไขหรือปรับปรุงประสบการณ์การท่องเว็บใน 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 ทำให้ไม่สามารถล้างข้อมูลได้มากเท่าที่จำเป็น และจะไม่ช่วยแก้ปัญหาในกรณีที่เกิดข้อขัดข้อง