Extensies zijn een aanvulling op de browser, ontworpen om aanvullende en op maat gemaakte functionaliteit te bieden. Een extensie die de browse-ervaring vertraagt of schaadt, is problematisch voor de gebruiker en in strijd met het doel van de Chrome-extensie. Naast de algemene goede codeergewoonten moeten ontwikkelaars deze praktijken volgen om ervoor te zorgen dat hun extensies optimaal presteren.
Stel alles mogelijk uit
Laad geen grondstoffen totdat ze nodig zijn. Neem alleen op wat nodig is om een extensie te openen in de opstartfunctie. Laad tijdens het opstarten geen dingen die alleen nodig zijn als de gebruiker op een knop klikt, of functies die alleen werken als de gebruiker is ingelogd voordat hij daartoe de kans heeft.
Beheer belangrijke evenementen
Een efficiënt achtergrondscript bevat geregistreerde gebeurtenissen die belangrijk zijn voor hun uitbreiding. Ze blijven inactief totdat een luisteraar wordt geactiveerd, handelen dienovereenkomstig en keren dan terug naar een slapende toestand. Het kost veel systeembronnen om een onnodig script draaiende te houden.
Achtergrondscripts moeten in het manifest worden geregistreerd, waarbij de persistentie indien mogelijk is ingesteld op false.
{
"name": "High Performance Extension",
"description" : "Sleepy Background Script",
"version": "1.0",
...
"background": {
"scripts": ["background.js"],
"persistent": false
},
...
}
De enige gelegenheid om een achtergrondscript blijvend actief te houden is als de extensie de chrome.webRequest API gebruikt om netwerkverzoeken te blokkeren of te wijzigen. De webRequest API is niet compatibel met niet-persistente 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
Inhoudsscripts zouden moeten werken als de geheime agenten van een extensie, waarbij ze op subtiele wijze de webpagina lezen of wijzigen, terwijl ze vertrouwen op de kern van de extensie voor zwaardere logica. Ze moeten duidelijke doelstellingen hebben om invasieve activiteiten op irrelevante pagina's te voorkomen. Idealiter zouden inhoudsscripts onopgemerkt moeten blijven tijdens de browse-ervaring, afgezien van doelgericht gedrag.
Doelstellingen declareren
Een extensie die inhoudsscripts op onnodige locaties of op ongepaste tijden uitvoert, kan ervoor zorgen dat de browser trager wordt en mogelijk functionaliteitsfouten veroorzaakt. Voorkom dit door overeenkomstpatronen in het manifest aan te bieden en het script uit te voeren op 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 hoeft te krijgen tot een webpagina met een actie van de gebruiker, laat deze dan programmatisch injecteren . Een programmatische injectie wordt alleen uitgevoerd wanneer een gebruiker deze aanroept.
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 inhoudsscript nodig om de gewenste functionaliteit te bereiken. Met behulp van de declarativeContent API worden regels ingesteld zodat de extensie herkent wanneer aan relevante voorwaarden wordt voldaan. Dit is efficiënter dan een contentscript en gebruikt minder code!
Als een extensie een paginaactie moet weergeven aan de gebruiker wanneer deze een site bezoekt met een HTML5 <video> -element, kan 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 code-efficiëntie
Dezelfde algemene praktijken voor websiteprestaties kunnen worden toegepast op extensies, zoals het implementeren van technieken voor asynchrone programmering en het minimaal en compact houden van code.
Gebruik tools, zoals Lighthouse , om de prestaties van een extensie te evalueren en gebieden te targeten die kunnen worden verbeterd op visuele extensiepagina's.