core
d708c8b58c
- Side Panel with Chat UI, Quick Actions, Dev Tools - 22 browser automation tools (DOM, JS, screenshots, navigation) - MCP server (zero-dep, Node 18+) for external AI clients - Supports OpenRouter, Ollama, Anthropic, OpenAI, custom endpoints - Chrome/Brave MV3 extension with content script console capture
139 lines
5.3 KiB
HTML
139 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Browser Pilot</title>
|
||
<link rel="stylesheet" href="sidepanel.css">
|
||
</head>
|
||
<body>
|
||
<!-- Header -->
|
||
<header class="header">
|
||
<div class="header-left">
|
||
<span class="logo">🚀</span>
|
||
<span class="title">Browser Pilot</span>
|
||
</div>
|
||
<div class="header-right">
|
||
<select id="providerSelect" class="provider-select">
|
||
<option value="custom">Custom Endpoint</option>
|
||
<option value="openrouter">OpenRouter</option>
|
||
<option value="ollama">Ollama (local)</option>
|
||
<option value="anthropic">Anthropic</option>
|
||
<option value="openai">OpenAI</option>
|
||
</select>
|
||
<div class="status-dot" id="statusDot" title="Disconnected"></div>
|
||
<button class="icon-btn" id="settingsBtn" title="Settings">⚙️</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Tab Bar -->
|
||
<nav class="tabs">
|
||
<button class="tab active" data-tab="chat">Fragen</button>
|
||
<button class="tab" data-tab="act">Handeln</button>
|
||
<button class="tab" data-tab="dev">Dev</button>
|
||
</nav>
|
||
|
||
<!-- Chat Tab -->
|
||
<div class="tab-content active" id="tab-chat">
|
||
<div class="messages" id="chatMessages">
|
||
<div class="message assistant">
|
||
<div class="message-content">
|
||
Hallo! Ich bin <strong>Browser Pilot</strong>. Ich kann diese Seite lesen, Fragen beantworten, auf Buttons klicken, Formulare ausfüllen und mehrstufige Aufgaben automatisieren.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="input-area">
|
||
<div class="input-row">
|
||
<textarea id="chatInput" placeholder="Frage stellen oder Aufgabe beschreiben..." rows="1"></textarea>
|
||
<button class="send-btn" id="sendBtn" title="Senden">▶</button>
|
||
</div>
|
||
<div class="input-options">
|
||
<label class="checkbox-label">
|
||
<input type="checkbox" id="dangerousMode"> Modus ohne Nachfragen
|
||
</label>
|
||
<button class="stop-btn hidden" id="stopBtn">⬛ Stopp</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Act Tab (quick actions) -->
|
||
<div class="tab-content" id="tab-act">
|
||
<div class="actions-grid">
|
||
<button class="action-btn" data-action="screenshot">📸 Screenshot</button>
|
||
<button class="action-btn" data-action="get-text">📄 Seitentext</button>
|
||
<button class="action-btn" data-action="get-links">🔗 Alle Links</button>
|
||
<button class="action-btn" data-action="get-forms">📝 Formulare</button>
|
||
<button class="action-btn" data-action="get-interactive">🎯 Interaktive Elemente</button>
|
||
<button class="action-btn" data-action="console-logs">🖥️ Console Logs</button>
|
||
<button class="action-btn" data-action="page-info">ℹ️ Page Info</button>
|
||
<button class="action-btn" data-action="summarize">🧠 Seite zusammenfassen</button>
|
||
</div>
|
||
<div class="action-result" id="actionResult"></div>
|
||
</div>
|
||
|
||
<!-- Dev Tab -->
|
||
<div class="tab-content" id="tab-dev">
|
||
<div class="dev-section">
|
||
<h3>JavaScript Console</h3>
|
||
<textarea id="jsInput" class="code-input" placeholder="// JavaScript hier eingeben..." rows="4">document.title</textarea>
|
||
<button class="exec-btn" id="execJsBtn">▶ Ausführen</button>
|
||
<pre class="code-output" id="jsOutput"></pre>
|
||
</div>
|
||
<div class="dev-section">
|
||
<h3>CSS Selector Test</h3>
|
||
<input type="text" id="selectorInput" class="code-input-line" placeholder="z.B. button.primary, #login-form">
|
||
<button class="exec-btn" id="testSelectorBtn">🔍 Testen</button>
|
||
<pre class="code-output" id="selectorOutput"></pre>
|
||
</div>
|
||
<div class="dev-section">
|
||
<h3>MCP Server Status</h3>
|
||
<div id="mcpStatus" class="mcp-status">
|
||
<span class="mcp-dot offline"></span> MCP Server nicht verbunden
|
||
</div>
|
||
<pre class="code-output small" id="mcpConfig">{
|
||
"mcpServers": {
|
||
"browser-pilot": {
|
||
"url": "http://127.0.0.1:9224/mcp"
|
||
}
|
||
}
|
||
}</pre>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Settings Modal -->
|
||
<div class="modal hidden" id="settingsModal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>⚙️ Einstellungen</h2>
|
||
<button class="close-btn" id="closeSettings">✕</button>
|
||
</div>
|
||
<div class="settings-form">
|
||
<div class="form-group">
|
||
<label>API Base URL</label>
|
||
<input type="text" id="cfgBaseUrl" placeholder="https://openrouter.ai/api/v1">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Model</label>
|
||
<input type="text" id="cfgModel" placeholder="anthropic/claude-sonnet-4-20250514">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>API Key</label>
|
||
<input type="password" id="cfgApiKey" placeholder="sk-...">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>System Prompt (optional)</label>
|
||
<textarea id="cfgSystemPrompt" rows="4" placeholder="Custom system prompt..."></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Max Iterations (Agent Loop)</label>
|
||
<input type="number" id="cfgMaxIter" value="15" min="1" max="50">
|
||
</div>
|
||
<button class="save-btn" id="saveSettings">💾 Speichern</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="sidepanel.js"></script>
|
||
</body>
|
||
</html>
|