<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Browser MCP Bridge</title>
<style>
body {
width: 300px;
padding: 16px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
}
.header {
text-align: center;
margin-bottom: 16px;
}
.logo {
width: 48px;
height: 48px;
margin: 0 auto 8px;
background: #007cba;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 18px;
}
.title {
font-weight: 600;
margin-bottom: 4px;
}
.subtitle {
color: #666;
font-size: 12px;
}
.version {
color: #999;
font-size: 10px;
margin-top: 4px;
font-family: monospace;
}
.status {
padding: 12px;
border-radius: 6px;
margin-bottom: 16px;
text-align: center;
font-weight: 500;
}
.connected {
background: #e8f5e8;
color: #2e7d32;
border: 1px solid #4caf50;
}
.disconnected {
background: #ffebee;
color: #c62828;
border: 1px solid #f44336;
}
.reconnecting {
background: #fff3e0;
color: #ef6c00;
border: 1px solid #ff9800;
}
.actions {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
.button {
padding: 10px 16px;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: 500;
transition: background-color 0.2s;
}
.primary {
background: #007cba;
color: white;
}
.primary:hover {
background: #005a87;
}
.secondary {
background: #f5f5f5;
color: #333;
border: 1px solid #ddd;
}
.secondary:hover {
background: #eeeeee;
}
.button:disabled {
background: #ccc;
color: #999;
cursor: not-allowed;
}
.info {
background: #f8f9fa;
padding: 12px;
border-radius: 6px;
border-left: 3px solid #007cba;
font-size: 12px;
color: #555;
}
.server-config {
margin-bottom: 16px;
}
.config-row {
display: flex;
align-items: center;
margin-bottom: 8px;
}
.config-label {
font-weight: 500;
width: 80px;
font-size: 12px;
}
.config-input {
flex: 1;
padding: 4px 8px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 12px;
}
.stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 16px;
}
.stat-item {
text-align: center;
padding: 8px;
background: #f8f9fa;
border-radius: 4px;
}
.stat-value {
font-weight: 600;
font-size: 16px;
color: #007cba;
}
.stat-label {
font-size: 11px;
color: #666;
margin-top: 2px;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">MCP</div>
<div class="title">Browser MCP Bridge - UPDATED</div>
<div class="subtitle">Connect your browser to Claude Code</div>
<div id="version" class="version">Loading...</div>
</div>
<div id="connection-status" class="status disconnected">
Disconnected from MCP Server
</div>
<div class="server-config">
<div class="config-row">
<span class="config-label">Server:</span>
<input id="server-url" class="config-input" type="text" value="ws://localhost:6009/ws" placeholder="WebSocket URL">
</div>
</div>
<div class="stats">
<div class="stat-item">
<div id="messages-sent" class="stat-value">0</div>
<div class="stat-label">Messages Sent</div>
</div>
<div class="stat-item">
<div id="messages-received" class="stat-value">0</div>
<div class="stat-label">Messages Received</div>
</div>
</div>
<div class="actions">
<button id="connect-btn" class="button primary">Connect to Server</button>
<button id="capture-current" class="button secondary" disabled>Capture Current Page</button>
<button id="open-devtools" class="button secondary">Open DevTools Panel</button>
<button id="settings" class="button secondary">Settings</button>
</div>
<div class="info">
<strong>How to use:</strong><br>
1. Start the MCP server<br>
2. Click "Connect to Server"<br>
3. Use DevTools panel for detailed inspection<br>
4. Data will be available in Claude Code
</div>
<script src="popup.js"></script>
</body>
</html>
