Le estensioni sono un'aggiunta al browser e sono progettate per fornire funzionalità supplementari e personalizzate. Un'estensione che rallenta o compromette l'esperienza di navigazione è problematica per l'utente e in contrasto con l'obiettivo dell'estensione di Chrome. Oltre alle buone abitudini di programmazione, gli sviluppatori dovrebbero seguire queste prassi per garantire che le loro estensioni funzionino al massimo delle prestazioni.
Rimanda tutto il possibile
Evita di caricare le risorse finché non sono necessarie. Includi solo ciò che serve per aprire un'estensione nella sua funzione di avvio. Durante l'avvio, non caricare elementi che sono necessari solo se l'utente fa clic su un pulsante o funzionalità che funzionano solo quando l'utente ha eseguito l'accesso prima che sia possibile farlo.
Gestire gli eventi importanti
Uno script in background efficiente contiene eventi registrati che sono importanti per la loro estensione. Rimangono inattivi fino a quando un listener non viene attivato, agiscono di conseguenza per poi tornare allo stato inattivo. Si tratta di uno svuotamento delle risorse del sistema per mantenere in esecuzione uno script non necessario.
Gli script in background devono essere registrati nel file manifest con la persistenza impostata su false, se possibile.
{
"name": "High Performance Extension",
"description" : "Sleepy Background Script",
"version": "1.0",
...
"background": {
"scripts": ["background.js"],
"persistent": false
},
...
}
L'unica occasione per mantenere uno script in background permanente è quando l'estensione utilizza
l'API chrome.webRequest per bloccare o modificare le richieste di rete. L'API webRequest non è compatibile
con le pagine in background non persistenti.
{
"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"]
);
Contengono script di contenuti.
Gli script di contenuti dovrebbero funzionare come agenti segreti di un'estensione, in quanto leggono o modificano leggermente la pagina web affidandosi al core dell'estensione per funzionare in modo più pesante. Dovrebbero avere obiettivi chiari per evitare attività invasive sulle pagine non pertinenti. Idealmente, gli script di contenuti non dovrebbero passare inosservati nell'esperienza di navigazione, a parte il comportamento intenzionale.
Dichiara i target
Un'estensione che esegue script di contenuti in posizioni non necessarie o in momenti inappropriati può causare il rallentamento del browser e potenzialmente creare errori di funzionalità. Per evitare questo problema, fornisci pattern di corrispondenza nel manifest ed esegui lo script su document_idle anziché 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"
}
]
...
}
Se un'estensione dovrà soltanto accedere a una pagina web con l'azione dell'utente, fai in modo che venga inserita in modo programmatico. Un inserimento programmatico viene eseguito solo quando viene richiamato da un utente.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
code: 'document.body.style.fontSize="100px"'
});
});
Utilizza script di contenuti solo quando necessario
Molte estensioni potrebbero non richiedere affatto uno script di contenuti per realizzare la funzionalità desiderata. L'API declarativeContent imposterà le regole affinché l'estensione riconosca quando vengono soddisfatte le condizioni pertinenti. Questo metodo è più efficiente di uno script di contenuti e utilizza meno codice.
Se un'estensione doveva mostrare un'azione sulla pagina all'utente quando ha visitato un sito con un elemento <video> HTML5, potrebbe specificare una regola dichiarativa.
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() ]
}
]);
});
});
Valutare l'efficienza del codice
Le stesse pratiche generali per le prestazioni del sito web possono essere applicate alle estensioni, ad esempio implementare tecniche di programmazione asincrona e mantenere il codice minimo e compatto.
Utilizza strumenti come Lighthouse per valutare il rendimento delle estensioni e scegliere come target le aree che potrebbero migliorare nelle pagine delle estensioni visive.