Ajouter son moteur de recherche (OpenSearch) via une extension Chrome

Bonjour bonjour 😁,
L'article de la semaine vient d'un constat que j'ai fait récemment, avant dans Chrome, quand on passait sur un site qui propose OpenSearch, celui-ci l'ajoutait automatiquement aux moteurs de recherche du navigateur, et donc il suffisait en suite de taper "un mot clef" + espace et commencer a faire une recherche directement depuis l'omnibox du navigateur.

Ce comportement du navigateur a récemment changé (c'est peut-être pas plus mal, ça évite que tout et n'importe soit ajouter dans le navigateur).
Désormais dans Chromium (et donc Chrome et autres navigateurs basés dessus), il faut aller dans les paramètres pour activer à la main un moteur de recherche, pour quelqu'un qui a l'habitude avec l'informatique c'est simple, mais pour quelqu'un qui n'a pas l'habitude cela peut s'avérer compliqué.

Le but de cet article, va être de créer une extension Chrome, qui une fois installer "ajoute" le moteur de recherche à l'omnibox du navigateur, comme ça les utilisateurs n'auront qu'à installer cette extension pour accéder au moteur de recherche depuis leurs navigateurs.

Qu'est-ce qu'OpenSearch ?

OnpenSearch (pour les navigateurs) est un "standard" qui permet aux navigateurs web de découvrir les moteurs de recherche proposés par les différents sites.

Pour montrer aux navigateurs qu'un moteur de recherche est disponible, il faut ajouter une ligne dans le "head" des pages HTML :

Exemple de tag « opensearch »

Comme vous le voyez, ce tag fait appel au fichier à un fichier "/search.xml", que vous pouvez appeler autrement si vous le souhaitez.

Voici un exemple de ce que contient le fichier XML :

Exemple de fichier search.xml pour OpenSearch

Rien de bien sorcier, on définit, un mot clef, un nom, l'URL de la page de recherche ainsi qu'une URL pour l'auto complétion.
Pour voir le format que doit renvoyer votre URL d'autocomplétion, regardez simplement ici, oui, c'est un simple JSON.

Cela aura pour effet, par exemple sous Firefox, de vous proposer l'ajout d'un nouveau moteur de recherche dans la barre d'adresse et de recherche quand vous passez sur le site.

Ajout d'un moteur de recherche sous Firefox avec OpenSearch.

Vous pouvez voir sur cette capture d'écran, le petit logo de mon site avec un petit + en vert, en cliquant dessus, vous ajouterez le moteur de recherche à votre navigateur.

Création de l'extension

Cela va se faire en deux parties, le fichier manifeste, pour dire au navigateur quelles permissions nous avons besoin et le fichier background.js qui lui contient le code simple de l'extension.

Le manifeste

Le manifeste est un simple fichier JSON :

Un fichier manifeste d'extension Chrome.

Ici, on voit que je demande la permission "activeTab" et que j'utilise le mot clef « ludo » pour déclencher l'extension dans la barre de recherche de Chrome.
La permission « activeTab », me permet de savoir si nous sommes dans un nouvel onglet ou non, elle me permet également de savoir si l'onglet courant est mon site, afin d'empêcher de réouvrir un nouvel onglet sur le site.

Le code (ici background.js)

Maintenant, passons au code, ne vous inquiétez pas, rien de bien difficile

Code utilisant l'API "omnibox" des webextensions (Chrome).

Ici, on voit que j'utilise trois APIs : action, tabs et omnibox :

• Action : me permet tout simplement de faire quelque chose quand l'utilisateur clique sur le petit bouton de l'extension dans sa barre d'extension, ici j'ouvre la page de recherche du site, si elle n'est pas déjà la page en cours.
• Tabs : Me permet de savoir si la page en cours est mon site ou encore si nous sommes dans un nouvel onglet avec "chrome://newtab/".
• Omnibox : C'est ici que tout se passe réellement, on gère les entrées de l'Omnibox, notamment l'autocomplétion (que l'on fait avec un fetch vers l'URL qui renvoie les autocomplétions OpenSearch). Ainsi que lancer la recherche quand on appuie sur entrée (simplement ouvrir la page de recherche avec les bons paramètres.

Conclusion

Voilà, il ne resterait plus qu'à publier cette extension sur les "store" des navigateurs pour la diffuser, je ne le ferais pas, car il n'y aurait pas grande utilité, moi, je l'ai surtout fait pour mon usage à moi 😄.
C'est tout pour cet article, à la prochaine 🙂.