Le estensioni sono un'aggiunta al browser, progettata per fornire funzionalità supplementari e personalizzate. Un'estensione che rallenta o compromette l'esperienza di navigazione è problematica per l'utente e contraria all'obiettivo dell'estensione di Chrome. Oltre alle buone abitudini di codifica generali, gli sviluppatori devono seguire queste pratiche 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 è necessario per aprire un'estensione nella relativa funzione di avvio. Non caricare elementi durante l'avvio 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 di avere la possibilità di farlo.
Gestisci gli eventi importanti
Uno script di sfondo efficiente contiene eventi registrati importanti per la sua estensione. Rimangono inattivi finché non viene attivato un listener, agiscono di conseguenza e poi tornano a uno stato inattivo. Mantenere in esecuzione uno script non necessario consuma le risorse di sistema.
Se possibile, gli script di sfondo devono essere registrati nel file manifest con la persistenza impostata su false.
{
"name": "High Performance Extension",
"description" : "Sleepy Background Script",
"version": "1.0",
...
"background": {
"scripts": ["background.js"],
"persistent": false
},
...
}
L'unica occasione per mantenere uno script di sfondo attivo in modo persistente è se l'estensione utilizza
chrome.webRequest API per bloccare o modificare le richieste di rete. L'API webRequest non è compatibile con le pagine di sfondo 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"]
);
Contieni gli script di contenuti
Gli script di contenuti devono funzionare come agenti segreti di un'estensione, leggendo o modificando in modo discreto la pagina web, mentre la logica più complessa viene gestita dal core dell'estensione. Devono avere target chiari per evitare attività invasive su pagine non pertinenti. Idealmente, gli script di contenuti non devono essere notati 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ò rallentare il browser e potenzialmente creare errori di funzionalità. Per evitare questo problema, fornisci pattern
di corrispondenza nel file manifest ed esegui lo script in document_idle anziché in 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 deve accedere a una pagina web solo con l'azione dell'utente, fai in modo che venga inserita a livello di programmazione. Un inserimento a livello di programmazione viene eseguito solo quando un utente lo richiama.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
code: 'document.body.style.fontSize="100px"'
});
});
Utilizza gli script di contenuti solo quando necessario
Molte estensioni potrebbero non aver bisogno di uno script di contenuti per ottenere la funzionalità desiderata. L'utilizzo dell'
declarativeContent API consente di impostare regole per l'estensione in modo che riconosca quando vengono soddisfatte le condizioni pertinenti. Questo è più efficiente di uno script di contenuti e utilizza meno codice.
Se un'estensione doveva mostrare un'azione della pagina all'utente quando visitava un sito con un elemento HTML5
<video> poteva 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() ]
}
]);
});
});
Valuta l'efficienza del codice
Le stesse pratiche generali per il rendimento dei siti web possono essere applicate alle estensioni, ad esempio l'implementazione di tecniche di programmazione asincrona e la riduzione al minimo e la compattezza del codice.
Utilizza strumenti come Lighthouse per valutare il rendimento di un'estensione e individuare le aree che potrebbero migliorare le pagine dell'estensione visiva.