Extensies zijn toevoegingen aan de browser, ontworpen om extra en aangepaste functionaliteit te bieden. Een extensie die de browse-ervaring vertraagt of verslechtert, is problematisch voor de gebruiker en druist in tegen het doel van Chrome-extensies. Naast algemene goede programmeergewoonten, dienen ontwikkelaars deze richtlijnen te volgen om ervoor te zorgen dat hun extensies optimaal presteren.
Stel alles wat mogelijk is uit.
Laad geen resources totdat ze nodig zijn. Neem alleen datgene op wat nodig is om een extensie te openen in de opstartfunctie. Laad tijdens het opstarten geen zaken die alleen nodig zijn als de gebruiker op een knop klikt, of functies die alleen werken wanneer de gebruiker is ingelogd, voordat de gebruiker de kans krijgt om dit te doen.
Beheer belangrijke evenementen
Een efficiënt achtergrondscript bevat geregistreerde gebeurtenissen die belangrijk zijn voor de betreffende extensie. Deze blijven inactief totdat een listener wordt geactiveerd, waarna ze de juiste actie ondernemen en vervolgens terugkeren naar hun inactieve staat. Het is een belasting voor de systeembronnen om een onnodig script continu te laten draaien.
Achtergrondscripts moeten, indien mogelijk, in het manifest worden geregistreerd met de persistentie-instelling op 'false'.
{
"name": "High Performance Extension",
"description" : "Sleepy Background Script",
"version": "1.0",
...
"background": {
"scripts": ["background.js"],
"persistent": false
},
...
}
De enige reden om een achtergrondscript permanent actief te houden, is wanneer de extensie chrome.webRequest API gebruikt om netwerkverzoeken te blokkeren of te wijzigen. De webRequest API is niet compatibel met niet-permanente achtergrondpagina's.
{
"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"]
);
Bevat inhoudsscripts
Contentscripts zouden moeten functioneren als de geheime agenten van een extensie, die op subtiele wijze gegevens van de webpagina lezen of deze wijzigen, terwijl ze vertrouwen op de kern van de extensie voor de uitvoering van complexere logica. Ze moeten duidelijke doelen hebben om te voorkomen dat ze opdringerige activiteiten uitvoeren op irrelevante pagina's. Idealiter zouden contentscripts onopgemerkt moeten blijven tijdens het browsen, afgezien van hun doelbewuste gedrag.
Doelstellingen vaststellen
Een extensie die scripts uitvoert op onnodige locaties of op ongepaste momenten kan de browser vertragen en mogelijk functionaliteitsfouten veroorzaken. Voorkom dit door matchpatronen in het manifest op te geven en het script uit te voeren bij document_idle in plaats van 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"
}
]
...
}
Als een extensie alleen toegang tot een webpagina nodig heeft op basis van een gebruikersactie, laat deze dan programmatisch injecteren . Een programmatische injectie wordt alleen uitgevoerd wanneer een gebruiker deze oproept.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
code: 'document.body.style.fontSize="100px"'
});
});
Gebruik inhoudsscripts alleen wanneer dat nodig is.
Veel extensies hebben mogelijk helemaal geen contentscript nodig om de gewenste functionaliteit te bereiken. Door de declarativeContent API te gebruiken, kunnen regels worden ingesteld waarmee de extensie herkent wanneer aan de relevante voorwaarden is voldaan. Dit is efficiënter dan een contentscript en vereist minder code!
Als een extensie een pagina-actie aan de gebruiker moest tonen wanneer deze een site bezocht met een HTML5 <video> -element, kon deze een declaratieve regel specificeren.
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() ]
}
]);
});
});
Evalueer de efficiëntie van de code.
Dezelfde algemene principes voor websiteprestaties kunnen worden toegepast op extensies, zoals het implementeren van technieken voor asynchroon programmeren en het minimaliseren en compact houden van de code.
Gebruik tools zoals Lighthouse om de prestaties van een extensie te evalueren en gebieden te identificeren die verbeterd kunnen worden op de visuele weergave van extensiepagina's.