Capai performa puncak

Ekstensi adalah tambahan pada browser, yang dirancang untuk menyediakan fungsi tambahan dan yang disesuaikan. Ekstensi yang memperlambat atau mengganggu pengalaman penjelajahan bermasalah bagi pengguna dan bertentangan dengan tujuan ekstensi Chrome. Selain kebiasaan coding yang baik secara umum, developer harus mengikuti praktik ini untuk memastikan ekstensi mereka berjalan dengan performa terbaik.

Tunda semua yang Mungkin

Jangan memuat resource hingga diperlukan. Sertakan hanya hal yang diperlukan untuk membuka ekstensi dalam fungsi startup-nya. Jangan memuat hal-hal selama startup yang hanya diperlukan jika pengguna mengklik tombol, atau fitur yang hanya berfungsi saat pengguna login sebelum mereka memiliki kesempatan untuk melakukannya.

Mengelola peristiwa penting

Skrip latar belakang yang efisien berisi peristiwa terdaftar yang penting untuk ekstensi. Skrip tersebut tidak aktif hingga pemroses dipicu, bertindak sesuai, lalu kembali ke status tidak aktif. Menjalankan skrip yang tidak diperlukan akan menghabiskan resource sistem.

Skrip latar belakang harus didaftarkan dalam manifes dengan persistensinya ditetapkan ke false jika memungkinkan.

{
  "name": "High Performance Extension",
  "description" : "Sleepy Background Script",
  "version": "1.0",
  ...
  "background": {
   "scripts": ["background.js"],
   "persistent": false
  },
  ...
}

Satu-satunya alasan untuk membuat skrip latar belakang tetap aktif secara persisten adalah jika ekstensi menggunakan chrome.webRequest API untuk memblokir atau mengubah permintaan jaringan. WebRequest API tidak kompatibel dengan halaman latar belakang non-persisten.

{
  "name": "High Performance Extension",
  "description" : "Persistent Background Script",
  "version": "1.0",
  ...
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "https://<distracting social media site>.com/*"
  ],
 ...
}

chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    return {redirectUrl: "/"};
  },
  {urls: ["https://social.media.distraction.com/*"]},
  ["blocking"]
);

Berisi skrip konten

Skrip konten harus berfungsi sebagai agen rahasia ekstensi, membaca atau mengubah halaman web secara halus sambil mengandalkan inti ekstensi untuk menjalankan logika yang lebih berat. Skrip konten harus memiliki target yang jelas untuk menghindari aktivitas invasif di halaman yang tidak relevan. Idealnya, skrip konten tidak boleh terlihat dalam pengalaman penjelajahan selain perilaku yang disengaja.

Mendeklarasikan target

Ekstensi yang menjalankan skrip konten di lokasi yang tidak diperlukan atau pada waktu yang tidak tepat dapat menyebabkan browser melambat dan berpotensi membuat error fungsi. Hindari hal ini dengan memberikan pola kecocokan dalam manifes dan menjalankan skrip di document_idle, bukan document_start.

{
  "name": "High Performance Extension",
  "description" : "Superfly Superlight Content Scripts",
  "version": "1.0",
  ...
  "content_scripts": [
    {
      "js": ["content_script.js"],
      "matches": ["/*"],
      "run_at": "document_idle"
    }
  ]
  ...
}

Jika ekstensi hanya perlu mengakses halaman web dengan tindakan pengguna, pastikan ekstensi tersebut disisipkan secara terprogram. Penyisipan terprogram hanya akan berjalan saat pengguna memanggilnya.

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript({
    code: 'document.body.style.fontSize="100px"'
  });
});

Menggunakan skrip konten hanya jika diperlukan

Banyak ekstensi mungkin tidak memerlukan skrip konten sama sekali untuk mencapai fungsi yang diinginkan. Menggunakan the declarativeContent API akan menetapkan aturan agar ekstensi mengenali kapan kondisi yang relevan terpenuhi. Hal ini lebih efisien daripada skrip konten dan menggunakan lebih sedikit kode.

Jika ekstensi perlu menampilkan tindakan halaman kepada pengguna saat mereka mengunjungi situs dengan elemen HTML5 <video>, ekstensi tersebut dapat menentukan aturan deklaratif.

chrome.runtime.onInstalled.addListener(function() {
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([
      {
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            css: ["video"],
          })
        ],
        actions: [ new chrome.declarativeContent.ShowPageAction() ]
      }
    ]);
  });
});

Mengevaluasi efisiensi kode

Praktik umum yang sama untuk performa situs dapat diterapkan ke ekstensi seperti menerapkan teknik pemrograman asinkron dan menjaga kode tetap minimal dan ringkas.

Gunakan alat, seperti Lighthouse, untuk mengevaluasi performa ekstensi dan menargetkan area yang dapat ditingkatkan di halaman ekstensi visual.