browser-agent-mcp
Version:
Chrome extension and MCP server for comprehensive browser automation with AI agents
130 lines (113 loc) • 2.85 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>Browser Agent MCP Panel</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
sans-serif;
margin: 0;
padding: 16px;
background: #f5f5f5;
}
.header {
background: white;
padding: 16px;
border-radius: 8px;
margin-bottom: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.status {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
}
.status-indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background: #dc3545;
}
.status-indicator.connected {
background: #28a745;
}
.section {
background: white;
padding: 16px;
border-radius: 8px;
margin-bottom: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.section h3 {
margin: 0 0 12px 0;
color: #333;
}
.log-entry {
padding: 8px;
border-left: 3px solid #007bff;
background: #f8f9fa;
margin-bottom: 8px;
font-family: monospace;
font-size: 12px;
}
.log-entry.error {
border-left-color: #dc3545;
background: #f8d7da;
}
.log-entry.warn {
border-left-color: #ffc107;
background: #fff3cd;
}
button {
background: #007bff;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
margin-right: 8px;
}
button:hover {
background: #0056b3;
}
button:disabled {
background: #6c757d;
cursor: not-allowed;
}
</style>
</head>
<body>
<div class="header">
<h2>Browser Agent MCP</h2>
<div class="status">
<div class="status-indicator" id="status-indicator"></div>
<span id="status-text">Disconnected</span>
</div>
<div>
<button id="connect-btn">Connect to MCP Server</button>
<button id="clear-logs-btn">Clear Logs</button>
</div>
</div>
<div class="section">
<h3>Console Logs</h3>
<div id="console-logs">
<div class="log-entry">DevTools panel initialized</div>
</div>
</div>
<div class="section">
<h3>Network Requests</h3>
<div id="network-requests">
<div class="log-entry">Monitoring network requests...</div>
</div>
</div>
<div class="section">
<h3>DOM Operations</h3>
<div id="dom-operations">
<div class="log-entry">Ready to monitor DOM operations</div>
</div>
</div>
<script src="devtools-panel.js"></script>
</body>
</html>