Browser MCP Bridge

Gib Claude Code direkten Zugriff auf deinen Browser. Untersuche Seiten, lies Konsolenfehler, überwache Netzwerkanfragen, erstelle Screenshots und führe JavaScript aus – alles in natürlicher Sprache.

Was das bewirkt

Browser MCP Bridge verbindet deinen Chrome-Browser über das Model Context Protocol (MCP) mit Claude Code. Es besteht aus zwei Teilen:

1. Einer Chrome-Erweiterung, die Browserdaten erfasst (Seiteninhalt, DOM, Konsole, Netzwerk, Performance, Barrierefreiheit)

2. Einem MCP-Server, der diese Daten Claude Code über 11 spezialisierte Tools zur Verfügung stellt

Sobald die Verbindung steht, kannst du Claude Code Dinge fragen wie:

• "Überprüfe diese Seite auf Probleme mit der Barrierefreiheit"

• "Welche Konsolenfehler gibt es auf dieser Seite?"

• "Zeige mir die fehlgeschlagenen API-Anfragen"

• "Analysiere die Performance dieser Seite"

• "Führe document.querySelectorAll('a') auf der aktuellen Seite aus"

Related MCP server: Browser Tools for Claude Code

Schnellstart

In unter 5 Minuten einsatzbereit:

1. Server installieren

git clone https://github.com/anthropics/browser-mcp-bridge.git
cd browser-mcp-bridge
npm run install-server

2. Browser-Erweiterung installieren

1. Öffne chrome://extensions/ (oder edge://extensions/)

2. Aktiviere den Entwicklermodus (Schalter oben rechts)

3. Klicke auf Entpackte Erweiterung laden

4. Wähle das Verzeichnis extension/ aus diesem Repository

Du solltest nun das "Browser MCP Bridge"-Symbol in deiner Symbolleiste sehen.

3. Claude Code konfigurieren

claude mcp add --scope user --transport http browser-mcp http://127.0.0.1:6009/mcp

4. Server starten und verbinden

npm start

Klicke dann auf das Browser MCP Bridge-Erweiterungssymbol und klicke auf Connect. Die Statusanzeige sollte grün werden.

Das war's – Claude Code hat nun Zugriff auf deinen Browser.

Projektstruktur

browser-mcp-bridge/
├── extension/                 # Chrome extension
│   ├── manifest.json          # Manifest V3 configuration
│   ├── background.js          # Service worker (WebSocket, tab management)
│   ├── content.js             # Content script (page data extraction)
│   ├── inject.js              # Injected script (console/network interception)
│   ├── popup.html/js          # Extension popup (connection management)
│   ├── devtools.html/js       # DevTools integration entry point
│   ├── panel.html/js          # Custom DevTools panel UI
│   └── icons/                 # Extension icons
├── server/                    # Node.js MCP server
│   ├── server.js              # HTTP MCP server + WebSocket server
│   └── package.json           # Server dependencies
├── rust-server/               # Rust MCP server (experimental)
│   ├── src/                   # Rust source code
│   ├── Cargo.toml             # Rust dependencies
│   └── config.toml            # Server configuration
├── browser-mcp-rust-server.service  # systemd user service unit
├── install-rust-service.sh          # Service install/uninstall script
├── start-rust-server.sh             # PM2 launch script for Rust server
├── ecosystem.config.cjs             # PM2 process manager config
├── ARCHITECTURE.md                  # System architecture documentation
├── API_REFERENCE.md           # Complete MCP tools reference
├── DATA_OPTIMIZATION.md       # Data filtering and pagination guide
└── package.json               # Root scripts and orchestration

Funktionsweise

┌─────────────────┐     WebSocket      ┌──────────────────┐      HTTP/MCP      ┌─────────────────┐
│ Chrome Extension │ ◄──────────────── │  MCP Server      │ ◄──────────────── │  Claude Code     │
│                  │   ws://localhost   │  (port 6009)     │   http://localhost │  (one or more    │
│  • content.js    │      :6009/ws     │                  │      :6009/mcp    │   instances)     │
│  • background.js │ ─────────────────►│  • 11 MCP tools  │ ─────────────────►│                  │
│  • inject.js     │                   │  • Resources     │                   │                  │
│  • DevTools      │                   │  • Data filtering│                   │                  │
└─────────────────┘                    └──────────────────┘                    └─────────────────┘

