Les extensions s'ajoutent au navigateur et sont conçues pour fournir des fonctionnalités supplémentaires et personnalisées. Une extension qui ralentit ou entrave l'expérience de navigation est problématique pour l'utilisateur et va à l'encontre de l'objectif de l'extension Chrome. En plus des bonnes habitudes générales en matière de codage, les développeurs doivent suivre ces pratiques pour s'assurer que leurs extensions s'exécutent au maximum de leurs performances.
Reporter le plus possible
Évitez de charger des ressources tant qu'elles ne sont pas nécessaires. N'incluez que les éléments nécessaires pour ouvrir une extension dans sa fonction de démarrage. Au démarrage, ne chargez pas d'éléments qui ne sont nécessaires que si l'utilisateur clique sur un bouton, ni de fonctionnalités qui ne fonctionnent que lorsqu'il est connecté avant qu'il n'ait la possibilité de le faire.
Gérer les événements importants
Un script d'arrière-plan efficace contient les événements enregistrés importants pour leur extension. Ils restent inactifs jusqu'à ce qu'un écouteur soit déclenché, agissent en conséquence, puis reviennent à un état inactif. L'exécution d'un script inutile consiste à consommer trop de ressources système.
Les scripts d'arrière-plan doivent être enregistrés dans le fichier manifeste avec, si possible, leur persistance définie sur "false".
{
"name": "High Performance Extension",
"description" : "Sleepy Background Script",
"version": "1.0",
...
"background": {
"scripts": ["background.js"],
"persistent": false
},
...
}
La seule occasion de maintenir un script d'arrière-plan toujours actif est si l'extension utilise l'API chrome.webRequest pour bloquer ou modifier les requêtes réseau. L'API webRequest n'est pas compatible avec les pages en arrière-plan non persistantes.
{
"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"]
);
contiennent des scripts de contenu ;
Les scripts de contenu doivent jouer le rôle d'agents secrets d'une extension, en lisant ou en modifiant subtilement la page Web tout en s'appuyant sur le cœur de l'extension pour fonctionner à une logique plus lourde. Leurs cibles doivent être claires pour éviter toute activité invasive sur les pages non pertinentes. Idéalement, les scripts de contenu ne doivent pas être remarqués dans l'expérience de navigation, à part un comportement délibéré.
Déclarer les cibles
Une extension qui exécute des scripts de contenu à des emplacements inutiles ou à des heures inappropriées peut ralentir le navigateur et créer des erreurs de fonctionnalité. Pour éviter cela, fournissez des motifs de correspondance dans le fichier manifeste et exécutez le script sur document_idle au lieu de 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"
}
]
...
}
Si une extension ne doit accéder qu'à une page Web associée à l'action de l'utilisateur, faites en sorte qu'elle soit injectée par programmation. Une injection programmatique ne s'exécute que lorsqu'un utilisateur l'appelle.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
code: 'document.body.style.fontSize="100px"'
});
});
Utiliser des scripts de contenu uniquement lorsque cela est nécessaire
De nombreuses extensions n'ont pas du tout besoin d'un script de contenu pour accomplir la fonction souhaitée. L'API declarativeContent définit des règles permettant à l'extension de reconnaître lorsque les conditions pertinentes sont remplies. Cette méthode est plus efficace qu'un script de contenu et utilise moins de code.
Si une extension doit présenter une action sur la page à l'utilisateur lorsqu'il consulte un site avec un élément <video> HTML5, elle peut spécifier une règle déclarative.
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() ]
}
]);
});
});
Évaluer l'efficacité du code
Les mêmes pratiques générales concernant les performances des sites Web peuvent s'appliquer aux extensions, telles que la mise en œuvre de techniques de programmation asynchrones et le fait de limiter le code au minimum.
Utilisez des outils tels que Lighthouse pour évaluer les performances d'une extension et cibler des zones susceptibles d'améliorer les pages d'extensions visuelles.