Capai performa puncak

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

Tunda segala sesuatu yang Mungkin

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

Mengelola acara penting

Skrip latar belakang yang efisien berisi peristiwa terdaftar yang penting untuk ekstensinya. Keduanya berada dalam status dorman hingga pemroses dipicu, melakukan tindakan yang sesuai, lalu kembali ke kondisi tidak aktif. Hal ini menghabiskan resource sistem untuk menjaga agar skrip yang tidak diperlukan tetap berjalan.

Skrip latar belakang harus didaftarkan dalam manifes dengan persistensi yang disetel ke salah (false) jika memungkinkan.

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

Satu-satunya kesempatan untuk membuat skrip latar belakang tetap aktif adalah jika ekstensi menggunakan chrome.webRequest API untuk memblokir atau mengubah permintaan jaringan. webRequest API tidak kompatibel dengan halaman latar belakang yang tidak 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, yang membaca atau mengubah halaman web secara halus, sambil mengandalkan inti ekstensi untuk menjalankan logika yang lebih berat. Aplikasi 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 menimbulkan 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 yang berisi tindakan pengguna, minta ekstensi tersebut dimasukkan secara terprogram. Injeksi terprogram hanya akan berjalan saat pengguna memanggilnya.

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

Gunakan skrip konten hanya jika diperlukan

Banyak ekstensi mungkin tidak memerlukan skrip konten sama sekali untuk menyelesaikan fungsi yang diinginkan. Menggunakan declarativeContent API akan menetapkan aturan agar ekstensi dapat mengenali saat kondisi yang relevan terpenuhi. 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 <video> HTML5, 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 pada 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.