1. Die Erweiterung erfasst Browserdaten über Content-Skripte und Chrome-APIs

2. Eine WebSocket-Verbindung sendet Daten an den MCP-Server auf Port 6009

3. Claude Code verbindet sich mit dem Server über HTTP-Transport unter /mcp

4. Mehrere Claude Code-Instanzen können denselben Server nutzen

Verfügbare Tools

Alle Tools unterstützen einen optionalen tabId-Parameter, um einen bestimmten Tab anzusprechen. Siehe API_REFERENCE.md für die vollständige Parameterdokumentation.

Beispiel-Workflows

Konsolenfehler debuggen

Frage Claude Code: "Welche Fehler werden in der Browser-Konsole angezeigt?"

Claude Code verwendet get_console_messages, um Fehler und Warnungen abzurufen, analysiert diese dann und schlägt Korrekturen vor.

Fehlgeschlagene API-Aufrufe analysieren

Frage: "Zeige mir die fehlgeschlagenen Netzwerkanfragen und hilf mir beim Debuggen"

Claude Code verwendet get_network_requests mit Filterung auf fehlgeschlagene Anfragen, um 4xx/5xx-Antworten zu finden, und untersucht dann die Anfrage-/Antwort-Bodies nach Hinweisen.

Barrierefreiheits-Audit

Frage: "Überprüfe diese Seite auf Probleme mit der Barrierefreiheit"

Claude Code ruft get_accessibility_tree und get_page_content auf, um ARIA-Attribute, Überschriftenstruktur, Alt-Texte und semantisches HTML zu analysieren.

Performance-Analyse

Frage: "Wie ist die Performance dieser Seite? Gibt es Probleme?"

Verwendet get_performance_metrics und get_network_requests, um langsame Ressourcen, große Payloads und Probleme mit den Core Web Vitals zu identifizieren.

Visuelle Inspektion

Frage: "Erstelle einen Screenshot der aktuellen Seite"

capture_screenshot gibt einen PNG- oder JPEG-Schnappschuss des sichtbaren Tabs zurück.

Konfiguration

Server-Port

Der Server verwendet standardmäßig Port 6009. Um einen anderen Port zu verwenden:

MCP_SERVER_PORT=8080 npm start

