n8n-nodes-chrome-devtools

n8n Community Node für Browser-Automatisierung und Debugging mit dem Chrome DevTools MCP Server.

🚀 Features

• Browser-Automatisierung: Navigation, Klicks, Formulare ausfüllen
• Screenshots & Snapshots: Visuelle und strukturelle Page-Captures
• Chrome DevTools Power: Basiert auf dem offiziellen Chrome DevTools MCP Server
• Flexible Konfiguration: Headless/Headed Mode, verschiedene Chrome-Channels
• Zuverlässig: Automatisches Prozess-Management und Fehlerbehandlung

📋 Voraussetzungen

• n8n: Version 1.0.0 oder höher
• Node.js: Version 20.19 oder höher
• Chrome: Aktuellste stabile Version (wird automatisch vom MCP Server genutzt)

📦 Installation

Via n8n Community Nodes

1. Öffne n8n Settings
2. Gehe zu Community Nodes
3. Suche nach n8n-nodes-chrome-devtools
4. Klicke auf Install

Via npm (Manuell)

npm install n8n-nodes-chrome-devtools

Füge die Node zu deiner n8n Installation hinzu:

# In deinem n8n Verzeichnis
export N8N_CUSTOM_EXTENSIONS="./node_modules/n8n-nodes-chrome-devtools"
n8n start

⚙️ Konfiguration

Credentials einrichten

1. Erstelle neue Chrome DevTools API Credentials
2. Konfiguriere die Einstellungen:

| Parameter | Beschreibung | Standard | |-----------|-------------|----------| | Headless Mode | Chrome ohne UI starten | false | | Chrome Channel | stable, beta, dev, canary | stable | | Isolated Mode | Temporäres User Data Directory | false | | Viewport Size | Format: WIDTHxHEIGHT | 1280x720 | | Custom Chrome Path | Pfad zu eigener Chrome Installation | - | | Proxy Server | Proxy-Konfiguration | - | | Accept Insecure Certs | Self-signed Zertifikate akzeptieren | false |

Windows Spezifische Konfiguration

Auf Windows 11 wird der MCP Server automatisch mit den korrekten System-Pfaden konfiguriert:

• SystemRoot: C:\Windows
• PROGRAMFILES: C:\Program Files

🎯 Operationen

Navigate

Navigiert zu einer URL.

Parameter:

• url (string, required): Ziel-URL
• timeout (number): Max. Wartezeit in ms (Standard: 30000)

Beispiel Output:

{
  "success": true,
  "text": "Navigation successful"
}

Take Screenshot

Erstellt einen Screenshot der aktuellen Seite.

Parameter:

• fullPage (boolean): Vollständige Seite erfassen (Standard: false)
• format (string): png, jpeg, webp (Standard: png)
• quality (number): Kompression 0-100 für jpeg/webp (Standard: 90)

Beispiel Output:

{
  "success": true,
  "image": "base64-encoded-image-data",
  "mimeType": "image/png"
}

Take Snapshot

Erstellt einen Text-Snapshot der Seite mit Element-UIDs für weitere Operationen.

Beispiel Output:

{
  "success": true,
  "text": "[uid:1] Button 'Submit'\n[uid:2] Input 'email'\n...",
  "data": {
    "elements": [...]
  }
}

Click

Klickt auf ein Element (benötigt UID aus Snapshot).

Parameter:

• uid (string, required): Element UID aus Snapshot
• element (string, required): Beschreibung des Elements
• dblClick (boolean): Doppelklick ausführen (Standard: false)

Beispiel Output:

{
  "success": true,
  "text": "Click successful"
}

Fill

Füllt ein Formularfeld aus.

Parameter:

• uid (string, required): Element UID aus Snapshot
• value (string, required): Wert zum Ausfüllen

Beispiel Output:

{
  "success": true,
  "text": "Fill successful"
}

📖 Workflow-Beispiele

Beispiel 1: Website Screenshot

1. Chrome DevTools (Navigate)
   - URL: https://example.com
   
2. Chrome DevTools (Take Screenshot)
   - Full Page: true
   - Format: png
   
3. Save to File
   - Binary Data: {{ $json.image }}

Beispiel 2: Formular automatisch ausfüllen

1. Chrome DevTools (Navigate)
   - URL: https://example.com/form
   
2. Chrome DevTools (Take Snapshot)
   
3. Chrome DevTools (Fill)
   - UID: aus Snapshot extrahieren
   - Value: [email protected]
   
