Les extensions viennent compléter le navigateur, conçues pour fournir des fonctionnalités complémentaires et personnalisées de Google Cloud. Une extension qui ralentit ou nuit à l'expérience de navigation pose problème aux par rapport à l'objectif de l'extension Chrome. En plus des bonnes habitudes générales de codage, les développeurs doivent suivre ces pratiques pour s'assurer que leurs extensions s'exécutent au meilleur niveau.
Reporter tout ce qui est possible
Évitez de charger des ressources tant qu'elles ne sont pas nécessaires. N'incluez que les éléments nécessaires pour ouvrir dans sa fonction de démarrage. Au démarrage, ne chargez pas d'éléments qui ne sont nécessaires que si le l'utilisateur clique sur un bouton, ou des fonctionnalités qui ne sont disponibles que si l'utilisateur est connecté avant d'avoir une chance de le faire.
Gérer les événements importants
Un script d'arrière-plan efficace contient les événements enregistrés importants pour leurs . Ils restent inactifs jusqu'à ce qu'un écouteur se déclenche, agissent en conséquence, puis reviennent dans une situation inactive. de l'état. L'exécution d'un script inutile consomme beaucoup de 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 en arrière-plan actif de manière persistante est que si l'extension utilise
L'API chrome.webRequest permet de bloquer ou de modifier les requêtes réseau. L'API webRequest est incompatible
avec des 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"]
);
Contenir des scripts de contenu
Les scripts de contenu doivent jouer le rôle d'agents secrets d'une extension, en lisant subtilement modifier la page Web tout en s'appuyant sur le noyau de l'extension pour travailler une logique plus lourde. Ils devraient avoir des cibles claires pour éviter toute activité invasive sur des pages non pertinentes. Idéalement, les scripts de contenu doivent en dehors d'un comportement réfléchi.
Déclarer des cibles
Une extension exécutant des scripts de contenu à des emplacements inutiles ou à des moments inappropriés peut entraîner
le navigateur ralentit et peut créer
des erreurs de fonctionnement. Évitez cela en indiquant des correspondances
modèles dans le fichier manifeste et exécuter le script à l'emplacement 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 doit uniquement accéder à une page Web via une action de l'utilisateur, faites-la injecter de manière programmatique. 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 exécuter la fonctionnalité souhaitée. Avec les
L'API declarativeContent définira des règles que l'extension reconnaîtra lorsque des conditions pertinentes seront remplies.
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 sur la page auprès de l'utilisateur lorsqu'il a visité un site comportant une annonce HTML5
<video>, il 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 pour les performances des sites Web peuvent s'appliquer aux extensions, comme l'implémentation des techniques de programmation asynchrone et en limitant le code.
Utiliser des outils comme Lighthouse pour évaluer les performances d'une extension et cibler les zones géographiques pourraient être améliorées sur les pages d'extension visuelles.