Comment j'ai créé une extension chrome

Je voulais créer une extension qui s'active sur Doctolib, un site qui répertorie des professionnels de santé, et qui récupère la note et le nombre de critiques Google pour les afficher directement au-dessus du nom du praticien.

Capture du résultat

Les extensions Chrome sont codées en HTML, CSS et JavaScript. En tant que développeur JS, je n'ai pas eu de problèmes de ce côté-là.

Cependant, il y a beaucoup de subtilités à prendre en compte pour développer une extension Chrome. J'ai voulu coder mon extension rapidement, donc j'ai plongé directement dans le code en pensant que c'était une extension vraiment simple et qu'il n'y avait pas besoin de connaître grand-chose sur les extensions Chrome.

C'est là que j'ai réalisé que je passais plus de temps sur Stack Overflow à comprendre ce qui ne fonctionnait pas. J'ai donc finalement décidé de lire la documentation.

Pour créer cette extension, j'ai dû :

• Récupérer les noms et professions de chaque praticien.
• Effectuer une requête à l'API Google pour récupérer les notes et les avis.
• Les afficher en dessous du nom.

Rien de très compliqué en soi, sauf que la requête API ne peut pas être effectuée depuis le script, mais depuis un service worker. J'ai mis pas mal de temps à trouver cette information, mais elle était tout simplement dans la documentation.

Qu'est-ce qu'un service worker ?

Un service worker est un script JS qui fait l'intermédiaire entre notre script de base qui gère le DOM et le réseau. C'est donc dans ce script qu'il faut faire les appels API.

J’ai donc utilisé l’API chrome.runtime.sendMessage qui permet comme son nom l’indique d’envoyer un message au service worker avec une fonction de callback qui permet de gérer la réponse reçue.
Côté service worker on utilise l’API chrome.runtime.onMessage pour écouter les messages reçus et y faire une action.

Sécurité

Chrome exige que nous soyons explicites lors de la réalisation de toute requête. Il faut donc ajouter un élément dans le fichier manifeste.

"host_permissions": ["<https://url-de-la-requete/*>"]

Une autre subtilité de Chrome est que lors de mes recherches sur la façon de procéder, j'ai ajouté toutes sortes de permissions. Cependant, Chrome veille à la sécurité des utilisateurs et rejette les extensions qui utilisent des permissions qui ne servent à rien, ils ont rejeté mon extension il a fallut que je retire les permissions inutiles.

Conclusion

Créer une extension Chrome peut sembler simple, mais cela peut devenir complexe si l'on ne connaît pas toutes les subtilités de la plateforme. La documentation est un outil indispensable pour comprendre comment fonctionnent les extensions, surtout lorsqu'il s'agit de faire des requêtes à des API externes. Il est également important de noter que Chrome exige des permissions explicites pour toutes les requêtes effectuées par l'extension.