@agent360/browser-mcp 1.25.0 → 1.28.1

package/extension/manifest.json

@@ -1,8 +1,8 @@
 {
   "manifest_version": 3,
   "name": "Agent360 Browser MCP",
-  "version": "1.25.0",
-  "description": "Control your real Chrome from Claude Code — navigate, click, fill, screenshot, solve CAPTCHAs. 34 tools, multi-session.",
+  "version": "1.28.1",
+  "description": "Give Claude Code your real logged-in Chrome. Two parts: this extension + one npx command. Multi-session, local, MIT.",
   "permissions": [
     "tabs",
     "tabGroups",

package/extension/offscreen.js

@@ -1,24 +1,99 @@
 /**
  * Offscreen Document — Persistent WebSocket bridge (multi-session)
  *
- * Scans port range 9876-9885 and maintains connections to ALL active
+ * Scans port range 9876-9895 and maintains connections to ALL active
  * MCP servers. Each Claude Code session gets its own port automatically.
  * Passes port ID with every command so background.js can track tab ownership.
  *
  * Flow: MCP Server(s) ←(WS)→ this ←(chrome.runtime.sendMessage)→ Service Worker → Chrome APIs
  */
 
+// Et offscreen-dokument har IKKE chrome.runtime.getManifest() — kaldet kaster
+// "chrome.runtime.getManifest is not a function". Versionen kommer derfor med i
+// dokumentets egen URL, sat af background.js da dokumentet blev oprettet. Det er
+// samtidig den rigtige semantik: et dokument oprettet af en aeldre udgave baerer
+// den aeldre version, saa `offscreenSvarer()` kan se forskel paa "svarer" og
+// "er den udgave vi koerer nu".
+function minVersion() {
+  try { return new URLSearchParams(location.search).get('v') || null; } catch { return null; }
+}
+
 const BASE_PORT = 9876;
 const MAX_PORT = 9895;
 const connections = new Map(); // port → WebSocket
 
-function scanPorts() {
-  for (let port = BASE_PORT; port <= MAX_PORT; port++) {
-    const existing = connections.get(port);
-    if (existing && (existing.readyState === WebSocket.OPEN || existing.readyState === WebSocket.CONNECTING)) {
-      continue;
+// ── Hvorfor porte foerst PROBES med fetch, og ikke bare aabnes (MAALT 22/8) ──────
+//
+// Chrome bremser nye WebSocket-haandtryk. Formlen staar i Chromiums egen kilde
+// (services/network/websocket_throttler.cc):
+//
+//     forsinkelse = rand(1000..5000) ms × 2^min(p + f/(s+1), 16) / 65536
+//
+// p = haandtryk i luften lige nu · f = mislykkede · s = lykkedes. Bremsen er
+// PER RENDERER-PROCES, ikke per adresse — at sprede sig over 20 porte hjaelper
+// altsaa ingenting. Og den her funktion aabnede foer 20 WebSockets i ét smaek
+// hvert 2. sekund, hvoraf de fleste var mod doede porte. Det satte baade p og f
+// i vejret og laaste eksponenten paa loftet, saa HVER forbindelse betalte den
+// maksimale straf paa op til 5 sekunder.
+//
+// Dertil kom vores egen faelde: connectTimeout stod paa 2000 ms — UNDER bremsens
+// maksimum. Vi draebte altsaa systematisk forbindelser der bare stod og ventede,
+// og Chromiums header siger det rent ud: at destruere en PendingConnection uden
+// at haandtrykket er fuldfoert TAELLER SOM EN FEJL. Hvert drab gjorde bremsen
+// haardere, hvilket draebte flere. En spiral vi selv drev.
+//
+// Maalt effekt: den 10. chat var 15,5 sekunder om at komme op, og 5 af 19 kom
+// aldrig inden for 22 sekunder.
+//
+// Rettelsen er to ting:
+//   1. Find levende porte med et almindeligt HTTP-kald. En ws-server svarer
+//      "426 Upgrade Required" paa et GET; en doed port afviser. HTTP-kald taeller
+//      IKKE med i WebSocket-bremsen — maalt: 100 fejlede HTTP-probes kostede nul,
+//      400 fejlede WS-forsoeg kostede 14 sekunder. Vi aabner nu kun WebSockets
+//      mod porte vi VED der sidder en server paa, saa f falder til ~0.
+//   2. connectTimeout haevet over bremsens 5-sekunders loft, saa vi ikke laengere
+//      draeber vores egne ventende forbindelser.
+//
+// Sidegevinst: det er sikrere. Foer aabnede udvidelsen blindt en WebSocket mod
+// hvad der nu maatte lytte paa 9876-9895.
+const PROBE_TIMEOUT_MS = 400;
+let skanner = false;
+
+async function harServer(port) {
+  try {
+    const svar = await fetch(`http://127.0.0.1:${port}/`, {
+      signal: AbortSignal.timeout(PROBE_TIMEOUT_MS),
+      cache: 'no-store',
+    });
+    return svar.status === 426;   // ws-serverens svar paa et almindeligt GET
+  } catch {
+    return false;                 // afvist, timeout eller ingen der lytter
+  }
+}
+
+async function scanPorts() {
+  if (skanner) return;            // skanningen er nu asynkron; undgaa overlap
+  skanner = true;
+  try {
+    const kandidater = [];
+    for (let port = BASE_PORT; port <= MAX_PORT; port++) {
+      const existing = connections.get(port);
+      if (existing && (existing.readyState === WebSocket.OPEN || existing.readyState === WebSocket.CONNECTING)) {
+        continue;
+      }
+      kandidater.push(port);
     }
-    tryConnect(port);
+    if (!kandidater.length) return;
+
+    // Probes koeres parallelt — de er gratis i bremsens regnskab.
+    const levende = await Promise.all(
+      kandidater.map(async (port) => (await harServer(port)) ? port : null),
+    );
+    for (const port of levende) {
+      if (port !== null) tryConnect(port);
+    }
+  } finally {
+    skanner = false;
   }
 }
 
@@ -30,13 +105,54 @@ function tryConnect(port) {
     return;
   }
 
+  // MAALT 21/8: en og samme udvidelse stod med TO aabne forbindelser til den samme
+  // server. Aarsagen laa her: forbindelsen blev foerst skrevet i kortet i onopen.
+  // scanPorts koerer hvert 2. sekund og springer kun over hvis kortet allerede har
+  // en forbindelse der er OPEN eller CONNECTING — men i vinduet mellem `new WebSocket`
+  // og onopen stod der intet i kortet. Naeste scan lavede derfor endnu en. Den foerste
+  // blev forældreloes: aldrig lukket, aldrig i kortet, men fuldt aaben.
+  // Registrering med det samme lukker vinduet.
+  connections.set(port, ws);
+
+  // 8000, ikke 2000: Chromes bremse kan lovligt holde et haandtryk i op til 5000 ms,
+  // og at lukke ned foer det taeller som en fejl der goer bremsen haardere. Se blokken
+  // over scanPorts. En haengende port koster nu en plads i 8 sekunder — scanPorts
+  // springer allerede CONNECTING over, saa det blokerer intet.
   const connectTimeout = setTimeout(() => {
     if (ws.readyState !== WebSocket.OPEN) ws.close();
-  }, 2000);
+  }, 8000);
 
   ws.onopen = () => {
     clearTimeout(connectTimeout);
-    connections.set(port, ws);
+    connections.set(port, ws);   // stadig vores? scanPorts har ikke lavet en nyere
+
+    // ── Identitets-haandtryk (MAALT 21/8) ──────────────────────────────────
+    // To udgaver af udvidelsen kan vaere indlaest i den samme Chrome samtidig —
+    // fx en "load unpacked"-kopi ved siden af en anden. Begge scanner de samme
+    // porte, saa BEGGE forbinder til hver eneste MCP-server. Serveren havde kun
+    // én socket-variabel, som hver ny forbindelse overskrev, saa kommandoerne
+    // landede hos den der forbandt sidst — vilkaarligt hvilken af de to. Den
+    // anden fortsatte med sit eget sessions-kort og sine egne fane-grupper.
+    // Haandtrykket giver serveren det den mangler for at kunne se at der er to,
+    // vaelge den nyeste, og sige det hoejt i stedet for at gaette i tavshed.
+    // MAALT 22/8 mod en aegte Chrome: haandtrykket ankom ALDRIG, selv om fetch-probet
+    // — som ligger i samme fil og samme dokument — virkede fint. Den tomme `catch {}`
+    // slugte aarsagen i tavshed, saa fejlen var usynlig baade for serveren og for os.
+    // To rettelser: haandtrykket sendes nu UANSET om manifest-opslaget lykkes (det er
+    // selve beskeden serveren har brug for, ikke felterne i den), og en fejl bliver
+    // logget i stedet for at forsvinde.
+    let hilsen = { type: 'hello', extensionId: null, version: minVersion(), name: null };
+    try {
+      hilsen = { type: 'hello', extensionId: chrome.runtime.id, version: minVersion(), name: null };
+    } catch (e) {
+      console.warn('[Offscreen] kunne ikke bygge haandtrykket:', e?.message || e);
+    }
+    try {
+      ws.send(JSON.stringify(hilsen));
+    } catch (e) {
+      console.warn('[Offscreen] kunne ikke sende haandtrykket:', e?.message || e);
+    }
+
     console.log(`[Offscreen] Connected to MCP server on port ${port} (${connections.size} total)`);
     updateStatus();
   };
@@ -44,13 +160,14 @@ function tryConnect(port) {
   ws.onmessage = async (event) => {
     let cmd;
     try { cmd = JSON.parse(event.data); } catch { return; }
-    const { id, method, params } = cmd;
+    const { id, method, params, pid } = cmd;
 
     try {
       // Include port so background.js knows which session owns this command
       const result = await chrome.runtime.sendMessage({
         type: 'mcp_command',
         port,
+        pid,
         method,
         params: params || {},
       });
@@ -92,6 +209,21 @@ function updateStatus() {
   }).catch(() => {});
 }
 
+// Svar paa hjerteslaget. Uden dette svar kan background.js ikke skelne et levende
+// dokument fra et der findes men aldrig fik sit script indlaest — og saa bliver et
+// doedt dokument aldrig erstattet.
+chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
+  if (msg?.type !== 'bmcp_ping') return;
+  // MAALT 22/8: svaret var bare { ok: true }. Det fortalte om broen var I LIVE, ikke
+  // om den var OPDATERET — og det er to forskellige spoergsmaal. En bro fra en aeldre
+  // udgave svarer lige saa villigt paa ping, saa ensureOffscreen regnede den for rask
+  // og udskiftede den aldrig. Resultatet: kode-aendringer slog aldrig igennem uden en
+  // fuld genstart af Chrome, heller ikke efter "Genindlaes" paa chrome://extensions.
+  // Versionen med i svaret goer forskellen synlig.
+  sendResponse({ ok: true, version: minVersion() });
+  return true;
+});
+
 // Listen for terminate signals from background.js (sent when last tab in a session closes)
 chrome.runtime.onMessage.addListener((msg) => {
   if (msg.type !== 'terminate_mcp_session' || typeof msg.port !== 'number') return;

package/extension/popup.html

@@ -37,6 +37,24 @@
     .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; }
+    .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; }
   </style>
 </head>
 <body>
@@ -44,12 +62,28 @@
 
   <div class="status">
     <div class="dot off" id="dot"></div>
-    <span class="label" id="label">Checking...</span>
+    <span class="label" id="label">Checking…</span>
+  </div>
+
+  <div class="setup" id="setup">
+    <p><b>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>
+    <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">Sessions</div>
   <div id="sessions" class="sessions">
-    <div class="empty">No active sessions</div>
+    <div class="empty">No tabs claimed yet</div>
   </div>
 
   <div class="section-title">Action Log</div>

package/extension/popup.js

@@ -1,13 +1,30 @@
 // ── Status ──────────────────────────────────────────────────────────────────
 
-chrome.storage.local.get(['mcpConnected', 'mcpCount', 'mcpPorts'], (result) => {
-  const connected = result.mcpConnected === true;
-  const count = result.mcpCount || 0;
+// mcpCount = agent clients on the socket. `sessions` = agents that have actually claimed a
+// tab. They differ, and showing "Connected — 1 session" above "No active sessions" read as a
+// contradiction at exactly the moment a new user checks whether the install worked.
+function paintStatus(connected, count, sessionCount) {
   document.getElementById('dot').className = `dot ${connected ? 'on' : 'off'}`;
-  document.getElementById('label').textContent = connected
-    ? `Forbundet til ${count} session${count > 1 ? 's' : ''}`
-    : 'Ikke forbundet';
-});
+  document.getElementById('label').textContent = !connected
+    ? 'Not connected — no MCP server found'
+    : sessionCount > 0
+      ? `Connected — ${sessionCount} active session${sessionCount === 1 ? '' : 's'}`
+      : `Connected — ready (${count} agent${count === 1 ? '' : 's'} listening)`;
+  // The Chrome Web Store can only install the extension. If nothing is listening on
+  // ports 9876-9895, the user almost certainly never ran the npx install — say so.
+  document.getElementById('setup').classList.toggle('show', !connected);
+  // Connected but idle: they got it working and now need to know what to say.
+  document.getElementById('try').classList.toggle('show', connected && sessionCount === 0);
+}
+
+function refreshStatus() {
+  chrome.storage.local.get({ mcpConnected: false, mcpCount: 0, sessions: {} }, (result) => {
+    paintStatus(result.mcpConnected === true, result.mcpCount || 0,
+                Object.keys(result.sessions || {}).length);
+  });
+}
+
+refreshStatus();
 
 // ── Sessions with tabs ─────────────────────────────────────────────────────
 
@@ -17,7 +34,7 @@ function renderSessions() {
     const entries = Object.entries(sessions);
 
     if (!entries.length) {
-      container.innerHTML = '<div class="empty">Ingen aktive sessions</div>';
+      container.innerHTML = '<div class="empty">No tabs claimed yet</div>';
       return;
     }
 
@@ -40,7 +57,7 @@ function renderSessions() {
         const color = session.color || 'blue';
         const tabHtml = tabInfos.length
           ? tabInfos.map(u => `<div>• ${u}</div>`).join('')
-          : '<div>Ingen tabs</div>';
+          : '<div>No tabs</div>';
         return `
           <div class="session-card color-${color}">
             <div class="session-header">${session.label} <span style="font-weight:normal;font-size:10px;color:#64748b">port ${port}</span></div>
@@ -59,11 +76,11 @@ function renderLog() {
   chrome.storage.local.get({ actionLog: [] }, ({ actionLog }) => {
     const container = document.getElementById('log');
     if (!actionLog.length) {
-      container.innerHTML = '<div class="empty">Ingen actions endnu</div>';
+      container.innerHTML = '<div class="empty">No actions yet</div>';
       return;
     }
     container.innerHTML = actionLog.slice(0, 30).map(entry => {
-      const time = new Date(entry.time).toLocaleTimeString('da-DK', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+      const time = new Date(entry.time).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
       const cat = entry.category || 'safe';
       const cls = cat === 'sensitive' ? 'log-sensitive' : 'log-safe';
       return `<div class="log-entry"><span class="log-time">${time}</span><span class="log-method ${cls}">${entry.method}</span><span class="log-session">${entry.session || ''}</span></div>`;
@@ -77,20 +94,19 @@ renderLog();
 
 document.getElementById('reconnect').addEventListener('click', () => {
   chrome.runtime.sendMessage({ type: 'reconnect' });
-  document.getElementById('label').textContent = 'Reconnecting...';
+  document.getElementById('label').textContent = 'Reconnecting…';
   setTimeout(() => {
-    chrome.storage.local.get(['mcpConnected', 'mcpCount'], (result) => {
-      const connected = result.mcpConnected === true;
-      const count = result.mcpCount || 0;
-      document.getElementById('dot').className = `dot ${connected ? 'on' : 'off'}`;
-      document.getElementById('label').textContent = connected
-        ? `Forbundet til ${count} session${count > 1 ? 's' : ''}`
-        : 'Ikke forbundet';
-      renderSessions();
-    });
+    refreshStatus();
+    renderSessions();
   }, 3000);
 });
 
+document.getElementById('copyCmd').addEventListener('click', (e) => {
+  navigator.clipboard.writeText(document.getElementById('setupCmd').textContent.trim());
+  e.target.textContent = 'Copied!';
+  setTimeout(() => { e.target.textContent = 'Copy command'; }, 1500);
+});
+
 document.getElementById('clearLog').addEventListener('click', () => {
   chrome.storage.local.set({ actionLog: [] }, renderLog);
 });