L’intelligence artificielle générative prend ses aises dans nos vies numériques et s’immisce de plus en plus dans de nombreux domaines. L’intelligence artificielle n’a rien de nouveau, elle existe depuis des dizaines d’années (y compris les réseaux de neurones), mais son côté génératif la rend bien plus accessible au grand public, qui peut interagir avec elle, dans une certaine mesure évidemment.

Un premier exemple simple : décocher automatiquement une case

Un domaine dans lequel elle peut rendre bien des services est la création de petits programmes. Alors qu’il fallait auparavant se documenter avant de se lancer (ou bien adapter des bouts de code récupérés de-ci de-là), l’IA générative est capable de vous proposer des programmes clés en main en quelques secondes. Le plus long est souvent de trouver une idée, pas de la réaliser.

On vous donne un exemple avec Trainline, un service concurrent à SNCF Connect pour la réservation de billets de train. Le design est épuré et pratique à l’usage (mais ça dépend des goûts de chacun). Quoi qu’il en soit, depuis un moment maintenant la case « Rechercher un hébergement » est cochée par défaut avec l’ouverture d’une page Booking lors de la recherche.

Claude 3.7 Sonnet : un prompt, une réponse, ça marche

Résoudre ce problème n’a demandé que quelques secondes à Claude (en version 3.7 Sonnet), l’IA d’Anthropic. Voici notre prompt, accompagné d’une capture d’écran du site (nous utilisons la version payante professionnelle à 21,60 euros par mois, car Claude nous sert aussi pour d’autres projets) :

Réponse de l’IA générative (qui se la joue empathique au passage) : « Je comprends votre frustration avec cette case à cocher automatiquement. Je peux vous aider à créer une extension simple pour Chrome qui décochera automatiquement la case "Rechercher un hébergement" sur le site Trainline ».

Cette réponse s’accompagne des lignes de code pour deux fichiers (vous pouvez les télécharger directement en cliquant ici) :

• manifest.json avec le contenu de la première partie du code
• content.js avec le contenu de la deuxième partie du code

Comme précisé dans l’explication de Claude, il faut ajouter trois images (des icônes) de 16x16, 48x48 et 128x128 pixels, simplement nommées icon16.png, icon48.png et icon128.png dans cet exemple. Vous pouvez changer leur nom dans le manifest.json. Claude donne ensuite la procédure pour installer l’extension sur son navigateur.

Ce n’est pas plus compliqué… et ça marche en moins de trois minutes montre en main. Cette extension va rester sur notre navigateur !

Comment tester et installer son extension

Une fois les deux fichiers sur votre ordinateur, installer l’extension sur votre navigateur est très simple. Sur Edge (et n’importe quelle base Chrome), effectuez un clic droit sur le petit puzzle dans la barre d’outils, puis « Gérer vos extensions ». Cochez la case « Mode développeur », cliquez sur « Charger l’extension décompressée » et sélectionnez le dossier où se trouve vos fichiers.

Sur Firefox, tapez about:debugging dans la barre d’adresse, puis cliquez sur « Ce Firefox » et « Charger un module complémentaire temporaire ». Même chose, sélectionnez le dossier où se trouve votre extension et sélectionnez Manifest.json.

Vous pouvez également trouver l’extension ici sur Chrome et là pour Firefox (en attente de validation par Mozilla…). La procédure pour publier sur les Web Store respectifs est plutôt simple et pourra faire l’objet d’un autre article si besoin.

ChatGPT o3-mini-high : c’est plus long, mais ça finit par marcher

Nous essayons de faire pareil avec ChatGPT, en version o3-mini-high, un modèle adapté au code selon OpenAI avec du « raisonnement ».

La même question que Claude lui demande neuf secondes de réflexion pour arriver à deux propositions : « Créer une petite extension Chrome qui décoche automatiquement la case. Utiliser un user script (via Tampermonkey/Violentmonkey) si tu préfères quelque chose de plus simple à installer ».

Nous prenons la première option (nous avons dès le début demandé une extension), mais cela ne marche pas. La raison est simple, en partie écrite en commentaire dans le code : « Il faut repérer son sélecteur exact. On suppose ici que c’est un input de type checkbox ayant un certain attribut name ou ID. À toi de l'adapter si nécessaire ».

