Article
Transformers.js in Chrome-Erweiterungen: Ein praktischer Leitfaden
Hugging Face hat einen detaillierten Leitfaden für die Integration von Transformers.js in Chrome-Erweiterungen unter Manifest V3 veröffentlicht. Am Beispiel einer Gemma-4-E2B Browser-Assistenten wird die Architektur erklärt.
Die Architektur
Chrome-Erweiterungen unter MV3 haben drei Hauptlaufzeitkontexte:
- Background Service Worker: Das Kontrollzentrum für Modell-Lebenszyklus und Tool-Execution
- Side Panel: Die Chat-UI mit Streaming-Updates
- Content Script: DOM-Extraktion und Highlighting auf der Seite
Manifest V3 Setup
Die manifest.json definiert die Einstiegspunkte mit background service worker, side panel und content scripts. Jede Komponent hat klare Verantwortlichkeiten getrennt.
Modell-Hosting
Das Model läuft im Background Service Worker. Das UI bleibt responsiv durch asynchrone Messaging-Architektur. Der Chatverlauf lebt im Background-Worker, nicht im UI. Die Entkopplung ist wichtig für Performance.
Gemma 4 E2B
Das 2-Milliarden-Parameter-Modell läuft direkt im Browser. Transformers.js nutzt ONNX-Runtime für WebAssembly-basierte Inferenz. Die Modellgröße benötigt etwa 1.5GB für Cache und Runtime.
Herausforderungen unter Manifest V3
Manifest V3 bringt Restriktionen mit sich: Keine persistenten Background-Seiten mehr, Service Worker werden nach Inaktivität beendet. Das Modell muss bei jedem Wake neu initialisiert werden.
Praktische Tipps
- Model-Loading im Background, nicht im UI
- Streaming für lange Antworten implementieren
- State im Storage persistieren, nicht im Memory
- Background-Worker orchestriert alle Tool-Calls
Die Live-Erweiterung ist im Chrome Web Store verfügbar, der Quellcode auf GitHub opensource.