Extension Chrome observant les IA : les pièges de la fiabilité
Une extension Chrome qui observe les interfaces de chat IA pour extraire les blocs de code et les publier en URL a consacré 80 % de son temps de développement à résoudre des problèmes imprévus. L’idée de base — extraire des extraits HTML complets depuis les réponses en flux continu de ChatGPT, Claude et Gemini — semblait simple, mais détecter avec fiabilité la fin d’une réponse s’est avéré bien plus complexe que prévu.
La stabilité du DOM prime sur la présence
Aucune des principales interfaces de chat IA n’affiche ses réponses en une seule fois. Elles diffusent les jetons en temps réel, laissant le DOM dans un état de flux constant. Les premières versions de l’extension tentaient de repérer un bloc <pre><code> terminé dès son apparition, mais cela capturait souvent un HTML incomplet — coupé en plein milieu d’une balise ou d’une phrase. La solution a consisté à étouffer les déclenchements du MutationObserver avec un minuteur de 600 millisecondes, qui ne s’active qu’après stabilisation du DOM. Ce n’est pas élégant, mais cela fonctionne sur les trois plateformes malgré leurs vitesses de diffusion différentes.
S’appuyer sur les motifs structurels, pas les noms de classes
Les interfaces de chat IA sont fréquemment mises à jour, et aucune ne garantit la stabilité des noms de classes pour les développeurs. Se fier à des sélecteurs comme .language-html ou .hljs signifiait que les sélecteurs de l’extension se brisaient silencieusement quelques semaines après le lancement. Une approche plus résiliente a émergé : matcher les motifs structurels à la place. L’extension recherche désormais un <pre> contenant un <code> dont le texte commence par <!DOCTYPE ou <html. Cette méthode ignore le framework CSS ou les noms de classes dynamiques utilisés ce mois-ci par la plateforme.
Le piège des faux positifs
Même lorsqu’un bloc de code est détecté, choisir le bon s’avère un autre défi. Une seule réponse d’IA peut contenir plusieurs extraits — une page HTML complète, une explication CSS, un correctif JavaScript. Prendre le premier tag <pre> choisissait souvent le mauvais. La solution a consisté à noter les blocs candidats : la présence de <!DOCTYPE> ou <html> obtient la meilleure note, <head> ou <body> vient ensuite, et les extraits de moins de 50 caractères sont écartés comme exemples en ligne. Cela a réduit significativement les faux positifs.
L’isolation sandbox est plus cruciale qu’il n’y paraît
La première version préliminaire injectait simplement le HTML extrait dans une iframe via srcdoc. Cela fonctionnait jusqu’à ce qu’une page générée par IA inclue un <script> tentant d’accéder à window.parent — inoffensif dans son contexte, mais dangereux dans une extension dotée de privilèges de script de contenu. La correction a été minimale mais essentielle : verrouiller explicitement l’iframe avec <iframe sandbox="allow-scripts allow-same-origin">. De petites décisions de sécurité comme celle-ci ont un impact disproportionné dans les extensions qui interagissent avec des pages dynamiques.
Les utilisateurs se soucient avant tout des identifiants
Les hypothèses initiales sur les questions des utilisateurs — comme les hôtes pris en charge — ont été rapidement infirmées. La question la plus fréquente après le lancement concernait l’authentification et la gestion des données, et non la compatibilité avec les plateformes.
Pourquoi c’est important
Ce projet illustre comment de petits détails négligés en développement web — timing du DOM, sélecteurs structurels, priorités des utilisateurs — peuvent faire dérailler des outils par ailleurs simples. Il souligne aussi l’importance de la programmation défensive dans les extensions navigateur, où un seul script non isolé peut transformer une fonctionnalité pratique en risque de sécurité. Pour les développeurs construisant des outils interagissant avec des interfaces web dynamiques, ces leçons ne sont pas optionnelles : elles font la différence entre une extension fonctionnelle et une qui se brise à chaque mise à jour d’interface.
Source : DEV Community. Synthèse éditoriale assistée par IA — TechnoExpress.