L’approche de Claude est plus maligne : l’extension va « sélectionner tous les éléments input de type checkbox » et si besoin « cibler directement par le label proche » avec ceux comprenant le mot clé « hébergement ». La méthode est efficace.

Avec ChatGPT, il faudra quelques prompts et minutes de plus pour arriver à une extension fonctionnelle. À la question « Ça ne marche pas. Tu ne peux pas aller regarder le code source de la page pour trouver tout seul le bon attribut à changer ? », l’IA prendra 84 secondes de réflexion pour donner la réponse suivante :

« Malheureusement, ChatGPT n’a pas la possibilité d’« ouvrir les DevTools » pour inspecter la page comme tu le ferais dans ton navigateur. En revanche, on peut contourner le problème : plutôt que de cibler un attribut précis (qui peut changer), on peut s’appuyer sur le texte du label « Rechercher un hébergement » ».

Un recadrage plus tard, ça marche !

L’IA part ensuite toute seule sur sa solution à base de Tampermonkey ou Violentmonkey. On la remet dans le droit chemin d’un coup de « mais je t’ai demandé une extension ! ». Après 26 secondes de réflexion :

« Pas de souci ! Voici une extension Chrome (manifest v3) qui décoche automatiquement la case « Rechercher un hébergement » sur Trainline, en se basant sur le texte du label. Elle inclut également un MutationObserver pour gérer les éventuelles modifications dynamiques (changement de dates, etc.) ».

Cette fois, ça marche.

Nettoyer une URL : simple, basique, quelques lignes de code

Pour notre seconde expérience, nous restons sur Claude, avec une demande assez simple là encore : « Je voudrais une extension qui supprime automatiquement tout ce qu’il y a après un ? dans une URL ».

Le cœur de l’extension ne fait que quelques lignes :

chrome.webNavigation.onBeforeNavigate.addListener(function(details) {
if (details.frameId !== 0) return;
const url = new URL(details.url);
// Si l'URL contient un point d'interrogation
if (url.search) {
// Créer une nouvelle URL sans les paramètres de requête
const cleanUrl = url.origin + url.pathname;
// Rediriger vers l'URL nettoyée
chrome.tabs.update(details.tabId, { url: cleanUrl });
} });

On corse le jeu avec des liens qui cachent leurs paramètres

Cela marche bien, mais uniquement sur des URL contenant un « ? ». Logique, c’était notre demande (il faut faire attention à ce que l’on veut dans la vie). Or cet élément est parfois « caché » dans l’URL, notamment avec des liens sponsorisés et/ou trackés. Nous demandons à Claude ce que l’on peut faire dans ce genre de cas avec un exemple :

« ok, mais des fois j’ai des URL sous la forme https://www.dealabs.com/visit/threadmain/3012916
et quand j’arrive sur le site, c’est ça : Bosch Tournevis à cliquet à embout (mécanisme à 36 dents porte-embout magnétique poignée Softgrip) : Amazon.fr: Bricolage tu ne peux rien y faire ? »

Plein de bonne volonté, l’IA générative répond par l’affirmative :

« Vous avez raison, il s'agit d'un cas différent. Dans les URL de redirection comme celle de Dealabs que vous mentionnez, supprimer ce qui est après le point d'interrogation ne résoudrait pas le problème car l'URL ne contient pas de point d'interrogation.
Je vais modifier l'extension pour qu'elle puisse extraire et afficher le titre de la page de destination, ce qui vous permettra de voir la vraie destination avant d'y accéder ».

La suite va vous surprendre, et on tombe en plein dans les problèmes que peuvent rencontrer les IA.

Quand le protagoniste de Tenet roule en De Lorean

On vous passe les lignes de codes, pour aller directement à l’explication du fonctionnement de l’extension : « Après avoir visité une URL de redirection comme celle de Dealabs, vous pourrez cliquer sur l'icône de l'extension pour voir le titre et l'URL finale, ce qui vous permettra de savoir à l'avance vers quel produit vous êtes redirigé ».

