Manchmal entstehen kleine Tools aus einem ziemlich simplen Problem. Ab und zu kommt es vor, dass ich den Text gerne direkt aus einer Grafik zur Verfügung hätte. Natürlich gibt es dafür OCR-Dienste und diverse Online-Tools. Für ein paar Wörter einen Screenshot zu erstellen, diesen irgendwo hochzuladen und anschließend den erkannten Text wieder herauszukopieren, erschien mir allerdings unnötig umständlich.
Also habe ich mir dafür eine eigene Chrome-Erweiterung gebaut: chrome-image-to-text
Bereich auswählen, Text kopieren
Die Idee hinter der Erweiterung ist bewusst einfach gehalten.
Nach dem Start der Erweiterung kann ich mit der Maus einen beliebigen Bereich der aktuellen Browseransicht markieren. Die Erweiterung erstellt daraus intern einen Bildausschnitt und versucht anschließend, den darin enthaltenen Text zu erkennen.
Der erkannte Text erscheint in einem kleinen Dialog, kann dort noch bearbeitet und korrigiert werden und lässt sich anschließend direkt in die Zwischenablage kopieren.
Der Ablauf besteht damit im Grunde nur aus vier Schritten:
1. Erweiterung anklicken
2. Bereich auf dem Bildschirm markieren
3. erkannten Text prüfen oder bearbeiten
4. Text kopieren
Mit Escape lässt sich der Vorgang jederzeit abbrechen.
OCR komplett lokal im Browser
Ein Punkt war mir bei der Entwicklung besonders wichtig: **Für die Texterkennung sollen keine Screenshots an irgendeinen externen Dienst geschickt werden.**
Meine Erweiterung verwendet deshalb Tesseract.js für die OCR und führt die Erkennung vollständig lokal aus. Aktuell sind Sprachmodelle für Deutsch und Englisch integriert. Eine Erweiterung um weitere Sprachen ist aber keine große Aufgabe.
Das bedeutet auch: Die für die OCR erzeugten Bilddaten und der erkannte Text verlassen den eigenen Rechner nicht.
Gerade bei Screenshots finde ich das relevant. Schließlich können auf dem Bildschirm schnell personenbezogene Daten, Kundendaten, interne Informationen oder andere Inhalte sichtbar sein, die ich nicht für eine einfache Texterkennung an einen Cloud-Dienst übertragen möchte.
Deshalb verzichtet die Erweiterung auch auf Telemetrie und externe OCR-Anfragen.
Möglichst wenige Chrome-Berechtigungen
Chrome-Erweiterungen können theoretisch ziemlich weitreichende Berechtigungen erhalten. Auch das wollte ich möglichst restriktiv integrieren.
Die Erweiterung benötigt keine dauerhafte Berechtigung für sämtliche besuchten Webseiten. Stattdessen arbeitet sie im Wesentlichen mit `activeTab` und `scripting` und wird damit gezielt für den aktuellen Tab aktiv.
Auch der Dialog mit dem erkannten Text ist bewusst vom Inhalt der eigentlichen Webseite getrennt. Er läuft in einem geschlossenen Shadow DOM, damit Skripte der geöffneten Webseite nicht einfach auf das OCR-Ergebnis zugreifen können.
Das ist für ein so kleines Tool vielleicht mehr technischer Aufwand als unbedingt notwendig – aber gerade bei Browser-Erweiterungen halte ich einen möglichst kleinen Berechtigungsumfang für sinnvoll.
Ein kleines Projekt mit einigen interessanten Details
Was zunächst nach einer recht einfachen Erweiterung klingt, hat bei der Umsetzung dann doch einige interessante technische Details mitgebracht.
Beispielsweise muss der auf dem Bildschirm markierte Bereich korrekt auf den tatsächlichen Screenshot übertragen werden. Dabei spielen Display-Skalierung und High-DPI-Monitore eine Rolle. Die Koordinaten des sichtbaren Browserfensters entsprechen nicht zwangsläufig 1:1 den Pixeln des erzeugten Screenshots.
Dazu kommen die Besonderheiten von Chrome Manifest V3, Service Workern und der dynamischen Injection des Content Scripts.
Auch die OCR selbst läuft nicht einfach einmalig als Funktion durch. Tesseract arbeitet mit einem Worker, dessen Lebenszyklus innerhalb einer Browser-Erweiterung sauber verwaltet werden muss.
Aus dem ursprünglich kleinen „Ich möchte Text aus einem Bild kopieren“-Projekt wurde dadurch nebenbei ein ganz interessantes Experiment mit der Architektur moderner Chrome-Erweiterungen.
Installation
Zur Installation, einfach das Release auf Github herunterladen, Archiv in ein Verzeichnis entpacken, in Chrome chrome://extensions/ aufrufen und dort auf „Entpackte Erweiterung“ laden das Verzeichnis ‚/deploy‘ auswählen und schon ist die Erweiterung geladen und kann eingesetzt werden.