Mengelola peristiwa dengan skrip latar belakang

Ekstensi adalah program berbasis peristiwa yang digunakan untuk memodifikasi atau meningkatkan pengalaman penjelajahan Chrome. Peristiwa adalah pemicu browser, seperti membuka halaman baru, menghapus bookmark, atau menutup tab. Ekstensi memantau peristiwa ini di skrip latar belakangnya, lalu bereaksi dengan petunjuk yang ditentukan.

Halaman latar belakang dimuat saat diperlukan, dan dibongkar saat tidak ada aktivitas. Beberapa contoh peristiwa mencakup:

• Ekstensi diinstal atau diupdate terlebih dahulu ke versi baru.
• Halaman latar belakang mendengarkan sebuah peristiwa, dan peristiwa tersebut akan dikirim.
• Skrip konten atau ekstensi lainnya mengirim pesan.
• Tampilan lain di ekstensi, seperti pop-up, memanggil runtime.getBackgroundPage.

Setelah dimuat, halaman latar belakang akan tetap berjalan selama menjalankan tindakan, seperti memanggil Chrome API atau mengeluarkan permintaan jaringan. Selain itu, halaman latar belakang tidak akan menghapus muatan sampai semua tampilan yang terlihat dan semua port pesan ditutup. Perhatikan bahwa membuka tampilan tidak menyebabkan halaman peristiwa dimuat, tetapi hanya mencegahnya ditutup setelah dimuat.

Skrip latar belakang yang efektif tetap tidak aktif hingga peristiwa yang mendeteksi kebakaran, bereaksi dengan petunjuk yang ditentukan, lalu menghapus muatan.

Mendaftarkan skrip latar belakang

Skrip latar belakang didaftarkan dalam manifes di kolom "background". Nilai tersebut dicantumkan dalam array setelah kunci "scripts", dan "persistent" harus ditetapkan sebagai false.

{
  "name": "Awesome Test Extension",
  ...
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  ...
}

Beberapa skrip latar belakang dapat didaftarkan untuk kode modular.

{
    "name": "Awesome Test Extension",
    ...
    "background": {
      "scripts": [
        "backgroundContextMenus.js",
        "backgroundOmniBox.js",
        "backgroundOauth.js"
      ],
      "persistent": false
    },
    ...
  }

Jika ekstensi saat ini menggunakan halaman latar belakang persisten, lihat Panduan Migrasi Latar Belakang untuk mendapatkan petunjuk tentang cara beralih ke model non-persisten.

Menginisialisasi ekstensi

Proses peristiwa runtime.onInstalled untuk menginisialisasi ekstensi saat penginstalan. Gunakan peristiwa ini untuk menetapkan status atau inisialisasi satu kali, seperti menu konteks.

chrome.runtime.onInstalled.addListener(function() {
  chrome.contextMenus.create({
    "id": "sampleContextMenu",
    "title": "Sample Context Menu",
    "contexts": ["selection"]
  });
});

Menyiapkan pemroses

Membuat struktur skrip latar belakang di seputar peristiwa yang menjadi dependensi ekstensi. Menentukan peristiwa yang relevan secara fungsional memungkinkan skrip latar belakang untuk tidak aktif hingga peristiwa tersebut diaktifkan dan mencegah ekstensi kehilangan pemicu penting.

Pemroses harus didaftarkan secara sinkron dari awal halaman.

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
});

Jangan mendaftarkan pemroses secara asinkron, karena pemroses tersebut tidak akan dipicu dengan benar.

chrome.runtime.onInstalled.addListener(function() {
  // ERROR! Events must be registered synchronously from the start of
  // the page.
  chrome.bookmarks.onCreated.addListener(function() {
    // do something
  });
});

Ekstensi dapat menghapus pemroses dari skrip latar belakangnya dengan memanggil removeListener. Jika semua pemroses untuk peristiwa dihapus, Chrome tidak akan lagi memuat skrip latar belakang ekstensi untuk peristiwa tersebut.

chrome.runtime.onMessage.addListener(function(message, sender, reply) {
    chrome.runtime.onMessage.removeListener(event);
});

Filter peristiwa

Gunakan API yang mendukung filter peristiwa untuk membatasi pemroses ke kasus yang ditangani ekstensi. Jika ekstensi memproses peristiwa tabs.onUpdated, coba gunakan peristiwa webNavigation.onCompleted dengan filter, karena API tab tidak mendukung filter.

chrome.webNavigation.onCompleted.addListener(function() {
    alert("This is my favorite website!");
}, {url: [{urlMatches : 'https://www.google.com/'}]});

Merespons pemroses

Pemroses ada untuk memicu fungsi setelah peristiwa diaktifkan. Untuk bereaksi terhadap peristiwa, buat struktur reaksi yang diinginkan di dalam peristiwa pemroses.

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"'});
  };
});

Batalkan pemuatan skrip latar belakang

Data harus disimpan secara berkala agar informasi penting tidak hilang jika ekstensi mengalami error tanpa menerima onSuspend. Gunakan storage API untuk membantu melakukannya.

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

Jika ekstensi menggunakan penyampaian pesan, pastikan semua port ditutup. Skrip latar belakang tidak akan menghapus muatan sampai semua port pesan dimatikan. Memproses peristiwa runtime.Port.onDisconnect akan memberikan insight saat port yang terbuka ditutup. Tutup secara manual dengan runtime.Port.disconnect.

chrome.runtime.onMessage.addListener(function(message, callback) {
  if (message == 'hello') {
    sendResponse({greeting: 'welcome!'})
  } else if (message == 'goodbye') {
    chrome.runtime.Port.disconnect();
  }
});

Masa aktif skrip latar belakang dapat diamati dengan memantau kapan entri untuk ekstensi muncul dan menghilang dari pengelola tugas Chrome.

Buka pengelola tugas dengan mengklik Menu Chrome, mengarahkan kursor ke alat lainnya, lalu memilih "Pengelola Tugas".

Skrip latar belakang menghapus muatannya sendiri setelah tidak aktif selama beberapa detik. Jika pembersihan menit terakhir diperlukan, proses peristiwa runtime.onSuspend.

chrome.runtime.onSuspend.addListener(function() {
  console.log("Unloading.");
  chrome.browserAction.setBadgeText({text: ""});
});

Namun, mempertahankan data harus lebih diprioritaskan daripada mengandalkan runtime.onSuspend. Metode ini tidak memungkinkan pembersihan sebanyak yang mungkin diperlukan dan tidak akan membantu jika terjadi error.