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.