chrome-bridge-mcp 1.8.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Francesco Sorrentino (frsorrentino)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,185 @@
+# Chrome Bridge
+
+![License: MIT](https://img.shields.io/badge/license-MIT-green) ![Node 18+](https://img.shields.io/badge/node-%E2%89%A518-brightgreen) ![Chrome 135+](https://img.shields.io/badge/chrome-%E2%89%A5135-blue) ![Tests](https://img.shields.io/badge/tests-109%20unit%20%2B%20e2e-brightgreen) [![Chrome Web Store](https://img.shields.io/badge/web%20store-published-blue)](https://chromewebstore.google.com/detail/chrome-bridge-for-claude/bioknpaeahidbelaljjohjofiloeodmb)
+
+**Chrome Bridge is an MCP server that connects Claude Code to your real, logged-in Chrome browser — measured 2.75× fewer turns and 2.28× lower cost than the official "Claude in Chrome" extension on a form-filling task, with ~3× the toolset and no paid plan.**
+
+By using a local WebSocket bridge and a specialized Chrome extension, Chrome Bridge provides 59 web-development tools (navigation, DOM inspection, visual regression, audits, network mocking) and a dedicated headless instance for CI. It is self-hosted, local-only, and requires no paid plan.
+
+## Why Chrome Bridge?
+
+Chrome Bridge is designed to be both more efficient and more powerful than Anthropic's official browser extension.
+
+### 1. Efficiency Benchmark
+Same model (Claude Sonnet 5), same task, paired runs on the same date and versions, **all runs included** (n=2 per arm — a small sample: direction, not precision):
+
+| Task | Chrome Bridge | Claude in Chrome | Ratio |
+| :--- | :--- | :--- | :--- |
+| **Form fill** | 6.0 turns (6-6) / $0.211 | 16.5 turns (16-17) / $0.481 | **2.75× turns, 2.28× cost** |
+| **1500-row table lookup** | see note | not re-run on this version | *not published* |
+
+On the table-lookup task, an `extract_table` fix took our side from 13.5 to 4.0
+turns, but the Claude-in-Chrome arm has not been re-run on that version — so no
+ratio is published for it. The inclusion rule, every raw run (including the
+unfavourable ones) and the harness limits are in
+[bench/RESULTS.md](bench/RESULTS.md).
+
+**Why it wins — it makes fewer round trips, not smaller payloads:**
+- **Compact References:** The agent acts on short element handles (e.g., `n1`, `n2`) returned by `navigate` or `get_interactives` instead of the slow screenshot → read-coordinates → click loop.
+- **Batching:** `fill_form` fills N fields and submits in one call — measured, 3 calls instead of 9 for the same form, at the same byte count.
+- **Server-Side Processing:** Filtering large tables happens server-side (`extract_table` with `where`): 236 bytes to find one row among 1500, against 50,070 bytes for `read_page`. The extension-to-model payload is the token bottleneck; Chrome Bridge moves the heavy lifting to localhost.
+- **Honest caveat:** per *turn*, Chrome Bridge costs slightly more than Claude in Chrome (41,985 vs 36,613 cache-read tokens; $0.0373 vs $0.0337). The win is in the number of turns.
+
+### 2. Feature Comparison
+Chrome Bridge ships 59 specialized tools (30 core by default) compared to ~20 in Claude in Chrome. It is also the only automation that drives the real host Chrome on ChromeOS/Crostini.
+
+| | Chrome Bridge | Claude in Chrome | Chrome DevTools MCP | Playwright MCP |
+|---|---|---|---|---|
+| **ChromeOS / Crostini** | **Yes** (real host) | No | Container only | Container only |
+| **Tools** | **59** (30 core) | ~20 | ~50 | 23 core (71 total) |
+| **Requires Paid Plan** | **No** | Yes (Pro+) | No | No |
+| **Network Mocking** | **Yes** (stub/headers) | No | No | Yes |
+| **Visual Regression** | **Yes** (`screenshot_diff`) | No | No | No |
+| **Audits (A11y/SEO/Sec)** | **Yes** (Full suite) | No | Partial | No |
+| **Headless / CI** | **Yes** | No | Yes | Yes |
+| **GIF / Video** | No | **Yes** | Partial | No |
+| **Breakpoints / Heap** | No | No | **Yes** | No |
+
+## Quickstart
+
+```bash
+git clone git@github.com:frsorrentino/chrome-bridge.git && cd chrome-bridge && ./install.sh
+```
+
+1. Load the extension: Open `chrome://extensions`, enable **Developer mode**, click **Load unpacked**, and select the `extension/` folder.
+2. Restart Claude Code.
+
+> On **ChromeOS/Crostini**, install the published extension from the [Chrome Web Store](https://chromewebstore.google.com/detail/chrome-bridge-for-claude/bioknpaeahidbelaljjohjofiloeodmb) instead of loading it unpacked — a filesystem-loaded extension is dropped on every reboot (the container isn't mounted when Chrome starts).
+
+### Example Session
+> *"Open localhost:3000, run an accessibility audit, and find the 'Sign Up' button"*
+
+Claude Code calls `navigate` (returning clickable element refs), `accessibility_audit`, and `find_text`. Because `navigate` returns refs like `n1`, the agent can immediately call `click(ref="n1")` without a discovery turn.
+
+## Token-Efficient Design
+
+- **Compact Schemas**: 30 core tools use ≈3.9k tokens of schemas (vs Playwright MCP's ~4.6k). Specialized groups (audits, visual, network, storage, dom, files) are opt-in via `--caps`.
+- **Act-from-Result**: Tools attach a capped preview of interactive elements with short refs. Actions only report a `page_changed` delta when the URL or title actually changes.
+- **Optimized Media**: Screenshots are downscaled to ≤1568px. Full-page captures are sliced into readable segments.
+- **Zero-Token Escape Hatches**: The [CLI](#cli) skips MCP schemas entirely, and recorded flows [replay](#launch-mode-headless--ci) without any model in the loop.
+
+## Highlights
+
+- **Launch Mode**: Start a dedicated Chromium instance with an ephemeral profile for isolated sessions or CI.
+- **Network Mocking**: Block/redirect requests, rewrite headers, or stub response bodies with synthetic data.
+- **Visual Regression**: Use `screenshot_diff` to compare current pages against named baselines.
+- **Structured Extraction**: One-call `extract` for repeated data and `extract_table` with server-side `where` filtering.
+
+## Architecture
+
+```
+Claude Code  <--stdio-->  MCP Server  <--WebSocket :8765-->  Chrome Extension
+                          (server/)                          (extension/, MV3)
+```
+
+The **MCP Server** (Node.js) handles the protocol and tool logic. The **Chrome Extension** (MV3) executes commands via Chrome APIs. User scripts (`execute_js`) run via `chrome.userScripts.execute()`, requiring the "Allow user scripts" toggle in extension settings.
+
+## Tools (59 total)
+
+### Core & Navigation (7)
+`get_status`, `get_tabs`, `create_tab`, `navigate`, `tab_action`, `get_frames`, `screenshot`.
+
+### Interaction (11)
+`click`, `type_text`, `fill_form`, `hover`, `press_key`, `scroll`, `drag_and_drop`, `upload_file`, `dismiss_overlays`, `handle_dialogs`, `clipboard`.
+
+### DOM & Inspection (11)
+`read_page`, `extract`, `get_page_info`, `query_dom`, `modify_dom`, `find_text`, `get_interactives`, `inject_css`, `highlight_elements`, `watch_dom`, `measure_spacing`.
+
+### Debugging & Network (8)
+`execute_js`, `read_console`, `monitor_network`, `monitor_websocket`, `network_rules` (block/redirect/stub/headers), `get_performance`, `web_vitals`, `list_event_listeners`.
+
+### Visual & Responsive (7)
+`element_screenshot`, `full_page_screenshot`, `screenshot_diff`, `viewport_resize`, `set_zoom`, `emulate_media`, `set_geolocation`.
+
+### Audits (6)
+`accessibility_audit`, `seo_audit`, `security_headers`, `check_links` (server-side verification), `unused_css`, `extract_table` (with `where` filtering).
+
+### State, Storage & Files (9)
+`get_storage`, `set_storage`, `session_fixture`, `http_auth`, `save_page` (MHTML), `manage_downloads`, `session_record`, `wait_for`, `assert`.
+
+## Install
+
+**Requirements:** Node.js 18+, Chrome 135+.
+
+### From Source
+```bash
+git clone git@github.com:frsorrentino/chrome-bridge.git
+cd chrome-bridge
+./install.sh
+```
+`install.sh` registers the MCP server in Claude Code (`--scope user`).
+
+### Manual Registration
+```bash
+claude mcp add --scope user chrome-bridge node /path/to/server/index.js
+```
+
+**Note:** For `execute_js`, you must enable **"Allow user scripts"** in `chrome://extensions` → Chrome Bridge → Details. On Chrome 135-137, enable Developer Mode instead.
+
+## Configuration
+
+Configure the server via environment variables (or the matching CLI flags):
+- `CHROME_BRIDGE_PORT`: Default `8765`.
+- `CHROME_BRIDGE_HOST` / `--host`: Bind address, default `127.0.0.1`. Set to `0.0.0.0` **only** where the browser lives outside the container (ChromeOS/Crostini port-forward) — and pair it with a token.
+- `CHROME_BRIDGE_TOKEN`: Shared secret required on both `ext_init` and `relay_init`. Strongly recommended whenever the bind is not loopback.
+- `CHROME_BRIDGE_CAPS` / `--caps`: Tool groups to load (`core`, `audits`, `visual`, `network`, `storage`, `dom`, `files`, or `all`). `install.sh` registers with `all`; the bare server defaults to `core` (30 tools). `get_status` reports `caps_active` and `caps_available`.
+
+Run `node tools/measure-schema.mjs` to see the exact schema cost of the active set.
+
+## CLI
+
+The CLI allows batch operations and pipes output through `grep` or `jq` before it reaches the model:
+```bash
+chrome-bridge navigate --url https://example.com
+chrome-bridge read_console --level error | head -20
+chrome-bridge assert --selector "#success" --text "Done"
+chrome-bridge replay --file ./recordings/login.jsonl
+```
+
+## Launch Mode (Headless / CI)
+
+Launch mode starts a dedicated Chromium instance with an ephemeral profile:
+```bash
+node server/index.js --launch --headless
+```
+Perfect for CI smoke tests using `session_record` + `replay`. Note: `execute_js` uses a `new Function` fallback in launch mode if the user-script toggle is unavailable.
+
+## Security
+
+- **Loopback by default**: the WebSocket server binds `127.0.0.1`. Exposing it to the network is opt-in via `CHROME_BRIDGE_HOST`/`--host`.
+- **Origin validation**: extension connections are only accepted from a `chrome-extension://` origin, and — with a loopback bind — only from loopback.
+- **Token on both handshakes**: `CHROME_BRIDGE_TOKEN`, when set, is required for `ext_init` *and* `relay_init`. Without it, any local process could act as a relay and reach `execute_js` in your authenticated browser session.
+- **Relay security**: secondary MCP instances must connect via loopback and are acknowledged with `relay_init_ok`, so a foreign process holding the port fails fast instead of timing out per command.
+- **What is *not* protected**: page content reaches the model unfiltered, so a hostile page's text is untrusted input; `get_storage`, `session_fixture`, HAR exports and screenshots are **not** redacted and may carry cookies, tokens or personal data. Do not point the automation at pages holding secrets you would not paste into a chat.
+
+## Troubleshooting
+
+| Symptom | Cause / fix |
+|---|---|
+| `Chrome extension not connected` | Extension disabled, or its port differs from the server's. The error names the actual host/port; check them in the popup (⚙). |
+| Port 8765 already in use | Expected: a second MCP session becomes a **relay** and shares the one bridge. Set `CHROME_BRIDGE_PORT` for a separate one. |
+| `Port N is held by a process that is not chrome-bridge` | Something else owns the port. Free it or change `CHROME_BRIDGE_PORT`. |
+| `execute_js` fails | Enable **Allow user scripts** in `chrome://extensions` → Chrome Bridge → Details (Chrome 138+; on 135-137 enable Developer Mode). |
+| `read_console` returns a `note=Instrumentation not loaded` | The page was opened before the extension, "Capture console & metrics" is off, or the page is not injectable (`chrome://`). Reload the page. |
+| Screenshot times out | On ChromeOS a fully occluded window stops producing frames; captures fail after 10s. Bring the window forward. |
+| Commands work then stop after a while | The MV3 service worker restarted and in-memory state (network log, diff baselines, HTTP auth) was reset. Re-run the monitoring call. |
+| Extension is dropped on every ChromeOS reboot | Install from the Chrome Web Store instead of Load unpacked: the Crostini filesystem isn't mounted when Chrome starts. |
+| Tool missing from the list | It's in an opt-in capability group. Check `get_status` → `caps_available`, then set `CHROME_BRIDGE_CAPS=all`. |
+
+## Tests
+- **Unit**: `npm test` (Chrome-free, ~22s).
+- **E2E**: `npm run test:e2e` (requires Chrome and a connected extension).
+- **Schema cost**: `npm run measure`.
+
+## License
+MIT

package/extension/console-capture.js

@@ -0,0 +1,46 @@
+/**
+ * Iniettato a document_start in MAIN world: cattura console.* fin dal
+ * primo istante di vita della pagina, più errori non gestiti.
+ *
+ * Registrato dinamicamente dal service worker solo quando l'instrumentation
+ * è attiva (toggle nel popup): pagine non in debug hanno zero footprint.
+ * La cattura non deve mai lanciare nella pagina: ogni hook è in try/catch e
+ * delega sempre all'originale.
+ */
+(() => {
+  if (window.__chromeBridge_consoleHooked) return;
+  window.__chromeBridge_consoleHooked = true;
+  window.__chromeBridge_consoleLogs = [];
+  const MAX = 1000;
+  const push = (entry) => {
+    const buf = window.__chromeBridge_consoleLogs;
+    if (buf.length >= MAX) buf.shift(); // ring buffer: tieni i più recenti, non i primi 1000
+    buf.push(entry);
+  };
+  for (const method of ['log', 'warn', 'error', 'info', 'debug']) {
+    const orig = console[method].bind(console);
+    console[method] = (...args) => {
+      try {
+        push({
+          level: method,
+          args: args.map((a) => {
+            try { return typeof a === 'object' ? JSON.stringify(a) : String(a); }
+            catch { return String(a); }
+          }),
+          timestamp: Date.now(),
+        });
+      } catch {}
+      return orig(...args);
+    };
+  }
+  window.addEventListener('error', (e) => {
+    try { push({ level: 'error', args: [`Uncaught ${e.message} at ${e.filename || '?'}:${e.lineno || 0}`], timestamp: Date.now() }); } catch {}
+  }, true);
+  window.addEventListener('unhandledrejection', (e) => {
+    try {
+      let reason;
+      try { reason = String(e.reason); } catch { reason = '<unstringifiable>'; }
+      push({ level: 'error', args: [`Unhandled rejection: ${reason}`], timestamp: Date.now() });
+    } catch {}
+  });
+})();

package/extension/manifest.json

@@ -0,0 +1,44 @@
+{
+  "manifest_version": 3,
+  "name": "Chrome Bridge for Claude Code",
+  "version": "1.8.0",
+  "description": "Bridge your browser to Claude Code: 59 token-efficient web-dev automation tools over a local WebSocket. ChromeOS included.",
+  "homepage_url": "https://github.com/frsorrentino/chrome-bridge",
+  "minimum_chrome_version": "135",
+  "permissions": [
+    "tabs",
+    "scripting",
+    "userScripts",
+    "alarms",
+    "storage",
+    "cookies",
+    "webNavigation",
+    "webRequest",
+    "declarativeNetRequest",
+    "clipboardRead",
+    "clipboardWrite",
+    "downloads",
+    "pageCapture",
+    "webRequestAuthProvider"
+  ],
+  "host_permissions": [
+    "<all_urls>"
+  ],
+  "background": {
+    "service_worker": "service-worker.js",
+    "type": "module"
+  },
+  "action": {
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16": "icons/icon-16.png",
+      "48": "icons/icon-48.png",
+      "128": "icons/icon-128.png"
+    }
+  },
+  "icons": {
+    "16": "icons/icon-16.png",
+    "48": "icons/icon-48.png",
+    "128": "icons/icon-128.png"
+  }
+}

package/extension/page-instrumentation.js

@@ -0,0 +1,115 @@
+/**
+ * Iniettato a document_start in MAIN world: raccoglie Web Vitals
+ * (CLS, LCP, long task, INP approssimato) e censisce gli event listener
+ * registrati via addEventListener.
+ */
+(() => {
+  if (window.__chromeBridge_instrumented) return;
+  window.__chromeBridge_instrumented = true;
+
+  // --- Web Vitals ---
+  const vitals = {
+    cls: 0,
+    lcp: null,
+    longTasks: { count: 0, totalMs: 0, maxMs: 0 },
+    maxEventDelayMs: null, // INP approssimato (max event duration)
+  };
+  window.__chromeBridge_vitals = vitals;
+
+  try {
+    new PerformanceObserver((list) => {
+      for (const entry of list.getEntries()) {
+        if (!entry.hadRecentInput) vitals.cls += entry.value;
+      }
+    }).observe({ type: 'layout-shift', buffered: true });
+  } catch {}
+
+  try {
+    new PerformanceObserver((list) => {
+      const entries = list.getEntries();
+      if (entries.length) vitals.lcp = Math.round(entries[entries.length - 1].startTime);
+    }).observe({ type: 'largest-contentful-paint', buffered: true });
+  } catch {}
+
+  try {
+    new PerformanceObserver((list) => {
+      for (const entry of list.getEntries()) {
+        vitals.longTasks.count++;
+        vitals.longTasks.totalMs += Math.round(entry.duration);
+        vitals.longTasks.maxMs = Math.max(vitals.longTasks.maxMs, Math.round(entry.duration));
+      }
+    }).observe({ type: 'longtask', buffered: true });
+  } catch {}
+
+  try {
+    new PerformanceObserver((list) => {
+      for (const entry of list.getEntries()) {
+        if (vitals.maxEventDelayMs === null || entry.duration > vitals.maxEventDelayMs) {
+          vitals.maxEventDelayMs = Math.round(entry.duration);
+        }
+      }
+    }).observe({ type: 'event', buffered: true, durationThreshold: 40 });
+  } catch {}
+
+  // --- Censimento event listener ---
+  const listeners = [];
+  window.__chromeBridge_listeners = listeners;
+  const MAX_LISTENERS = 2000;
+
+  const describeTarget = (t) => {
+    if (t === window) return 'window';
+    if (t === document) return 'document';
+    if (t && t.nodeType === 1) {
+      const tag = t.tagName.toLowerCase();
+      const id = t.id ? `#${t.id}` : '';
+      const cls = t.classList && t.classList.length ? `.${[...t.classList].slice(0, 2).join('.')}` : '';
+      return `${tag}${id}${cls}`;
+    }
+    return String(t && t.constructor ? t.constructor.name : t);
+  };
+
+  const origAdd = EventTarget.prototype.addEventListener;
+  EventTarget.prototype.addEventListener = function (type, fn, opts) {
+    // La cattura non deve mai impedire la registrazione reale del listener.
+    try {
+      if (listeners.length >= MAX_LISTENERS) listeners.shift(); // ring buffer
+      listeners.push({
+        type,
+        target: describeTarget(this),
+        capture: typeof opts === 'boolean' ? opts : !!(opts && opts.capture),
+        once: !!(opts && opts.once),
+        passive: !!(opts && opts.passive),
+        timestamp: Date.now(),
+      });
+    } catch {}
+    return origAdd.call(this, type, fn, opts);
+  };
+
+  // --- SPA route tracking ---
+  const routes = [];
+  window.__chromeBridge_routes = routes;
+  const MAX_ROUTES = 200;
+  const recordRoute = (type) => {
+    const url = location.href;
+    const last = routes[routes.length - 1];
+    if (last && last.url === url) return; // dedup consecutivi
+    if (routes.length >= MAX_ROUTES) routes.shift();
+    routes.push({ url, type, timestamp: Date.now() });
+    window.__chromeBridge_lastRoute = url;
+  };
+  recordRoute('initial');
+  const origPush = history.pushState;
+  history.pushState = function (...args) {
+    const r = origPush.apply(this, args);
+    recordRoute('pushState');
+    return r;
+  };
+  const origReplace = history.replaceState;
+  history.replaceState = function (...args) {
+    const r = origReplace.apply(this, args);
+    recordRoute('replaceState');
+    return r;
+  };
+  window.addEventListener('popstate', () => recordRoute('popstate'));
+  window.addEventListener('hashchange', () => recordRoute('hashchange'));
+})();

package/extension/popup.css

@@ -0,0 +1,128 @@
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+[hidden] { display: none !important; }
+
+:root {
+  --bg: #ffffff;
+  --fg: #1f1f1f;
+  --muted: #5f6368;
+  --surface: #f8f9fa;
+  --border: #e0e0e0;
+  --accent: #1a73e8;
+  --accent-bg: #f1f3f4;
+  --ok: #188038;
+  --ok-bg: #e6f4ea;
+  --err: #d93025;
+  --warn-bg: #fef7e0;
+  --warn-fg: #994c00;
+  --warn-btn: #1a73e8;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #0d1117;
+    --fg: #e6edf3;
+    --muted: #8b949e;
+    --surface: #161b22;
+    --border: #21262d;
+    --accent: #58a6ff;
+    --accent-bg: #21262d;
+    --ok: #3fb950;
+    --ok-bg: #12261e;
+    --err: #f85149;
+    --warn-bg: #341a00;
+    --warn-fg: #e3b341;
+    --warn-btn: #9e6a03;
+  }
+}
+
+body {
+  width: 320px;
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  font-size: 13px;
+  background: var(--bg);
+  color: var(--fg);
+}
+
+.hdr {
+  display: flex; align-items: center; gap: 8px;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--border);
+}
+.hdr .logo { width: 22px; height: 22px; border-radius: 6px; }
+.hdr h1 { font-size: 14px; font-weight: 700; }
+.hdr .ver { font-size: 10px; color: var(--muted); margin-left: auto; }
+
+.status-row { display: flex; align-items: center; gap: 6px; padding: 10px 14px; }
+.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+.dot.connected { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
+.dot.connecting { background: #f39c12; }
+.dot.disconnected { background: var(--err); }
+#status-text { font-weight: 600; }
+.status-row .ws-url {
+  margin-left: auto;
+  font-family: ui-monospace, monospace;
+  font-size: 11px; color: var(--muted);
+}
+
+.warn {
+  margin: 0 14px 10px; padding: 10px 12px;
+  border-radius: 8px; font-size: 12px; line-height: 1.45;
+  background: var(--warn-bg); color: var(--warn-fg);
+}
+.warn b { display: block; margin-bottom: 2px; }
+.fixbtn {
+  margin-top: 8px; padding: 5px 12px;
+  border: none; border-radius: 6px; cursor: pointer;
+  font-size: 12px; font-weight: 600;
+  background: var(--warn-btn); color: #fff;
+}
+
+.card {
+  margin: 0 14px 10px; padding: 8px 10px;
+  border-radius: 8px; background: var(--surface);
+}
+.card-title {
+  font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
+  color: var(--muted); margin-bottom: 4px;
+}
+.kv { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 0; }
+.kv span { color: var(--muted); }
+.kv b.bad { color: var(--err); }
+.hint { font-size: 11px; color: var(--muted); padding-top: 4px; }
+#page-unavailable { font-size: 12px; color: var(--muted); }
+
+.stats { display: flex; gap: 8px; padding: 0 14px 10px; }
+.stat { flex: 1; border-radius: 8px; padding: 8px 10px; background: var(--surface); }
+.stat .n { font-size: 16px; font-weight: 700; font-family: ui-monospace, monospace; }
+.stat .n.small { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.stat .n.bad { color: var(--err); }
+.stat .l { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
+
+#err-items { list-style: none; font-size: 11px; }
+#err-items li { padding: 2px 0; color: var(--muted); }
+#err-items li b { color: var(--err); font-family: ui-monospace, monospace; }
+
+.acts { display: flex; gap: 8px; padding: 0 14px 14px; }
+.abtn {
+  flex: 1; padding: 7px 0; text-align: center;
+  border: none; border-radius: 8px; cursor: pointer;
+  font-size: 12px; font-weight: 600;
+  background: var(--accent-bg); color: var(--accent);
+}
+.abtn.icon { flex: 0 0 36px; }
+.abtn.primary { background: var(--accent); color: #fff; }
+.abtn:hover { filter: brightness(0.95); }
+
+.config {
+  display: flex; flex-direction: column; gap: 6px;
+  margin: 0 14px 14px; padding: 10px;
+  border-radius: 8px; background: var(--surface); font-size: 12px;
+}
+.config input {
+  width: 100%; padding: 4px 6px;
+  border: 1px solid var(--border); border-radius: 4px;
+  background: var(--bg); color: var(--fg);
+}
+.config label.check { display: flex; align-items: center; gap: 6px; }
+.config label.check input { width: auto; }

package/extension/popup.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="popup.css">
+</head>
+<body>
+  <header class="hdr">
+    <img src="icons/icon-48.png" alt="" class="logo">
+    <h1>Chrome Bridge</h1>
+    <span class="ver" id="versions">v—</span>
+  </header>
+
+  <div class="status-row">
+    <span id="indicator" class="dot disconnected"></span>
+    <b id="status-text">Disconnesso</b>
+    <span class="ws-url" id="ws-url">ws://localhost:8765</span>
+  </div>
+
+  <div id="us-warning" class="warn" hidden>
+    <b>⚠ Script utente disattivati</b>
+    <span>execute_js e wait_for(function) non sono disponibili senza il permesso dedicato.</span>
+    <button id="us-fix" class="fixbtn">Apri impostazioni →</button>
+  </div>
+
+  <section class="card" id="page-card">
+    <div class="card-title">Pagina corrente</div>
+    <div id="page-body">
+      <div class="kv"><span>Errori console</span><b id="pg-errors">—</b></div>
+      <div class="kv"><span>LCP / CLS</span><b id="pg-vitals">—</b></div>
+      <div class="kv"><span>Stack</span><b id="pg-stack">—</b></div>
+      <div class="hint" id="pg-hint" hidden>Attiva "Capture console &amp; metrics" (⚙) per errori e metriche.</div>
+    </div>
+    <div id="page-unavailable" hidden>Non disponibile su questa pagina.</div>
+  </section>
+
+  <div class="stats">
+    <div class="stat"><div class="n" id="st-calls">0</div><div class="l">tool call</div></div>
+    <div class="stat"><div class="n small" id="st-last">—</div><div class="l" id="st-last-ago">ultimo</div></div>
+    <div class="stat"><div class="n" id="st-errors">0</div><div class="l">errori</div></div>
+  </div>
+
+  <div id="err-list" class="card" hidden>
+    <div class="card-title">Errori recenti</div>
+    <ul id="err-items"></ul>
+  </div>
+
+  <div class="acts">
+    <button id="reconnect" class="abtn">↻ Riconnetti</button>
+    <button id="diagnostics" class="abtn">⧉ Diagnostica</button>
+    <button id="toggle-config" class="abtn icon" title="Impostazioni">⚙</button>
+  </div>
+
+  <div class="config" id="config" hidden>
+    <label>Porta <input type="number" id="port" min="1" max="65535"></label>
+    <label>Token <input type="password" id="token" placeholder="(nessuno)"></label>
+    <label class="check"><input type="checkbox" id="instrument"> Capture console &amp; metrics</label>
+    <button id="save" class="abtn primary">Salva e riconnetti</button>
+  </div>
+
+  <script src="telemetry.js"></script>
+  <script src="popup.js"></script>
+</body>
+</html>