Quand nous signalons le problème temporel à Claude – « Heu… Comment après avoir visité une URL je peux savoir à l’avance vers quel produit je suis redirigé ? » –, l’IA reconnait avoir « fait une erreur de logique. En effet, si vous avez déjà visité l'URL, vous ne pouvez pas savoir "à l'avance" où elle mène puisque vous y êtes déjà allé ». Jusque-là, cela ne lui paraissait pas étrange.

Ça marche pas, vérifie, ça marche pas, vérifie…

On vous épargne la fin de la conservation, mais elle ressemblait à cela. Claude propose des changements qui ne fonctionnent pas. Nous demandons de vérifier nos fichiers (en les fournissant de nouveau pour que l’IA vérifie que nous avons bien appliqué des changements). Ça ne marche pas correctement. Nous demandons de vérifier…

Au final, on se retrouve avec une extension qui marche à moitié pour simplement prévisualiser un lien et qui fait… plus de 200 lignes de code. Pour s’en sortir, l’IA sort complétement du cadre général de notre but premier pour se concentrer sur notre exemple (Dealabs). Dans le code, on peut en effet lire des parties pour « traiter le cas spécifique de Dealabs ».

Une aide efficace, mais attention aux limites

Entre l’extension pour signaler les sites utilisant de l’IA générative pour publier des contenus, la mise en place d’un site de GenAI automatisé, un outil pour comparer les fournisseurs d’électricité en fonction de votre consommation et d’autres surprises à venir, nous avons largement utilisé les IA génératives pour leur faire pisser du code. Voici ce que l’on en retient comme bébé développeur tout ce qu’il y a de plus amateur.

En général, si le prompt du début est assez simple, la réponse est rapide, structurée et efficace. Plus la taille des programmes augmente (en nombre de lignes de code par exemple), plus la durée de vie d’une conversation sera réduite. D’ailleurs, Claude vous affiche régulièrement une alerte : « Les longues conversations vous permettent d’atteindre plus rapidement vos limites d’utilisation ».

Dans notre cas, nous sommes très peu acteurs des modifications dans le code. On demande un programme, puis des améliorations, des changements. Si cela ne fonctionne pas, nous redonnons à l’IA l’ensemble des fichiers pour qu’elle vérifie. Bien évidemment, il nous arrive de mettre les mains dans le cambouis quand c’est nécessaire.

Plus nous avançons dans nos programmes, plus les limites sont rapidement atteintes. Pour de petits projets, Claude et consorts sont très performants, surtout pour ceux qui n’y connaissent pas grand-chose. Mais pour des projets de plus grande envergure (avec plusieurs centaines de lignes et plusieurs fichiers), la situation se complique rapidement.

Avec notre extension pour les sites GenAI, on arrive un peu à la limite des modèles. Nous devons souvent recommencer une nouvelle conversation, redonner tous les fichiers et ainsi de suite. Avec la case à cocher sur Trainline, nous avons tenté de donner à ChatGPT le code source de la page (il aurait identifié tout de suite la checkbox, mais c’était trop long de 9 % par rapport à ce que l’IA accepte en entrée).

Même chose avec une nouvelle extension pour surveiller les domaines tiers et requêtes externes des sites (et prendre peur quand on voit le nombre de demandes), dont nous allons parler dès demain.

Parfois, c’est têtu et fourbe une IA

Nous avons également remarqué que les IA génératives ont parfois tendance à garder longtemps une idée en tête, même si on lui demande de faire autrement. C’est arrivé plusieurs fois qu’elle rajoute son idée au détour d’une autre modification.

Elle supprime aussi parfois des pans entiers de code. Nous sommes, par exemple, passés d’un fichier de + 700 lignes à moins de 150 lignes sans que cela lui pose de problème, alors que nous voulions simplement afficher une colonne de trois éléments sous la forme d’une ligne (de trois éléments aussi). Autre problème : si la demande est vague, elle a tendance à partir dans tous les sens et si, au contraire, elle est trop précise avec des exemples, alors elle risque de se concentrer sur ces cas particuliers.

Lancez-vous !

Bref, l’IA générative pour écrire des extensions pour les navigateurs, c'est un formidable outil, à condition de bien savoir s’en servir et de garder un œil sur ses actions. Toujours est-il que si vous avez une idée d’une fonction simple, n’hésitez pas à demander aux IA génératives ce qu’elles peuvent faire.