Claude Code in 1 Tag: Browser Integration mit Stolperstein: Erfahrungsbericht Teil 4

Geschrieben von Fachexperten: Timon Fiddike, CST®, Machine Learning seit 2005

Dieser Artikel ist Teil 4 einer Serie über den Start mit Claude Code, hier sind Teil 1, Teil 2 und Teil 3.

Hier beschreibe ich die Einrichtung der Browser Integration in Claude Code. Mit dieser Integration kann der Agent selbst die Ergebnisse seiner Arbeit überprüfen, noch bevor ich als Mensch darauf schaue.

Diese Selbstüberprüfung ermöglicht einen AI-Coding Workflow mit hoher Qualität durch hohe Automatisierung. In “Schritt 8: Schnellere Feedbackschleifen” beschreibe ich das Konzept genauer.

Diese Art von Workflow ermöglicht auch sicheres AI-Coding an Legacy Code.

Vorbedingungen und Installation

Eine in Teil 2 erwähnte Komplikation entstand dadurch, dass eine der Vorbedingungen zur Verwendung des “Auto-Mode” nicht erfüllt war und dies nicht durch Fehlermeldungen o.ä. erkennbar war.

Zum Glück bin ich lernfähig und suche und prüfe die Vorbedingungen nun zuerst:

Before using Claude Code with Chrome, you need:

- Google Chrome or Microsoft Edge browser
- Claude in Chrome extension version 1.0.36 or higher, available in the Chrome Web Store for both browsers
- Claude Code version 2.0.73 or higher
- A direct Anthropic plan (Pro, Max, Team, or Enterprise)

Diesmal sind alle Vorbedingungen erfüllt oder zumindest leicht erfüllbar: Die Chrome Extension muss ich noch installieren:

Die Installation ist leicht, mit einem Klick. Direkt nach Installation der Extension wird noch die “Claude in Chrome” App in der Omnibar von Chrome zur Installation angeboten, und ich installiere sie vorläufig ebenfalls (Notiz für später: Prüfen, ob sie erforderlich oder nützlich ist):

Ich pinne die Extension in Chrome an, um im Blick zu haben, dass hier eine Extension mitläuft, die alles auf allen Websites lesen und ändern kann. Dieser, auf diesem Gerät, ist zwar eine Art Sandbox (ohne sensitive Daten), aber ich weiß trotzdem gerne, was passiert:

Aktivieren mit Stolperstein

Nutzen kann man Chrome nun, laut Dokumentation, indem man Claude Code mit dem “—chrome” Flag aufruft, also “claude —chrome” oder(!) innerhalb einer Session “/chrome” aufruft.

Ich versuche es zunächst mit “/chrome” innerhalb einer Session in Claude Code selbst:

Hier wähle und aktiviere ich “Enabled by default”:

Nun geht es nicht weiter: Die Pfeiltasten hoch/runter funktionieren, “Enabled by default” lässt sich aktivieren und deaktivieren, aber “Manage permissions” und “Reconnect extension” bleiben ohne Erfolg.

Unten steht “Enter to confirm · Esc to cancel”. Mit Escape kann ich den Bereich verlassen.

Ich prüfe die Troubleshooting-Dokumentation, dort finde ich derzeit aber keinen Eintrag für diesen spezifischen Fall.

Ich stoppe Claude Code und starte neu mit:

claude --chrome

Nun wird ein Warnhinweis eingeblendet, danach zeigt “/chrome” wie erhofft:

  Status: Enabled
  Extension: Installed
[...]
  Enabled by default: Yes

… wie hier im Screenshot zu sehen:

Woher die Irritation kommt

Irritation entsteht an dieser Stelle dadurch, dass die Dokumentation suggeriert, “/chrome” könnte innerhalb von Claude Code unabhängig vom Start der Applikation mit “claude —chrome” verwendet werden, was im späteren Verlauf korrekt ist, aber nur, wenn man schon mindestens einmal “claude —chrome” verwendet hat, um den Warnhinweis zu bestätigen. Wenn dieser letzte Punkt in der Dokumentation erwähnt würde, wäre dieser Schritt direkt weniger frustrierend.

Bei dieser Gelegenheit erinnere ich, wie auch in Teil 2 dieses Artikels beschrieben, dass es beim Thema “Berechtigungen” eine ähnliche Systematik gab: Die betreffende Berechtigung musste ebenfalls auf der Kommandozeile schon beim Start der Applikation aktiviert werden. Erst danach konnte man innerhalb der Session umschalten. Nun bin ich um so mehr gewarnt und neugierig, ob mir ein solches Muster in der weiteren Erkundung von Claude Code noch öfter begegnet.

