Capai performa puncak

Ekstensi adalah tambahan untuk browser, yang dirancang untuk memberikan fungsionalitasnya. Ekstensi yang memperlambat atau mengganggu pengalaman penjelajahan bermasalah pengguna dan penghitung ke tujuan ekstensi Chrome. Selain kebiasaan {i>coding<i} yang umumnya baik, developer harus mengikuti praktik ini untuk memastikan ekstensi mereka berjalan dengan performa terbaik.

Tunda Semua yang Mungkin

Jangan memuat resource sampai diperlukan. Sertakan hanya apa yang diperlukan untuk membuka dalam fungsi startup-nya. Jangan memuat komponen yang hanya diperlukan selama startup pengguna mengeklik tombol, atau fitur yang hanya berfungsi ketika pengguna {i>login<i} sebelum mereka kesempatan untuk melakukannya.

Mengelola acara penting

Skrip latar yang efisien berisi peristiwa terdaftar yang penting bagi . Mereka berbaring dorman sampai pendengar terpicu, bertindak dengan sesuai, kemudian kembali ke dorman status. Hal ini menghabiskan sumber daya sistem untuk menjaga skrip yang tidak diperlukan tetap berjalan.

Skrip latar belakang harus didaftarkan dalam manifes dengan persistensinya disetel ke false jika sebaik mungkin.

{
  "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 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, yang membaca secara halus dari atau mengubah halaman web sambil mengandalkan inti ekstensi untuk mengerjakan logika yang lebih berat. Mereka seharusnya memiliki target yang jelas untuk menghindari aktivitas invasif pada halaman yang tidak relevan. Idealnya, skrip konten harus tidak terlihat dalam pengalaman penjelajahan selain perilaku yang terarah.

Mendeklarasikan target

Ekstensi yang menjalankan skrip konten di lokasi yang tidak diperlukan atau pada waktu yang tidak tepat dapat menyebabkan browser menjadi melambat dan berpotensi menimbulkan kesalahan fungsi. Hindari hal ini dengan memberikan kecocokan pola dalam manifes dan menjalankan skrip di document_idle, bukan di 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 dengan tindakan pengguna, pastikan ekstensi 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 yang mungkin tidak memerlukan skrip konten sama sekali untuk mencapai fungsi yang diinginkan. Menggunakan declarativeContent API akan menetapkan aturan bagi ekstensi agar dapat mengenali kondisi yang relevan terpenuhi. Ini lebih efisien daripada skrip konten dan menggunakan lebih sedikit kode.

Jika ekstensi diperlukan untuk menampilkan tindakan halaman kepada pengguna saat mereka mengunjungi situs dengan HTML5 <video>, 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 mengimplementasikan pemrograman asinkron dan menjaga kode tetap minimal dan ringkas.

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