ย้ายข้อมูลไปยังสคริปต์พื้นหลังที่ขับเคลื่อนด้วยเหตุการณ์

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

ปรับปรุงประสิทธิภาพของส่วนขยายด้วยการย้ายข้อมูลสคริปต์พื้นหลังแบบถาวรไปยังรูปแบบแบบไม่ถาวรซึ่งอิงตามเหตุการณ์ โดยค่าเริ่มต้น ระบบจะตั้งค่า "persistent" เป็น "จริง"

กำหนดค่าการคงอยู่เป็นเท็จ

ค้นหาคีย์ "background" ในไฟล์ manifest ของส่วนขยาย จากนั้นเพิ่มหรืออัปเดตช่อง "persistent" เป็น false

{
  "name": "My extension",
  ...
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  ...
}

เช่นเดียวกับสคริปต์เบื้องหลังที่ใช้ไฟล์ HTML

{
  "name": "My extension",
  ...
  "background": {
    "page": "background.html",
    "persistent": false
  },
  ...
}

Listener เหตุการณ์ของ Surface

Listener จะต้องอยู่ที่ระดับบนสุดเพื่อเปิดใช้งานสคริปต์พื้นหลังหากมีการทริกเกอร์เหตุการณ์สำคัญ ผู้ฟังที่ลงทะเบียนไว้อาจต้องได้รับการจัดโครงสร้างใหม่ให้เป็นรูปแบบแบบซิงค์ การกำหนดผู้ฟังตามโครงสร้างด้านล่างนี้จะไม่อนุญาตให้เรียกใช้โปรแกรมดังกล่าวเนื่องจากไม่ได้ลงทะเบียนแบบพร้อมกัน

chrome.storage.local.get('runtimeEvents', function (events) {
  for (let event of events)
    chrome.runtime[event].addListener(listener);
});

แต่ให้เก็บตัวฟังไว้ที่ระดับบนสุดและไม่ซ้อนกัน

chrome.runtime.onStartup.addListener(function() {
  // run startup function
})

บันทึกการเปลี่ยนแปลงสถานะในพื้นที่เก็บข้อมูล

ใช้ storage API เพื่อตั้งค่าและแสดงผลสถานะและค่า ใช้ local.set เพื่ออัปเดตในเครื่อง

  chrome.storage.local.set({ variable: variableInformation });

ใช้ local.get เพื่อดึงค่าของตัวแปรนั้น

chrome.storage.local.get(['variable'], function(result) {
  let awesomeVariable = result.variable;
  // Do something with awesomeVariable
});

เปลี่ยนตัวจับเวลาเป็นนาฬิกาปลุก

ตัวจับเวลาตาม DOM เช่น window.setTimeout() หรือ window.setInterval() จะไม่ทำงานในสคริปต์เบื้องหลังแบบไม่ถาวรหากมีการทริกเกอร์เมื่อหน้าเหตุการณ์หยุดทำงาน

let timeout = 1000 * 60 * 3;  // 3 minutes in milliseconds
window.setTimeout(function() {
  alert('Hello, world!');
}, timeout);

แต่ให้ใช้ alarms API แทน

chrome.alarms.create({delayInMinutes: 3.0})

จากนั้นเพิ่มผู้ฟัง

chrome.alarms.onAlarm.addListener(function() {
  alert("Hello, world!")
});

อัปเดตการเรียกใช้ฟังก์ชันสคริปต์เบื้องหลัง

หากใช้ extension.getBackgroundPage เพื่อเรียกฟังก์ชันจากหน้าเบื้องหลัง ให้อัปเดตเป็น runtime.getBackgroundPage เมธอดที่ใหม่กว่าจะเปิดใช้งานสคริปต์ที่ไม่ถาวรก่อนส่งกลับ

function backgroundFunction() {
  alert('Background, reporting for duty!')
}

document.getElementById('target').addEventListener('click', function(){
  chrome.extension.getBackgroundPage().backgroundFunction();
});

วิธีการนี้จะไม่ทํางานหากสคริปต์เบื้องหลังไม่ทำงาน ซึ่งเป็นสถานะเริ่มต้นของสคริปต์แบบไม่ถาวร วิธีการที่ใหม่กว่าจะมีฟังก์ชัน Callback เพื่อตรวจสอบว่าได้โหลดสคริปต์พื้นหลังแล้ว

document.getElementById('target').addEventListener('click', function() {
  chrome.runtime.getBackgroundPage(function(backgroundPage){
    backgroundPage.backgroundFunction()
  })
});