Leider lauert auch im nächsten Schritt eine Irritation: Von hier aus geht es wieder nicht weiter: Die Pfeiltasten hoch/runter funktionieren wieder, “Enabled by default” lässt sich deaktivieren und wieder aktivieren, während “Manage permissions” und “Reconnect extension” weiterhin keinen Effekt haben. Unten steht “Enter to confirm · Esc to cancel”. Weil nun Status und Einstellungen genau so sind, wie gewünscht, möchte ich “Bestätigen”, nicht “Abbrechen”. Aber da ich per “Enter” nicht weiter komme, versuche ich “Escape”. Mit “Escape” kann ich den Bereich dann auch verlassen. Vielleicht ist das hier konzeptuell so etwas wie das Schließen eines Fensters, nachdem die Einstellungen bereits gespeichert wurden. “Abbrechen” nach Änderung von Einstellungen irritiert mich dennoch.

Berechtigungen beim ersten Start

Nun bin ich gespannt, ob der Zugriff auf Chrome nun endlich nutzbar ist und prompte:

Go to https://ai-coding.pro/de/,
click search,
type "p4a25",
tell me which results appear.

Es erscheint ein deutlicher Warnhinweis:

Als nächstes kommt eine Berechtigungsabfrage:

Und nun wird in der Tat gemäß Prompt eine Suche ausgeführt:

Nach Abschluss der Aufgabe wird das Browser Tab mit einer grünen abgehakten ☑️ Checkbox als abgeschlossen markiert. Das ist sicher praktisch, wenn einmal viele davon geöffnet sein sollte.

Ergebnis und Bedeutung

Claude Code selbst liefert nun in Textform die korrekte Antwort auf mein Prompt:

Ich freue mich, dass die Browser Integration in Claude Code nun korrekt funktioniert, denn:

Mit dieser Integration kann der Agent selbst die Ergebnisse seiner Arbeit überprüfen, noch bevor ich als Mensch darauf schaue.

Zusammenfassung und Ausblick

Die oben erwähnte Selbstüberprüfung durch den Agenten ermöglicht einen AI-Coding Workflow mit hoher Qualität durch hohe Automatisierung. Hier in “Schritt 8: Schnellere Feedbackschleifen” beschreibe ich das Konzept genauer.

Diese Art von Workflow ermöglicht auch sicheres AI-Coding an Legacy Code.

Mit Claude Code bin ich nun so weit vertraut, dass mich die Stolpersteine nicht mehr besonders überraschen, weil ich nun schon einige davon erlebt habe und sie einander ähneln.

Natürlich habe ich mit Claude Code weiter gearbeitet. Die Irritationen nehmen ab und es beginnt Spaß zu machen:

Teil 5 dieses Artikels liegt schon als Rohfassung bereit. Irgendwann starte ich einen spezifischen Newsletter zu diesem Thema, für die Zwischenzeit gibt es zu viel anderes zu tun: Schreib mir eine formlose E-Mail mit “Bitte Info über Teil 5”, wenn Du darüber informiert werden möchtest.

AI-Coding Hands-on Workshop

Du bist von Anfang an selbst an der Tastatur. Am Ende unseres AI-Coding Deep Dive Workshops hast Du einen prall gefüllten Werkzeugkoffer. Du arbeitest souverän mit aktuellen Werkzeugen und lieferst in kurzer Zeit Ergebnisse in unerwartet hoher Qualität.

Zum AI-Coding Deep Dive

Reflexion, Einladung und Angebot

• Hast Du als Entwickler konkrete Ideen für Deinen eigenen Weg bekommen?
• Hast Du als Führungskraft einen Eindruck gewonnen, welche Schritte Deine Mitarbeiter gehen könnten? Denkst Du darüber nach, ihnen andere Impulse und Unterstützung anzubieten als bisher?
• Hast Du einen ersten Eindruck von mir?

Nimm Kontakt mit mir auf, wenn Du Dich für einen Impulsvortrag oder Workshop interessierst! Lass uns gemeinsam überlegen, welche Art von Unterstützung für Euch hilfreich sein kann:

Unten auf der Seite über meinen Hands-on Workshop „AI-Coding Deep Dive" kannst Du Dir direkt per Calendly einen Termin für ein Gespräch aussuchen (unverbindlich und kostenlos).

Über den Autor

Dr. Timon Fiddike

• Seit 2010 auf dem Pfad der Agilität
• Seit 2005 KI, AI, Machine Learning, siehe Werdegang
• Erfahrung als Entwickler im Team, Product Owner, Scrum Master, Geschäftsführer und Coach
• Höchste Zertifizierung: Certified Scrum Trainer® (weltweit ca. 220 Personen) für die Scrum Alliance®
• Erfahrung in Startup, Mittelstand & Konzern
• Integraler Coach – Ausbildung nach ICF ACTH-Standard
• Unterstützt mit Begeisterung das menschliche Wachstum, das agile Arbeit ermöglicht
• Geschäftsführer Agile.Coach GmbH & Co. KG

Zu Timons Profil