Gemma Gem : Agent IA embarqué pour l'automatisation de navigateur via WebGPU

Gemma Gem est une extension Chrome qui charge le modèle Gemma 4 de Google (2B ou 4B) via WebGPU dans un document hors écran, lui donnant des outils pour interagir directement avec les pages web dans le navigateur sans appels API externes.

Détails clés

L'extension fournit plusieurs outils qui s'exécutent dans différents contextes :

• read_page_content : Lire le texte/HTML de la page ou d'un sélecteur CSS (Script de contenu)
• take_screenshot : Capturer la page visible en PNG (Service worker)
• click_element : Cliquer sur un élément par sélecteur CSS (Script de contenu)
• type_text : Saisir du texte dans un champ par sélecteur CSS (Script de contenu)
• scroll_page : Faire défiler vers le haut/bas par quantité de pixels (Script de contenu)
• run_javascript : Exécuter du JS dans le contexte de la page avec un accès complet au DOM (Service worker)

L'architecture utilise trois composants principaux :

• Document hors écran : Héberge le modèle via @huggingface/transformers + WebGPU, exécute la boucle de l'agent
• Service worker : Achemine les messages entre les scripts de contenu et le document hors écran, gère take_screenshot et run_javascript
• Script de contenu : Injecte l'icône gemme + superposition de chat en DOM fantôme, exécute les outils DOM

Installation et utilisation

Prérequis :

• Chrome avec support WebGPU
• ~500 Mo d'espace disque pour le modèle E2B, ~1,5 Go pour E4B (mis en cache après la première exécution)

Commandes d'installation :

pnpm install
pnpm build

Chargez l'extension dans chrome://extensions (mode développeur) depuis .output/chrome-mv3-dev/.

Utilisation :

1. Naviguez vers n'importe quelle page
2. Cliquez sur l'icône gemme (coin inférieur droit) pour ouvrir le chat
3. Attendez que le modèle se charge (progression affichée sur l'icône + chat)
4. Posez des questions sur la page ou demandez des actions

Paramètres et configuration

Paramètres disponibles via l'icône d'engrenage dans l'en-tête du chat :

• Modèle : Basculer entre Gemma 4 E2B (~500 Mo) et E4B (~1,5 Go) - la sélection persiste entre les sessions
• Réflexion : Activer/désactiver la réflexion native de Gemma 4
• Itérations max : Limite sur les boucles d'appel d'outils par requête
• Effacer le contexte : Réinitialiser l'historique de conversation pour la page actuelle
• Désactiver sur ce site : Désactiver l'extension par nom d'hôte (persistant)

Développement et débogage

Stack technique :

• WXT — Framework d'extension Chrome (basé sur Vite)
• @huggingface/transformers — Inférence ML dans le navigateur
• marked — Rendu Markdown dans le chat
• Gemma 4 E2B / E4B (onnx-community/gemma-4-E2B-it-ONNX, onnx-community/gemma-4-E4B-it-ONNX) — Quantification q4f16, contexte 128K

Commandes de build :

pnpm build        # Build de développement (avec journalisation, source maps)
pnpm build:prod   # Build de production (journalisation désactivée, minifié)

Emplacements de débogage :

• Journaux du service worker : chrome://extensions → Gemma Gem → "Inspect views: service worker"
• Journaux du document hors écran : chrome://extensions → Gemma Gem → "Inspect views: offscreen.html"
• Journaux du script de contenu : Ouvrir DevTools sur n'importe quelle page → Console
• Toutes les pages de l'extension : chrome://inspect#other liste tous les contextes d'extension inspectables

Les journaux du document hors écran montrent le chargement du modèle, la construction des prompts, les comptes de tokens, la sortie brute du modèle et l'exécution des outils.

Notes techniques

Le répertoire agent/ n'a aucune dépendance et définit des interfaces (ModelBackend, ToolExecutor) qui peuvent être extraites en tant que bibliothèque autonome. L'extension inclut un mode de réflexion qui montre le raisonnement en chaîne pendant son travail.

Selon la source, l'agent fonctionne pour des questions simples sur les pages et l'exécution de JavaScript, mais les chaînes d'outils en plusieurs étapes sont peu fiables et il ignore parfois complètement ses outils.