Le estensioni sono un'aggiunta al browser e sono progettate per fornire servizi aggiuntivi e personalizzati funzionalità. Un'estensione che rallenta o compromette l'esperienza di navigazione è problematica per il utente e contatore allo scopo dell'estensione di Chrome. Oltre alle buone abitudini di programmazione 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 serve per aprire nella sua funzione di avvio. Non caricare all'avvio elementi che sono necessari solo se l'utente fa clic su un pulsante o su funzionalità che funzionano solo quando l'utente accede prima di poter possibilità di farlo.
Gestire gli eventi importanti
Uno script in background efficiente contiene eventi registrati importanti per il loro . Rimangono inattive fino a quando non si attiva un ascoltatore, agiscono di conseguenza, quindi tornano alla stato. Si tratta di uno svuotamento delle risorse di sistema per mantenere in esecuzione uno script non necessario.
Gli script in background devono essere registrati nel 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 costantemente attivo è se l'estensione utilizza
API chrome.webRequest per bloccare o modificare le richieste di rete. L'API webRequest non è compatibile
con 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"]
);
Includere script di contenuti
Gli script di contenuti dovrebbero funzionare come agenti segreti di un'estensione, leggendo in modo discreto i Modifica della pagina web facendo affidamento sul core dell'estensione per utilizzare una logica più pesante. Dovrebbero essere target chiari per evitare attività invasive su pagine non pertinenti. Idealmente, gli script di contenuti dovrebbero inosservata 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 browser per rallentare e creare potenziali errori di funzionalità. Per evitare che ciò accada, indica
pattern nel manifest ed eseguendo 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 solo a una pagina web con l'azione dell'utente, falla iniettare in modo programmatico. Un'inserimento programmatico viene eseguita solo quando un utente la richiama.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
code: 'document.body.style.fontSize="100px"'
});
});
Utilizza script di contenuti solo quando richiesto
Molte estensioni potrebbero non necessitare di uno script di contenuti per ottenere la funzionalità desiderata. L'utilizzo del
L'API declarativeContent imposterà le regole affinché l'estensione riconosca le condizioni pertinenti
sono soddisfatti. È una soluzione più efficiente rispetto a uno script di contenuti e richiede meno codice.
Se un'estensione ha bisogno di mostrare un'azione della pagina all'utente quando ha visitato un sito con una creatività HTML5
<video>, 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() ]
}
]);
});
});
Valuta l'efficienza del codice
Le stesse prassi generali per il rendimento dei siti web possono essere applicate alle estensioni, come implementare tecniche di programmazione asincrona e di mantenere il codice minimo e compatto.
Usa strumenti come Lighthouse per valutare il rendimento delle estensioni e sceglie come target le aree che potrebbero migliorare nelle pagine con estensioni visive.