Gemma Gem: KI-Agent auf dem Gerät für Browser-Automatisierung über WebGPU

Gemma Gem ist eine Chrome-Erweiterung, die Googles Gemma-4-Modell (2B oder 4B) über WebGPU in einem Offscreen-Dokument lädt und ihm Werkzeuge zur direkten Interaktion mit Webseiten im Browser ohne externe API-Aufrufe gibt.

Wichtige Details

Die Erweiterung bietet mehrere Werkzeuge, die in verschiedenen Kontexten laufen:

• read_page_content: Text/HTML der Seite oder eines CSS-Selektors lesen (Content-Skript)
• take_screenshot: Sichtbaren Seitenbereich als PNG aufnehmen (Service-Worker)
• click_element: Element per CSS-Selektor anklicken (Content-Skript)
• type_text: In ein Eingabefeld per CSS-Selektor tippen (Content-Skript)
• scroll_page: Um eine Pixelanzahl nach oben/unten scrollen (Content-Skript)
• run_javascript: JavaScript im Seitenkontext mit vollem DOM-Zugriff ausführen (Service-Worker)

Die Architektur verwendet drei Hauptkomponenten:

• Offscreen-Dokument: Hostet das Modell via @huggingface/transformers + WebGPU, führt die Agentenschleife aus
• Service-Worker: Leitet Nachrichten zwischen Content-Skripts und Offscreen-Dokument weiter, verarbeitet take_screenshot und run_javascript
• Content-Skript: Injiziert Edelstein-Icon + Shadow-DOM-Chat-Overlay, führt DOM-Werkzeuge aus

Einrichtung und Nutzung

Voraussetzungen:

• Chrome mit WebGPU-Unterstützung
• ~500 MB Speicherplatz für E2B-Modell, ~1,5 GB für E4B (nach erstem Lauf gecached)

Einrichtungsbefehle:

pnpm install
pnpm build

Erweiterung in chrome://extensions laden (Entwicklermodus) aus .output/chrome-mv3-dev/.

Nutzung:

1. Zu einer beliebigen Seite navigieren
2. Edelstein-Icon (unten rechts) anklicken, um Chat zu öffnen
3. Warten, bis Modell geladen ist (Fortschritt wird am Icon + im Chat angezeigt)
4. Fragen zur Seite stellen oder Aktionen anfordern

Einstellungen und Konfiguration

Verfügbare Einstellungen über Zahnrad-Icon im Chat-Header:

• Modell: Wechseln zwischen Gemma 4 E2B (~500 MB) und E4B (~1,5 GB) – Auswahl bleibt über Sitzungen hinweg erhalten
• Denken: Natives Gemma-4-Denken ein-/ausschalten
• Max. Iterationen: Obergrenze für Werkzeugaufruf-Schleifen pro Anfrage
• Kontext löschen: Konversationsverlauf für aktuelle Seite zurücksetzen
• Auf dieser Seite deaktivieren: Erweiterung pro Hostname deaktivieren (bleibt erhalten)

Entwicklung und Fehlerbehebung

Tech-Stack:

• WXT – Chrome-Erweiterungs-Framework (Vite-basiert)
• @huggingface/transformers – Browser-ML-Inferenz
• marked – Markdown-Rendering im Chat
• Gemma 4 E2B / E4B (onnx-community/gemma-4-E2B-it-ONNX, onnx-community/gemma-4-E4B-it-ONNX) – q4f16-Quantisierung, 128K-Kontext

Build-Befehle:

pnpm build        # Entwicklungs-Build (mit Logging, Source-Maps)
pnpm build:prod   # Produktions-Build (Logging deaktiviert, minifiziert)

Fehlerbehebungsorte:

• Service-Worker-Logs: chrome://extensions → Gemma Gem → "Inspect views: service worker"
• Offscreen-Dokument-Logs: chrome://extensions → Gemma Gem → "Inspect views: offscreen.html"
• Content-Skript-Logs: DevTools auf beliebiger Seite öffnen → Console
• Alle Erweiterungsseiten: chrome://inspect#other listet alle inspizierbaren Erweiterungskontexte auf

Die Offscreen-Dokument-Logs zeigen Modellladen, Prompt-Erstellung, Token-Zählungen, Rohmodellausgabe und Werkzeugausführung.

Technische Hinweise

Das agent/-Verzeichnis hat keine Abhängigkeiten und definiert Schnittstellen (ModelBackend, ToolExecutor), die als eigenständige Bibliothek extrahiert werden können. Die Erweiterung enthält einen Denkmodus, der Chain-of-Thought-Argumentation während der Arbeit anzeigt.

Laut der Source funktioniert der Agent für einfache Seitenfragen und JavaScript-Ausführung, aber mehrstufige Werkzeugketten sind unzuverlässig und er ignoriert manchmal seine Werkzeuge komplett.