4. Chrome DevTools (Click)
   - UID: Submit-Button aus Snapshot
   - Element: Submit Button

Beispiel 3: Web Scraping mit mehreren Seiten

1. Code Node (URLs generieren)
   
2. Chrome DevTools (Navigate)
   - URL: {{ $json.url }}
   
3. Chrome DevTools (Take Snapshot)
   
4. Code Node (Daten extrahieren)
   
5. Datenbank Node (Speichern)

🔧 Entwicklung

Setup

# Repository klonen
git clone https://github.com/ThePyth0nKid/devtoolsmcp.git
cd devtoolsmcp

# Dependencies installieren
npm install

# TypeScript kompilieren
npm run build

# Tests ausführen
npm test

# Test Coverage
npm run test:coverage

Projektstruktur

n8n-nodes-chrome-devtools/
├── nodes/
│   └── ChromeDevTools/
│       ├── ChromeDevTools.node.ts    # Haupt-Node
│       └── chrome.svg                 # Icon
├── credentials/
│   └── ChromeDevToolsApi.credentials.ts
├── utils/
│   ├── mcp-client.ts                 # MCP Server Client
│   ├── config-builder.ts             # Config Generator
│   ├── error-handler.ts              # Fehlerbehandlung
│   └── output-formatter.ts           # Output Formatter
├── types/
│   ├── mcp.types.ts                  # MCP Type Definitionen
│   └── operations.types.ts           # Operation Types
└── __tests__/                        # Unit & Integration Tests

Code-Standards

• TDD: Tests vor Implementierung schreiben
• Funktionslänge: Max. 20 Zeilen
• Dateilänge: Max. 300 Zeilen
• Single Responsibility: Eine Funktion = eine Aufgabe
• TypeScript: Strikte Type-Safety

Tests ausführen

# Alle Tests
npm test

# Watch Mode
npm run test:watch

# Coverage Report
npm run test:coverage

🐛 Troubleshooting

MCP Server startet nicht

Problem: Failed to start MCP server

Lösung:

• Prüfe ob Chrome installiert ist
• Prüfe Node.js Version (>=20.19.0)
• Auf Windows: Stelle sicher, dass SystemRoot Umgebungsvariable gesetzt ist

Element nicht gefunden

Problem: Element not found. Check the UID or selector

Lösung:

• Führe zuerst "Take Snapshot" aus
• Verwende die UID aus dem Snapshot
• Stelle sicher, dass die Seite vollständig geladen ist

Timeout Errors

Problem: Operation timed out

Lösung:

• Erhöhe den Timeout-Wert
• Prüfe Netzwerkverbindung
• Bei langsamen Seiten: Headless Mode deaktivieren für Debugging

Windows Spezifische Probleme

Problem: MCP Server findet Chrome nicht

Lösung:

• Setze Custom Chrome Path in den Credentials
• Typischer Pfad: C:\Program Files\Google\Chrome\Application\chrome.exe

🔐 Sicherheit

• Sensitive Daten: MCP Server hat Zugriff auf Browser-Inhalte
• Proxy: Bei Verwendung von Proxies sichere Verbindungen nutzen
• Insecure Certs: Nur in Entwicklungsumgebungen aktivieren
• Isolated Mode: Für produktive Umgebungen empfohlen

📄 Lizenz

MIT License - siehe LICENSE Datei

🤝 Contributing

Contributions sind willkommen! Bitte:

1. Fork das Repository
2. Erstelle einen Feature Branch (git checkout -b feature/amazing-feature)
3. Committe deine Änderungen (git commit -m 'feat: Add amazing feature')
4. Push zum Branch (git push origin feature/amazing-feature)
5. Öffne einen Pull Request

Commit Convention

Wir nutzen Conventional Commits:

• feat: Neue Features
• fix: Bugfixes
• docs: Dokumentation
• test: Tests
• refactor: Code-Refactoring
• chore: Maintenance

📞 Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• n8n Community: n8n Community Forum

🔗 Links

• GitHub Repository: ThePyth0nKid/devtoolsmcp
• npm Package: n8n-nodes-chrome-devtools
• Chrome DevTools MCP Server
• n8n Documentation
• Model Context Protocol (MCP)
• Puppeteer Documentation

⭐ Changelog

Siehe CHANGELOG.md für Details zu Versionsänderungen.

🎉 Danksagungen

• Chrome DevTools Team für den MCP Server
• n8n Team für die großartige Automatisierungsplattform
• MCP Community für das Protocol

Made with ❤️ for the n8n Community