Les extensions sont des ajouts au navigateur conçus pour fournir des fonctionnalités supplémentaires et personnalisées. Une extension qui ralentit ou nuit à l'expérience de navigation est problématique pour l'utilisateur et va à l'encontre de l'objectif des extensions Chrome. En plus des bonnes pratiques de codage générales, les développeurs doivent suivre ces pratiques pour s'assurer que leurs extensions fonctionnent de manière optimale.
Différer tout ce qui est possible
Évitez de charger des ressources tant qu'elles ne sont pas nécessaires. N'incluez que ce qui est nécessaire pour ouvrir une extension dans sa fonction de démarrage. Ne chargez pas d'éléments au démarrage qui ne sont nécessaires que si l'utilisateur clique sur un bouton, ni de fonctionnalités qui ne fonctionnent que lorsque l'utilisateur 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 des événements enregistrés qui sont importants pour son extension. Ils restent inactifs jusqu'à ce qu'un écouteur soit déclenché, agissent en conséquence, puis reviennent à un état inactif. Le fait de laisser un script inutile s'exécuter consomme des ressources système.
Les scripts d'arrière-plan doivent être enregistrés dans le fichier manifeste avec leur persistance définie sur "false" si possible.
{
"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 actif en permanence est si l'extension utilise
chrome.webRequest API pour bloquer ou modifier les requêtes réseau. L'API webRequest est incompatible avec les pages d'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"]
);
Contenir les scripts de contenu
Les scripts de contenu doivent fonctionner comme les 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 une logique plus lourde. Ils doivent avoir des cibles claires pour éviter toute activité intrusive sur les pages non pertinentes. Idéalement, les scripts de contenu doivent passer inaperçus dans l'expérience de navigation, à l'exception du comportement ciblé.
Déclarer les cibles
Une extension exécutant des scripts de contenu dans des emplacements inutiles ou à des moments inappropriés peut ralentir le navigateur et potentiellement créer des erreurs de fonctionnalité. Pour éviter cela, fournissez des modèles
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 n'a besoin d'accéder à une page Web qu'avec l'action de l'utilisateur, faites-la injecter 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"'
});
});
N'utiliser les scripts de contenu que lorsque cela est nécessaire
De nombreuses extensions n'ont peut-être pas besoin d'un script de contenu pour accomplir la fonctionnalité souhaitée. L'utilisation de l'API
declarativeContentdéfinit des règles permettant à l'extension de reconnaître quand les conditions pertinentes
sont remplies. Cette méthode est plus efficace qu'un script de contenu et utilise moins de code.
Si une extension devait afficher une action de page à l'utilisateur lorsqu'il visitait un site avec un élément HTML5
<video>, elle pouvait 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 pour les performances des sites Web peuvent être appliquées aux extensions, telles que l'implémentation de techniques de programmation asynchrone et la réduction du code au minimum.
Utilisez des outils tels que Lighthouse pour évaluer les performances d'une extension et cibler les zones qui pourraient être améliorées sur les pages d'extension visuelles.