Wenn du den Port änderst, aktualisiere die WebSocket-URL der Erweiterung im Popup (ws://localhost:8080/ws) und deine Claude Code MCP-Konfiguration.

Erweiterungseinstellungen

Klicke auf das Erweiterungssymbol, um:

• Den Verbindungsstatus anzuzeigen

• Die WebSocket-Server-URL zu ändern

• Die Datenerfassung manuell auszulösen

• Nachrichtenstatistiken anzuzeigen

Ausführung mit PM2 (Produktion)

# Start with PM2
npm run pm2:start

# Other PM2 commands
npm run pm2:status    # Check status
npm run pm2:logs      # View logs
npm run pm2:restart   # Restart
npm run pm2:stop      # Stop

Siehe PM2_GUIDE.md für den automatischen Start beim Booten und erweiterte Konfiguration.

Ausführung des Rust-Servers mit systemd (Linux)

Der Rust-Server kann als systemd-Benutzerdienst für den automatischen Start und die Prozessüberwachung verwaltet werden.

Schnelleinrichtung:

# Build and install the service in one step
./install-rust-service.sh

# Or install without rebuilding (if you already have a release binary)
./install-rust-service.sh --no-build

Verwaltung des Dienstes:

systemctl --user status browser-mcp-rust-server     # Check status
journalctl --user -u browser-mcp-rust-server -f      # Follow logs
systemctl --user restart browser-mcp-rust-server     # Restart
systemctl --user stop browser-mcp-rust-server        # Stop

Der Dienst startet automatisch bei der Anmeldung. Um ihn auch ohne Anmeldesitzung zu starten (nützlich für Headless/SSH-Zugriff):

loginctl enable-linger $USER

Deinstallation:

./install-rust-service.sh --uninstall

Manuelle Installation (falls du das Skript nicht verwenden möchtest):

# Build the release binary
cd rust-server && cargo build --release

# Copy the service file
mkdir -p ~/.config/systemd/user
cp browser-mcp-rust-server.service ~/.config/systemd/user/

# If your repo is NOT at ~/dev/browser-mcp-bridge, edit the paths:
#   systemctl --user edit browser-mcp-rust-server
# and override ExecStart and WorkingDirectory

# Enable and start
systemctl --user daemon-reload
systemctl --user enable --now browser-mcp-rust-server

Konfiguration:

Der Dienst liest standardmäßig rust-server/config.toml. Um den Port oder andere Einstellungen zu ändern, bearbeite config.toml und starte neu:

systemctl --user restart browser-mcp-rust-server

Setze RUST_LOG für die Ausführlichkeit der Protokolle. Der Standardwert ist info. Überschreibe ihn mit einem Drop-in:

systemctl --user edit browser-mcp-rust-server

[Service]
Environment=RUST_LOG=debug

MCP-Konfiguration für andere Clients

Für MCP-Clients, die eine JSON-Konfiguration verwenden:

{
  "mcpServers": {
    "browser-mcp": {
      "url": "http://localhost:6009/mcp"
    }
  }
}

Entwicklung

Server-Entwicklung

npm run dev          # Start with --watch (auto-restart on changes)
DEBUG=* npm start    # Verbose logging

Erweiterungs-Entwicklung

1. Nimm Änderungen an den Dateien in extension/ vor

2. Gehe zu chrome://extensions/

3. Klicke auf den Neu-laden-Button bei der Browser MCP Bridge-Erweiterung

Gesundheitsprüfung

npm run health-check
# or: curl http://localhost:6009/health

Hinzufügen neuer Tools

1. Füge die Tool-Definition in server.js → ListToolsRequestSchema-Handler hinzu

2. Implementiere die Tool-Logik in server.js → CallToolRequestSchema-Handler

3. Füge den browserseitigen Handler in extension/background.js hinzu

4. Teste mit Claude Code

Datenoptimierung

Der Server implementiert intelligente Standardwerte, um die Antworten für KI-Agenten überschaubar zu halten:

• HTML: Gekürzt auf 50 KB (Text auf 30 KB)

• DOM: Begrenzt auf 500 Knoten, Skripte/Styles ausgeschlossen

• Konsole: Gibt standardmäßig Fehler und Warnungen zurück

• Netzwerk: 50 Anfragen, fehlgeschlagene Anfragen zuerst sortiert, Bodies ausgeschlossen

Alle Limits sind pro Anfrage konfigurierbar. Siehe DATA_OPTIMIZATION.md für den vollständigen Leitfaden zu Filterung, Paginierung und Optimierung.

Fehlerbehebung

Erweiterung verbindet sich nicht

1. Überprüfe, ob der Server läuft: curl http://localhost:6009/health

2. Überprüfe, ob die WebSocket-URL im Erweiterungs-Popup mit dem Server-Port übereinstimmt

3. Suche nach Fehlern in der Browser-Konsole (chrome://extensions/ → Fehler-Link)

Claude Code findet die Tools nicht

1. Überprüfe die MCP-Konfiguration: claude mcp list

2. Überprüfe, ob der Server läuft und fehlerfrei ist

3. Füge den Server erneut hinzu: claude mcp remove browser-mcp && claude mcp add --scope user --transport http browser-mcp http://127.0.0.1:6009/mcp

Keine Daten von Tools zurückgegeben

1. Stelle sicher, dass die Erweiterung verbunden ist (grüner Status im Popup)

2. Navigiere zu einer Seite im Browser – die Erweiterung benötigt eine aktive Seite

3. Überprüfe, ob die Tab-ID korrekt ist (verwende zuerst get_browser_tabs)

Server startet nicht

1. Überprüfe die Node.js-Version: node --version (erfordert 18.0.0+)

2. Installiere Abhängigkeiten: npm run install-server

3. Überprüfe, ob Port 6009 belegt ist: lsof -i :6009

Weiterführende Literatur

• ARCHITECTURE.md — Systemdesign, Datenfluss und Komponentendetails

• API_REFERENCE.md — Vollständige Referenz der MCP-Tools mit allen Parametern

• DATA_OPTIMIZATION.md — Filterung, Paginierung und Performance-Tuning

Anforderungen

• Node.js 18.0.0+

• Chrome, Edge oder Chromium-basierter Browser

• Claude Code CLI (oder ein beliebiger MCP-kompatibler Client)

Lizenz

MIT