OpenCode in Chrome

Lass deinen lokalen opencode-Agenten den Browser sehen und steuern – Tabs, Klicks, JS, Screenshots.

Anton Petnitsky · github.com/Mukller · LinkedIn

Alternative zu Claude-in-Chrome für opencode: Chrome-Erweiterung + lokale Brücke mit MCP-Schnittstelle. Der Agent erhält volle Kontrolle über deinen lebenden Browser – mit angemeldeten Sitzungen, ohne --remote-debugging-port und ohne Cloud. Alles über localhost.

┌──────────────────┐   WebSocket    ┌─────────────────┐    stdio/MCP    ┌──────────┐
│ Chrome extension │◄──────────────►│  bridge (Node)  │◄───────────────►│ opencode │
│  chrome.debugger │  127.0.0.1     │  ws + mcp       │                 │          │
└──────────────────┘                └─────────────────┘                 └──────────┘

Der entscheidende Trick: Die Erweiterung startet selbst eine CDP-Sitzung über chrome.debugger – daher sind keine Browser-Startflags nötig, und alle Profile und Cookies funktionieren wie gewohnt.

Funktionen

Related MCP server: @nimbus21.ai/chrome-devtools-mcp

Installation

1. Brücke

git clone https://github.com/Mukller/opencode-chrome.git
cd opencode-chrome
npm install
node bridge/bridge.mjs

Beim ersten Start gibt die Brücke ein Token aus und speichert es in ~/.opencode-chrome/token.

2. Erweiterung

1. Öffne chrome://extensions → aktiviere Entwicklermodus

2. Entpackte Erweiterung laden → wähle den Ordner extension/

3. Klicke auf das Erweiterungssymbol → Settings → füge das Token aus Schritt 1 ein → Save & reconnect

4. Das Badge des Symbols sollte grün ON werden

3. Mit opencode verbinden

In ~/.config/opencode/opencode.json (oder in der Projektdatei):

{
  "mcp": {
    "chrome": {
      "type": "local",
      "command": ["node", "<путь до репо>/bridge/bridge.mjs"],
      "enabled": true
    }
  }
}

Starte opencode neu – die Tools chrome_* erscheinen beim Agenten.

Umgebungsvariablen der Brücke: OPENCODE_CHROME_PORT (Standard 8766), OPENCODE_CHROME_TOKEN (festes Token statt Datei).

Sicherheit

• Der WS-Server lauscht nur auf 127.0.0.1, fremde Verbindungen werden abgelehnt.

• Der Handshake erfordert ein Token; falsches Token = Verbindung wird geschlossen.

• Die Erweiterung führt Befehle nur von der verbundenen Brücke aus; alles ist im gelben Banner „Debugging gestartet“ während aktiver Operationen sichtbar.

Bekannte Einschränkungen

• Solange eine CDP-Sitzung auf einem Tab aktiv ist, zeigt Chrome die Infoleiste „Die Erweiterung hat das Debugging dieses Browsers gestartet“ – das ist der Preis für den Zugriff ohne DevTools-Flags.

• Der Service Worker der Erweiterung schläft bei Chrome-Leerlauf ein; die Brücke wartet einfach auf die Wiederverbindung (Auto-Reconnect).

Tests

npm test        # E2E: фейковое расширение + MCP-клиент против реального моста

Lizenz

MIT © Anton Petnitsky