Skip to main content
Jonathan Andrei
Retour aux billets
Nov. 2024 à Déc. 20244 min de lecture

Ce que j'ai appris en construisant une extension autour de l'IA intégrée de Chrome

Les API Prompt, Summarizer et Translator de Chrome rendent l'IA on-device réelle. InstaQ les recoud pour que n'importe quelle page devienne une surface de Q&R, avec des sessions auxquelles on peut revenir.

ChromePrompt APIOn-Device AIExtension

L'IA on-device dans le navigateur change le postulat selon lequel chaque fonctionnalité d'IA a besoin d'un serveur. InstaQ est une extension de navigateur bâtie sur les API intégrées de Chrome (Prompt, Summarizer et Translator) qui permet de poser des questions, de résumer et de traduire n'importe quelle page, localement.

Panneau de l'extension Chrome InstaQ ouvert à côté d'une page web, montrant les onglets Prompt, Résumer et Traduire.
InstaQ fonctionne entièrement dans le navigateur grâce aux API intégrées Prompt, Summarizer et Translator de Chrome.

Pourquoi je l'ai construit

Quand je parle à une IA sur une plateforme hébergée, fermer l'onglet veut souvent dire perdre le contexte de la conversation, et la plupart des services n'offrent pas de moyen gratuit de sauvegarder les sessions pour les réutiliser. Je voulais centraliser les questions, les résumés et les traductions à un seul endroit sans jamais quitter le navigateur, et sans envoyer le texte de la page hors de l'appareil.

Sessions, pas tirs uniques

Ce qui transforme cet outil de jouet en outil utile, c'est la persistance des sessions. Les conversations reprennent là où on les a laissées, avec le contexte de la page d'origine conservé. On peut revenir sur un fil de recherche le lendemain dans un autre onglet. Les sessions peuvent être clonées, renommées et supprimées, et chacune retient son propre contexte (stocké dans le background script).

Ce que ça fait

Trois modes partagent le même panneau : demander, résumer, traduire. Chaque mode est conçu autour de ce qui rend la tâche réellement utile au milieu de la lecture d'une page, pas juste un wrapper autour d'un appel de modèle.

Demander

  • Les réponses aux questions sont sauvegardées dans des sessions pour que les conversations précédentes restent accessibles.
  • Top-K et Temperature de l'API Prompt sont exposés pour finetuner les réponses par session.
  • Un bouton copie tout le texte de la page courante dans l'extension pour l'examiner.

Résumer

On surligne du texte sur une page web et on le résume directement depuis l'extension. Le type, le format, la longueur et le contexte partagé sont configurables. La saisie libre fonctionne aussi pour les textes collés manuellement.

Traduire

La traduction fonctionne sur le texte surligné ou saisi librement. Langues prises en charge : anglais, espagnol, mandarin, japonais, portugais, russe, turc, hindi, vietnamien, bengali. Un bouton d'inversion bascule la langue source et la langue cible et relance la traduction automatiquement.

Le panneau au complet est persistant. Quand il perd le focus, chaque champ, chaque réponse et chaque paramètre choisi sont encore là à la réouverture.

Comment je l'ai construit

React, Tailwind, TypeScript et JavaScript, avec un manifest pour empaqueter le tout en extension de navigateur. Les trois API de Chrome (Prompt, Summarizer, Translator) sont le coeur. Tous les appels d'API s'exécutent dans un background script pour que l'extension continue de fonctionner même quand son popup est fermé, et pour que l'état des sessions survive entre les ouvertures.

Ce qui a été dur

Rendre l'extension entièrement persistante a été le plus gros défi. Les variables devaient vivre dans le background script pour que la réouverture restaure chaque champ, chaque réponse, chaque session, surtout avec le modèle de session de l'API Prompt. L'API storage de Chrome a fini par faire la majorité de ce travail.

L'API Translator ne fonctionne pas avec les service workers, ce qui est précisément ce qu'est un background script. La solution a été de l'appeler depuis offscreen.js et de faire dialoguer le background script avec la page offscreen chaque fois que le frontend déclenchait une traduction. Pas évident depuis la doc, mais ça roule proprement une fois branché.

Ce que j'ai appris

  • Les scripts offscreen : première fois que je tombais sur une API incompatible avec les service workers.
  • L'API storage de Chrome pour un état de background script persistant entre les ouvertures et fermetures.
  • Première expérience concrète avec les API Prompt, Summarizer et Translator de Chrome, et avec Google Canary comme cible de développement.

La suite

Le résumé et la traduction de vidéos par URL sont la suite logique, mais les restrictions de confidentialité sur YouTube et les sites similaires rendaient l'expédition risquée à l'intérieur de la fenêtre du hackathon. Ensuite : polissage UX, dont des noms plus accessibles pour Top-K et Temperature pour que les utilisateurs occasionnels ne fixent pas des paramètres d'échantillonnage bruts, et une mise en page plus propre pour les trois modes.

Projet associé

InstaQ Chrome Extension

Voir le projet