122 lines
7.9 KiB
HTML
122 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { width: 320px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0f172a; color: #e2e8f0; padding: 16px; }
|
|
h1 { font-size: 13px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
|
|
h1 span { color: #3b82f6; }
|
|
.status { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 8px; background: #1e293b; margin-bottom: 8px; }
|
|
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
|
|
.dot.on { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
|
|
.dot.off { background: #ef4444; }
|
|
.label { font-size: 12px; }
|
|
.section-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: #475569; margin: 10px 0 4px; font-weight: 600; }
|
|
.sessions { display: flex; flex-direction: column; gap: 6px; }
|
|
.session-card { padding: 8px 10px; background: #1e293b; border-radius: 8px; border-left: 3px solid; }
|
|
.session-header { font-size: 12px; font-weight: 600; margin-bottom: 4px; }
|
|
.session-tabs { font-size: 10px; color: #94a3b8; }
|
|
.session-tabs div { margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.empty { font-size: 11px; color: #475569; text-align: center; padding: 12px; background: #1e293b; border-radius: 8px; }
|
|
.log { max-height: 120px; overflow-y: auto; background: #1e293b; border-radius: 8px; padding: 6px 10px; }
|
|
.log-entry { font-size: 10px; padding: 2px 0; border-bottom: 1px solid #0f172a; display: flex; gap: 6px; align-items: baseline; }
|
|
.log-entry:last-child { border-bottom: none; }
|
|
.log-time { color: #475569; min-width: 45px; }
|
|
.log-method { font-weight: 500; }
|
|
.log-session { font-size: 9px; color: #64748b; }
|
|
.log-safe { color: #22c55e; }
|
|
.log-sensitive { color: #f59e0b; }
|
|
button { width: 100%; padding: 7px; border: none; border-radius: 6px; background: #1e293b; color: #94a3b8; font-size: 11px; cursor: pointer; margin-top: 4px; }
|
|
button:hover { background: #334155; color: #e2e8f0; }
|
|
.color-blue { border-color: #3b82f6; } .color-blue .session-header { color: #3b82f6; }
|
|
.color-green { border-color: #22c55e; } .color-green .session-header { color: #22c55e; }
|
|
.color-yellow { border-color: #eab308; } .color-yellow .session-header { color: #eab308; }
|
|
.color-red { border-color: #ef4444; } .color-red .session-header { color: #ef4444; }
|
|
.color-pink { border-color: #ec4899; } .color-pink .session-header { color: #ec4899; }
|
|
.color-purple { border-color: #a855f7; } .color-purple .session-header { color: #a855f7; }
|
|
.color-cyan { border-color: #06b6d4; } .color-cyan .session-header { color: #06b6d4; }
|
|
.color-orange { border-color: #f97316; } .color-orange .session-header { color: #f97316; }
|
|
/* Shown only while the MCP server is missing - the store can't install it for you */
|
|
.setup { display: none; background: #1e293b; border: 1px solid #334155; border-left: 3px solid #f59e0b; border-radius: 8px; padding: 10px; margin-bottom: 8px; }
|
|
.setup.show { display: block; }
|
|
.setup p { font-size: 11px; line-height: 1.5; color: #94a3b8; margin-bottom: 8px; }
|
|
.setup p b { color: #e2e8f0; }
|
|
.setup code { display: block; background: #0f172a; border-radius: 6px; padding: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; color: #22c55e; word-break: break-all; margin-bottom: 6px; }
|
|
/* De andre klienters kommandoer staar inde i en saetning - de maa ikke blive til blokke som hovedkommandoen. */
|
|
.setup p.clients code { display: inline; padding: 1px 5px; margin: 0; font-size: 10px; }
|
|
.setup .row { display: flex; gap: 6px; }
|
|
.setup .row button, .setup .row a { flex: 1; margin: 0; padding: 6px; border-radius: 6px; background: #334155; color: #e2e8f0; font-size: 11px; text-align: center; text-decoration: none; border: none; cursor: pointer; }
|
|
.setup .row a:hover, .setup .row button:hover { background: #475569; }
|
|
/* Shown once both halves are up but the agent has not touched a tab yet - the
|
|
moment a new user checks "did it work?" and needs to know what to say next. */
|
|
.try { display: none; background: #1e293b; border: 1px solid #334155; border-left: 3px solid #22c55e; border-radius: 8px; padding: 10px; margin-bottom: 8px; }
|
|
.try.show { display: block; }
|
|
.try p { font-size: 11px; line-height: 1.5; color: #94a3b8; margin-bottom: 8px; }
|
|
.try p b { color: #e2e8f0; }
|
|
.try .prompt { display: block; background: #0f172a; border-radius: 6px; padding: 8px; font-size: 11px; color: #e2e8f0; margin-bottom: 6px; font-style: italic; }
|
|
.try a { display: block; text-align: center; padding: 6px; border-radius: 6px; background: #334155; color: #e2e8f0; font-size: 11px; text-decoration: none; }
|
|
.try a:hover { background: #475569; }
|
|
.pairing p { margin: 0 0 6px; font-size: 11px; color: #6b7280; line-height: 1.45; }
|
|
.pairing .row { display: flex; gap: 6px; align-items: center; }
|
|
.pairing input { flex: 1; min-width: 0; padding: 5px 7px; border: 1px solid #d1d5db; border-radius: 5px; font: inherit; font-size: 12px; }
|
|
.pairing button { width: auto; margin: 0; }
|
|
.pairCmd { display: block; margin-top: 6px; }
|
|
#copyPair { margin-top: 4px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1><span>Agent360</span> Browser MCP</h1>
|
|
|
|
<div class="status">
|
|
<div class="dot off" id="dot"></div>
|
|
<span class="label" id="label">Checking…</span>
|
|
</div>
|
|
|
|
<div class="setup" id="setup">
|
|
<p><b>Already registered the server?</b> Then this is normal: the server only takes a port the first time your agent actually uses the browser. Ask it for a screenshot once, and this turns into "Connected".</p>
|
|
<p><b>Otherwise: this extension is only half of Browser MCP.</b> It needs a local MCP server to talk to - the Chrome Web Store cannot install that part. Register it once, then restart your agent. Claude Code:</p>
|
|
<code id="setupCmd">claude mcp add --scope user browser-mcp -- npx @agent360/browser-mcp@latest</code>
|
|
<p class="clients">Codex: <code>codex mcp add browser-mcp -- npx @agent360/browser-mcp@latest</code><br>
|
|
Cursor, VS Code and the rest: run <code>npx @agent360/browser-mcp install</code> - it registers with the clients you have.</p>
|
|
<div class="row">
|
|
<button id="copyCmd">Copy command</button>
|
|
<a href="https://browsermcp.dev/docs/install-claude-code/" target="_blank" rel="noopener">Setup guide</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="try" id="try">
|
|
<p><b>Connected - you're ready.</b> Nothing happens until you ask your agent for something. Try saying:</p>
|
|
<span class="prompt">"Take a screenshot of my current Chrome tab."</span>
|
|
<span class="prompt">"Open my Gmail tab and tell me who sent my last 3 emails."</span>
|
|
<a href="https://browsermcp.dev/#try" target="_blank" rel="noopener">More things to try</a>
|
|
</div>
|
|
|
|
<div class="section-title">Pairing (optional)</div>
|
|
<div class="pairing" id="pairing">
|
|
<p>Two Chrome profiles, two agents? Give each profile a key, and each server the same one. Then a profile only takes commands from its own server. Leave empty for the default: no key, no setup.</p>
|
|
<div class="row">
|
|
<input id="pairKey" type="text" spellcheck="false" autocomplete="off" placeholder="e.g. work-laptop">
|
|
<button id="savePair">Save</button>
|
|
</div>
|
|
<code id="pairCmd" class="pairCmd" hidden></code>
|
|
<button id="copyPair" hidden>Copy the server command</button>
|
|
</div>
|
|
|
|
<div class="section-title">Sessions</div>
|
|
<div id="sessions" class="sessions">
|
|
<div class="empty">No tabs claimed yet</div>
|
|
</div>
|
|
|
|
<div class="section-title">Action Log</div>
|
|
<div class="log" id="log">
|
|
<div class="empty">No actions yet</div>
|
|
</div>
|
|
|
|
<button id="reconnect">Reconnect</button>
|
|
<button id="clearLog" style="margin-top:4px">Clear log</button>
|
|
|
|
<script src="popup.js"></script>
|
|
</body>
|
|
</html>
|