Lokale KI direkt in Chrome-Erweiterungen betreiben
đź’ˇ Quellen-Hinweis: Dieser Beitrag ist eine redaktionelle Zusammenfassung basierend auf einem Originalbericht von Hugging Face Blog.
KI-Funktionen in einer Browser-Erweiterung mĂĽssen nicht zwingend einen Cloud-Dienst aufrufen. Hugging Face zeigt anhand eines mit Gemma 4 E2B betriebenen Assistenten, wie Transformers.js Modelle lokal in einer Chrome-Erweiterung ausfĂĽhrt. Der Leitfaden konzentriert sich weniger auf eine Demo als auf die Architekturfragen, die durch Manifest V3 entstehen.
Drei Laufzeitbereiche mit klaren Aufgaben
Das Modell und die zentrale Orchestrierung liegen im Background Service Worker. Eine Seitenleiste stellt Chat und Status dar, während ein Content Script auf Inhalte der geöffneten Webseite zugreift. Diese Trennung hält die Benutzeroberfläche schlank und verhindert, dass jede Ansicht ein eigenes Modell oder einen abweichenden Gesprächszustand verwaltet. Nachrichten zwischen den Bereichen werden typisiert und über klar definierte Kanäle ausgetauscht.
Manifest V3 beendet Hintergrundprozesse bei Inaktivität. Deshalb muss die Erweiterung Modellzustand, Initialisierung und Anfragen robust koordinieren. Ein einmaliger Ladeprozess, Statusmeldungen an die Oberfläche und eine zentrale Warteschlange reduzieren doppelte Downloads oder konkurrierende Inferenzläufe. Für Seitenaktionen sendet der Hintergrundprozess Aufgaben an das Content Script und erhält strukturierte Resultate zurück.
Lokale Werkzeuge und kontrollierte Schleifen
Der Assistent kann Werkzeuge aufrufen, etwa um Seitentext zu extrahieren oder Aktionen im aktuellen Tab auszuführen. Die Anwendung verarbeitet diese Aufrufe in einer deterministischen Schleife: Modellantwort prüfen, erlaubtes Werkzeug ausführen, Ergebnis wieder in den Kontext geben und fortfahren, bis keine Werkzeuganforderung mehr vorliegt. Das ist für zuverlässige Agenten wichtiger als eine möglichst komplexe Oberfläche.
Speicher nach Lebensdauer aufteilen
Kurzer Gesprächszustand bleibt im Hintergrundspeicher, dauerhafte Einstellungen landen in chrome.storage.local, größere Vektordaten in IndexedDB und extrahierter Seiteninhalt in einem URL-basierten Cache. Beim Build erzeugt Vite getrennte, vom Manifest erwartete Artefakte für Seitenleiste, Hintergrund und Content Script; letzteres sollte eigenständig bleiben, damit zur Laufzeit keine fehlenden Chunks nachgeladen werden müssen.
Für Entwickler bietet lokale Browser-KI Datenschutz- und Latenzvorteile, verlangt aber Aufmerksamkeit bei Modellgröße, Speicherbedarf und Lebenszyklus. Die vorgestellte Struktur eignet sich nicht nur für eine Seitenleiste, sondern auch für Popups oder tabbezogene Assistenten. Der Kern bleibt gleich: Modell und Zustand zentral verwalten, Seitenzugriff begrenzen und jede Werkzeugaktion nachvollziehbar vermitteln.
Originalquelle: Hugging Face Blog – How to Use Transformers.js in a Chrome Extension
