chrome-bridge-mcp 1.26.0 → 1.28.0

package/README.md

@@ -164,22 +164,23 @@ user-script toggle isn't available.
 
 ## Tools
 
-60 in total. `core` (43 tools, every tool used in 101 real sessions) loads by
-default; the other 17 sit in six optional caps that the agent switches on
+66 in total. `core` (43 tools, every tool used in 101 real sessions) loads by
+default; the other 23 sit in seven optional caps that the agent switches on
 mid-session with `get_status({enable: ["visual"]})`, with no restart
 (`--caps` still sets them at startup).
 
-![60 tools in seven groups, from clicking a button to auditing a whole page](assets/readme/card4-toolbox.png)
+![66 tools in eight groups, from clicking a button to tracing a page](assets/readme/card4-toolbox.png)
 
 | Group | N | What's in it |
 |---|---|---|
 | Core & Navigation | 13 | tabs, windows, `navigate`, `screenshot`, `tile_windows` |
 | Interaction | 11 | `click`, `fill_form`, `upload_file`, dialogs, clipboard |
-| DOM & Inspection | 11 | `read_page`, `extract`, `query_dom`, `get_css_styles`, `watch_dom` |
+| DOM & Inspection | 12 | `read_page`, `extract`, `extract_table`, `query_dom`, `get_css_styles`, `watch_dom` |
 | Debugging & Network | 8 | `execute_js`, console, network log, mocking, `track_events` |
 | Visual & Responsive | 5 | `screenshot_diff`, viewport and zoom, media emulation |
 | Audits | 2 | `audit` (a11y, keyboard, SEO, security, links, vitals, css, resources, cache in one call), `cookie_audit` |
 | State, Storage & Files | 9 | storage, fixtures, MHTML, recording, `assert` |
+| Motion & Performance | 6 | `animations`, `frames` (long frames, CLS, INP), `perf_trace`, `screencast`, `lighthouse` and `heap_snapshot` (launch mode) |
 
 Every tool, with the notes that matter: [docs/TOOLS.md](docs/TOOLS.md).
 
@@ -206,6 +207,7 @@ Environment variables, each with a matching CLI flag:
 | `CHROME_BRIDGE_HOST` / `--host` | `127.0.0.1` | `0.0.0.0` **only** where the browser lives outside the container (ChromeOS/Crostini port-forward) — and only with a token |
 | `CHROME_BRIDGE_TOKEN` | unset | Required on both `ext_init` and `relay_init`. Strongly recommended whenever the bind isn't loopback |
 | `CHROME_BRIDGE_CAPS` / `--caps` | `core` | `core`, `audits`, `visual`, `network`, `storage`, `dom`, `files`, `all`. Optional caps can also be switched on at runtime with `get_status({enable})` |
+| `CHROME_BRIDGE_ALWAYS_LOAD` / `--always-load` | 22 most used tools | Tools kept in context when the client loads the server whole; the others carry `_meta['anthropic/alwaysLoad'] = false` and wait behind tool search (Claude Code 2.1.285+). `all` loads every tool; a comma list picks them |
 | `CHROME_BRIDGE_NO_JS` / `--no-js` | unset | No arbitrary JavaScript in the page: `execute_js` and `modify_dom` leave the schema, `wait_for(condition=function)` and `javascript:`/`data:` URLs are refused. `get_status` reports `js_evaluation` |
 | `CHROME_BRIDGE_READ_ROOT` / `--read-root` | unset | Where `upload_file` may read from. Unset: any file except keys and credentials (`~/.ssh`, `~/.aws`, `~/.gnupg`, `.env*`, `id_*`, `*.pem`, `*.key`, …), symlinks resolved first. Set: only files under this directory, whatever their name — the way to upload a certificate key on purpose |
 | `CHROME_BRIDGE_BROWSER` | unset | Launch mode only: the browser binary, e.g. `C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe`. Unset: the first of Chromium, Edge, Brave, Google Chrome found in the standard paths (on Linux Chromium, then Google Chrome). Google Chrome 137+ cannot load the extension |
@@ -236,6 +238,14 @@ do with them.
 
 - **Who can connect:** see above — loopback bind, `chrome-extension://` origin
   check, `CHROME_BRIDGE_TOKEN` on both handshakes.
+- **Launch mode also opens a DevTools port** on 127.0.0.1 (chosen by the
+  system), for `lighthouse` and `heap_snapshot`. CDP has no authentication:
+  any local process can drive that dedicated browser while it runs. Its profile
+  is temporary and holds nothing of yours; your own Chrome never gets a port.
+- **The debugger bar is the signal.** `click`/`press_key` with `trusted`,
+  `emulate_media via: "debugger"`, `perf_trace` and `screencast` attach
+  `chrome.debugger` to one tab only for that work; Chrome shows its "started
+  debugging this browser" bar meanwhile, and cancelling it ends the work.
 - **The real risk is prompt injection.** A page can ask the agent to run
   JavaScript, send a request with your cookies, submit a form or upload a file.
   Treat every page you automate as untrusted input, and review what the agent
@@ -295,16 +305,18 @@ count.
 | `read_console` returns `note=Instrumentation not loaded` | The page was opened before the extension, "Capture console & metrics" is off, or the page isn't injectable (`chrome://`). Reload it. |
 | Screenshot times out, or `image readback failed` | A minimized or fully covered window stops producing frames; captures fail after 10 s. Bring the window forward. |
 | `wait_for`/`scroll` return `page_hidden: true`, pages stop updating | Same cause: Chrome does not render a hidden page and slows its timers (after a few minutes, to one wake-up per minute). `get_page_info` reports `visibility`. Bring the window on screen, or `create_tab` with `new_window` and bounds. |
-| `screenshot presets` says `NOT APPLIED` | Presets resize the window; they do not emulate a phone (no device pixel ratio, UA or touch). The window manager enforces a minimum width, and no window exceeds the screen (e.g. at most a 1536×686 viewport on a 1536×864 ChromeOS screen). For phone emulation or larger viewports use a headless browser. |
+| `screenshot presets` says `NOT APPLIED` | Presets resize the window; they do not emulate a phone (no device pixel ratio, UA or touch). The window manager enforces a minimum width, and no window exceeds the screen (e.g. at most a 1536×686 viewport on a 1536×864 ChromeOS screen). For phone emulation use `emulate_media` with `device` (via debugger), or a headless browser for larger viewports. |
 | `type_text` returns `mismatch: true` | The field rejected the value. Events from an extension have `isTrusted: false`, and some widgets (date pickers, search boxes with tokenizers) discard them. Try `mode: 'keys'`, then the site's own controls (the calendar buttons), or `handoff`. |
 | `[media removed: request limit]` instead of a screenshot | Written by the MCP client, not by the bridge: too many images in one request. Use `save_to`, or `element_screenshot` with `region` and a small `scale`. |
 | Commands work, then stop | The MV3 service worker restarted and in-memory state (network log, diff baselines, HTTP auth) was reset. Re-run the monitoring call. |
 | Extension dropped on every ChromeOS reboot | Install from the Web Store instead of Load unpacked. |
 | Tool missing from the list | It's in an opt-in group. Check `get_status` → `caps_available`, then set `CHROME_BRIDGE_CAPS=all`. |
+| `claude mcp get` shows no command, arguments or environment | Expected with the plugin: since Claude Code 2.1.285 it hides them for stdio servers that plugins provide (variable names stay). `get_status` reports the server and extension versions, mode, host, port and caps; `/mcp` shows the connection. |
+| Popup says «In attesa: un altro browser è collegato», `get_status` lists `refused_browsers` | Two browsers with the extension reach the same port. The one already connected keeps the bridge; the other retries every 15 s and takes over when the first disconnects. `get_status` → `browser` names the connected one. Before this, the last one to connect took over silently. |
 
 ## Documentation
 
-- [docs/TOOLS.md](docs/TOOLS.md) — all 60 tools, by group
+- [docs/TOOLS.md](docs/TOOLS.md) — all 66 tools, by group
 - [docs/CAPABILITIES.md](docs/CAPABILITIES.md) — what the bridge gets past and what it does not, one dated state per wall
 - [docs/EFFICIENCY.md](docs/EFFICIENCY.md) — the benchmark and the design behind it
 - [docs/PERFORMANCE.md](docs/PERFORMANCE.md) — latency per tool on the real path, `npm run bench:latency`

package/extension/lib/emulation.js

@@ -0,0 +1,61 @@
+/**
+ * emulate_media via chrome.debugger: dalle opzioni del tool ai comandi CDP.
+ *
+ * Con il debugger l'emulazione è quella di DevTools: le regole
+ * @media (prefers-reduced-motion) dei fogli del sito valgono davvero, mentre
+ * il ripiego nella pagina cambia solo matchMedia e azzera tutte le durate.
+ * CPU, rete, viewport con DPR e touch esistono solo qui.
+ *
+ * Pura: restituisce coppie [metodo, parametri], così i test la provano senza
+ * browser. Il service worker le manda in ordine sulla scheda tenuta.
+ */
+
+// Profili di rete di DevTools (Chrome 154): latenza in ms, banda in byte/s,
+// già scalate come le applica DevTools.
+export const NETWORK_PROFILES = {
+  offline: { offline: true, latency: 0, downloadThroughput: 0, uploadThroughput: 0 },
+  '3g': { offline: false, latency: 2000, downloadThroughput: 45000, uploadThroughput: 45000 },
+  'slow-4g': { offline: false, latency: 562.5, downloadThroughput: 180000, uploadThroughput: 84375 },
+  'fast-4g': { offline: false, latency: 165, downloadThroughput: 1012500, uploadThroughput: 168750 },
+  none: { offline: false, latency: 0, downloadThroughput: -1, uploadThroughput: -1 },
+};
+
+/**
+ * @param {object} o - colorScheme, reducedMotion, contrast, printMode,
+ *   cpu_throttle, network, device {width,height,dpr,mobile}, touch
+ * @returns {{ commands: Array<[string, object]>, emulated: object }}
+ */
+export function emulationCommands(o = {}) {
+  const commands = [];
+  const emulated = {};
+  const features = [];
+  if (o.colorScheme) { features.push({ name: 'prefers-color-scheme', value: o.colorScheme }); emulated.colorScheme = o.colorScheme; }
+  if (o.reducedMotion) { features.push({ name: 'prefers-reduced-motion', value: o.reducedMotion }); emulated.reducedMotion = o.reducedMotion; }
+  if (o.contrast) { features.push({ name: 'prefers-contrast', value: o.contrast }); emulated.contrast = o.contrast; }
+  if (features.length || o.printMode) {
+    commands.push(['Emulation.setEmulatedMedia', { media: o.printMode ? 'print' : '', features }]);
+    if (o.printMode) emulated.printMode = true;
+  }
+  if (o.cpu_throttle != null) {
+    const rate = Math.max(1, Number(o.cpu_throttle));
+    commands.push(['Emulation.setCPUThrottlingRate', { rate }]);
+    emulated.cpu_throttle = rate;
+  }
+  if (o.network) {
+    const p = NETWORK_PROFILES[o.network];
+    if (!p) throw new Error(`Unknown network profile ${o.network}: use ${Object.keys(NETWORK_PROFILES).join(', ')}`);
+    commands.push(['Network.emulateNetworkConditions', p]);
+    emulated.network = o.network;
+  }
+  if (o.device) {
+    const { width, height, dpr = 1, mobile = false } = o.device;
+    if (!(width > 0 && height > 0)) throw new Error('device needs width and height in CSS px');
+    commands.push(['Emulation.setDeviceMetricsOverride', { width, height, deviceScaleFactor: dpr, mobile }]);
+    emulated.device = { width, height, dpr, mobile };
+  }
+  if (o.touch != null) {
+    commands.push(['Emulation.setTouchEmulationEnabled', { enabled: Boolean(o.touch), ...(o.touch && { maxTouchPoints: 5 }) }]);
+    emulated.touch = Boolean(o.touch);
+  }
+  return { commands, emulated };
+}

package/extension/lib/motion.js

@@ -0,0 +1,356 @@
+/**
+ * Misure di movimento nella pagina, per i tool `animations` e `frames`.
+ *
+ * Tutto da script di pagina: il dominio CDP `Animation` e
+ * `PerformanceTimeline` non sono ammessi a chrome.debugger da un'estensione
+ * (prova del 01/10/2026, Chromium 154), quindi si leggono
+ * document.getAnimations() e i PerformanceObserver come farebbe il sito.
+ *
+ * Tre operazioni su globalThis.__cbMotion:
+ * - snapshot(opts): le animazioni presenti adesso;
+ * - start(opts): apre una finestra di registrazione (animazioni viste a ogni
+ *   fotogramma, Long Animation Frames, layout shift, interazioni, ritmo rAF);
+ * - stop(): chiude la finestra e restituisce la sintesi.
+ * Lo stato della finestra vive nella pagina: una navigazione lo perde, e stop
+ * lo dice.
+ *
+ * Non è un modulo ES: chrome.scripting serializza solo la funzione iniettata,
+ * quindi il service worker inietta questo file (files:, world MAIN) e poi
+ * chiama __cbMotion. Nei test Node si importa per side effect, come
+ * element-label.js.
+ */
+(() => {
+  // Proprietà che il compositor di Chrome anima senza il thread principale.
+  // È una stima: will-change, layer e dimensioni possono cambiare l'esito.
+  const COMPOSITABLE = new Set(['transform', 'translate', 'rotate', 'scale', 'opacity', 'filter', 'backdrop-filter']);
+  // Una «dissolvenza»: con prefers-reduced-motion restano accettabili.
+  const FADE = new Set(['opacity', 'visibility']);
+  const KF_META = new Set(['offset', 'computedOffset', 'easing', 'composite']);
+  const EASING_MAX = 200;
+
+  const round = (n, d = 0) => (typeof n === 'number' && Number.isFinite(n) ? Math.round(n * 10 ** d) / 10 ** d : n);
+  const kebab = (p) => (p.startsWith('--') ? p : p.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`));
+  // linear() di una molla ha decine di punti: si taglia il testo e si dice
+  // quanti punti aveva, così due curve restano distinguibili.
+  const shortEasing = (e) => {
+    const s = String(e);
+    if (s.length <= EASING_MAX) return s;
+    const points = s.startsWith('linear(') ? s.slice(7, -1).split(',').length : null;
+    return `${s.slice(0, EASING_MAX)}…${points ? ` (${points} points)` : ''}`;
+  };
+  // Durate e tempi: numeri in ms, oppure CSSNumericValue (percentuali delle
+  // timeline di scroll) e 'auto', resi come testo.
+  const timeValue = (v) => {
+    if (v == null) return null;
+    if (typeof v === 'number') return Number.isFinite(v) ? round(v) : 'infinite';
+    return String(v);
+  };
+
+  const stableSelector = (el) => {
+    if (!el || el.nodeType !== 1) return null;
+    if (el.id && /^[A-Za-z][\w-]*$/.test(el.id)) return `#${el.id}`;
+    const testid = el.getAttribute && el.getAttribute('data-testid');
+    if (testid) return `[data-testid="${testid.replace(/"/g, '\\"')}"]`;
+    const parts = [];
+    let node = el;
+    const root = el.ownerDocument && el.ownerDocument.documentElement;
+    while (node && node.nodeType === 1 && node !== root) {
+      let part = node.tagName.toLowerCase();
+      if (node.id && /^[A-Za-z][\w-]*$/.test(node.id)) { parts.unshift(`#${node.id}`); break; }
+      const parent = node.parentElement;
+      if (parent) {
+        const sameTag = [...parent.children].filter((c) => c.tagName === node.tagName);
+        if (sameTag.length > 1) part += `:nth-of-type(${sameTag.indexOf(node) + 1})`;
+      }
+      parts.unshift(part);
+      node = node.parentElement;
+    }
+    return parts.join(' > ') || el.tagName.toLowerCase();
+  };
+
+  const timelineKind = (a) => {
+    const t = a.timeline;
+    if (t == null) return 'none';
+    if (typeof ViewTimeline !== 'undefined' && t instanceof ViewTimeline) return 'view';
+    if (typeof ScrollTimeline !== 'undefined' && t instanceof ScrollTimeline) return 'scroll';
+    if (typeof document !== 'undefined' && t === document.timeline) return 'document';
+    return 'other';
+  };
+
+  function describe(a) {
+    const effect = a.effect || null;
+    const target = effect && effect.target;
+    const pseudo = (effect && effect.pseudoElement) || null;
+    let keyframes = [];
+    try { keyframes = effect && effect.getKeyframes ? effect.getKeyframes() : []; } catch { /* effetto senza keyframe leggibili */ }
+    const props = new Set();
+    for (const k of keyframes) for (const p of Object.keys(k)) if (!KF_META.has(p)) props.add(kebab(p));
+    if (!props.size && a.transitionProperty) props.add(a.transitionProperty);
+    const properties = [...props];
+
+    const timing = effect && effect.getTiming ? effect.getTiming() : {};
+    const computed = effect && effect.getComputedTiming ? effect.getComputedTiming() : {};
+    // Animazioni CSS: la curva sta nei keyframe (animation-timing-function), e
+    // la timing dell'effetto è 'linear'. Transizioni e WAAPI: nella timing.
+    const kfEasings = [...new Set(keyframes.map((k) => k.easing).filter((e) => e && e !== 'linear'))];
+    let easing = timing.easing || 'linear';
+    if (easing === 'linear' && kfEasings.length) easing = kfEasings.length === 1 ? kfEasings[0] : kfEasings;
+    easing = Array.isArray(easing) ? easing.map(shortEasing) : shortEasing(easing);
+
+    const kind = a.constructor && a.constructor.name ? a.constructor.name : 'Animation';
+    const out = {
+      kind,
+      name: a.animationName || a.transitionProperty || a.id || null,
+      selector: stableSelector(target),
+      ...(pseudo && { pseudo }),
+      properties,
+      duration_ms: timeValue(timing.duration),
+      delay_ms: timeValue(timing.delay),
+      ...(timing.endDelay ? { end_delay_ms: timeValue(timing.endDelay) } : {}),
+      easing,
+      iterations: timing.iterations === Infinity ? 'infinite' : timing.iterations,
+      ...(timing.direction && timing.direction !== 'normal' ? { direction: timing.direction } : {}),
+      ...(timing.fill && timing.fill !== 'auto' && timing.fill !== 'none' ? { fill: timing.fill } : {}),
+      play_state: a.playState,
+      progress: computed.progress == null ? null : round(computed.progress, 2),
+      timeline: timelineKind(a),
+      view_transition: Boolean(pseudo && pseudo.startsWith('::view-transition')),
+      composited_estimate: properties.length > 0 && properties.every((p) => COMPOSITABLE.has(p)),
+      fade_only: properties.length > 0 && properties.every((p) => FADE.has(p)),
+    };
+    if (a.playbackRate != null && a.playbackRate !== 1) out.playback_rate = a.playbackRate;
+    return out;
+  }
+
+  const inScope = (a, scope) => {
+    if (!scope) return true;
+    const t = a.effect && a.effect.target;
+    try { return Boolean(t && t.closest && t.closest(scope)); } catch { return false; }
+  };
+
+  function summarize(list) {
+    const by = (key) => list.reduce((m, x) => { m[x[key]] = (m[x[key]] || 0) + 1; return m; }, {});
+    const props = {};
+    for (const x of list) for (const p of x.properties) props[p] = (props[p] || 0) + 1;
+    const durations = list.map((x) => x.duration_ms).filter((d) => typeof d === 'number');
+    const easings = [...new Set(list.flatMap((x) => (Array.isArray(x.easing) ? x.easing : [x.easing])))];
+    return {
+      count: list.length,
+      by_kind: by('kind'),
+      by_play_state: by('play_state'),
+      infinite: list.filter((x) => x.iterations === 'infinite').length,
+      max_duration_ms: durations.length ? Math.max(...durations) : null,
+      properties: props,
+      not_composited_estimate: list.filter((x) => !x.composited_estimate).length,
+      not_fade_only: list.filter((x) => !x.fade_only).length,
+      view_transitions: list.filter((x) => x.view_transition).length,
+      easings,
+    };
+  }
+
+  const reducedMotion = () => {
+    try { return matchMedia('(prefers-reduced-motion: reduce)').matches; } catch { return null; }
+  };
+
+  function snapshot({ scope = null, limit = 50 } = {}) {
+    const list = document.getAnimations().filter((a) => inScope(a, scope)).map(describe);
+    return {
+      prefers_reduced_motion: reducedMotion(),
+      summary: summarize(list),
+      animations: list.slice(0, limit),
+      ...(list.length > limit ? { truncated: list.length - limit } : {}),
+    };
+  }
+
+  // --- finestra di registrazione ---
+
+  const supported = () => (typeof PerformanceObserver !== 'undefined' && PerformanceObserver.supportedEntryTypes) || [];
+
+  function start({ scope = null } = {}) {
+    if (globalThis.__cbMotionRec) stopObservers(globalThis.__cbMotionRec);
+    const t0 = performance.now();
+    const rec = {
+      t0, scope, observers: [], seen: new Map(), loaf: [], shifts: [], events: [],
+      frames: [], raf: 0, active: true, hiddenDuring: false,
+    };
+    globalThis.__cbMotionRec = rec;
+    const types = supported();
+    const observe = (type, opts, onEntry) => {
+      if (!types.includes(type)) return false;
+      const po = new PerformanceObserver((l) => { for (const e of l.getEntries()) onEntry(e); });
+      try { po.observe({ type, ...opts }); } catch { return false; }
+      rec.observers.push({ po, onEntry });
+      return true;
+    };
+    rec.support = {
+      long_animation_frame: observe('long-animation-frame', {}, (e) => { if (e.startTime >= t0) rec.loaf.push(e); }),
+      layout_shift: observe('layout-shift', {}, (e) => { if (e.startTime >= t0) rec.shifts.push(e); }),
+      event_timing: observe('event', { durationThreshold: 16 }, (e) => { if (e.startTime >= t0) rec.events.push(e); }),
+    };
+    const sample = () => {
+      if (!rec.active) return;
+      const now = performance.now();
+      rec.frames.push(now);
+      for (const a of document.getAnimations()) {
+        if (!rec.seen.has(a) && inScope(a, scope)) rec.seen.set(a, round(now - t0));
+      }
+      rec.raf = requestAnimationFrame(sample);
+    };
+    rec.onVisibility = () => { if (document.visibilityState === 'hidden') rec.hiddenDuring = true; };
+    document.addEventListener('visibilitychange', rec.onVisibility);
+    // Una transizione di 150 ms può nascere e finire fra due campioni rAF solo
+    // se la pagina perde fotogrammi: transitionrun e animationstart la
+    // segnalano comunque, e il campione successivo la trova nel documento.
+    rec.onStartEvent = () => {
+      for (const a of document.getAnimations()) {
+        if (!rec.seen.has(a) && inScope(a, scope)) rec.seen.set(a, round(performance.now() - t0));
+      }
+    };
+    document.addEventListener('transitionrun', rec.onStartEvent, true);
+    document.addEventListener('animationstart', rec.onStartEvent, true);
+    sample();
+    return { recording: true, support: rec.support };
+  }
+
+  function stopObservers(rec) {
+    rec.active = false;
+    cancelAnimationFrame(rec.raf);
+    // takeRecords: le voci già prodotte ma non ancora consegnate al callback
+    // (l'ultimo fotogramma della finestra) non vanno perse.
+    for (const { po, onEntry } of rec.observers) {
+      try { for (const e of po.takeRecords()) onEntry(e); po.disconnect(); } catch { /* già scollegato */ }
+    }
+    document.removeEventListener('visibilitychange', rec.onVisibility);
+    document.removeEventListener('transitionrun', rec.onStartEvent, true);
+    document.removeEventListener('animationstart', rec.onStartEvent, true);
+  }
+
+  // Ritmo dei fotogrammi del thread principale. L'intervallo tipico (mediana)
+  // stima la frequenza dello schermo; un intervallo oltre 1,5 volte la mediana
+  // è almeno un fotogramma perso. Le animazioni composte possono restare
+  // fluide anche quando il thread principale salta.
+  function frameStats(times) {
+    if (times.length < 3) return { count: times.length, note: 'Too few frames: was the page hidden or the window too short?' };
+    const gaps = [];
+    for (let i = 1; i < times.length; i++) gaps.push(times[i] - times[i - 1]);
+    const sorted = [...gaps].sort((x, y) => x - y);
+    const median = sorted[Math.floor(sorted.length / 2)];
+    const span = times[times.length - 1] - times[0];
+    const dropped = gaps.reduce((n, g) => n + (g > median * 1.5 ? Math.round(g / median) - 1 : 0), 0);
+    return {
+      count: times.length,
+      fps: round((gaps.length * 1000) / span, 1),
+      refresh_estimate_hz: round(1000 / median),
+      max_gap_ms: round(sorted[sorted.length - 1]),
+      dropped_estimate: dropped,
+    };
+  }
+
+  function loafEntry(e) {
+    const scripts = (e.scripts || [])
+      .map((s) => ({
+        invoker: s.invoker || null,
+        type: s.invokerType || null,
+        source: s.sourceURL ? `${s.sourceURL}${s.sourceFunctionName ? ` ${s.sourceFunctionName}` : ''}${s.sourceCharPosition >= 0 ? `:${s.sourceCharPosition}` : ''}` : (s.sourceFunctionName || null),
+        duration_ms: round(s.duration),
+        ...(s.forcedStyleAndLayoutDuration ? { forced_layout_ms: round(s.forcedStyleAndLayoutDuration) } : {}),
+      }))
+      .sort((x, y) => y.duration_ms - x.duration_ms)
+      .slice(0, 3);
+    const start = e.startTime;
+    return {
+      duration_ms: round(e.duration),
+      blocking_ms: round(e.blockingDuration),
+      // Fasi del fotogramma: script prima del rendering, poi stile e layout.
+      ...(e.renderStart ? { render_start_ms: round(e.renderStart - start) } : {}),
+      ...(e.styleAndLayoutStart ? { style_layout_start_ms: round(e.styleAndLayoutStart - start) } : {}),
+      scripts,
+    };
+  }
+
+  function shiftsSummary(entries) {
+    const counted = entries.filter((e) => !e.hadRecentInput);
+    const cls = counted.reduce((s, e) => s + e.value, 0);
+    const top = [...counted].sort((x, y) => y.value - x.value).slice(0, 5).map((e) => ({
+      value: round(e.value, 4),
+      sources: (e.sources || []).slice(0, 3).map((s) => ({
+        selector: stableSelector(s.node),
+        ...(s.previousRect && s.currentRect ? { moved_px: { x: round(s.currentRect.x - s.previousRect.x), y: round(s.currentRect.y - s.previousRect.y) } } : {}),
+      })),
+    }));
+    return {
+      cls: round(cls, 4),
+      count: counted.length,
+      ...(entries.length > counted.length ? { after_input_excluded: entries.length - counted.length } : {}),
+      top,
+    };
+  }
+
+  // INP sulla finestra: la più lunga fra le interazioni (interactionId > 0).
+  // Con meno di 50 interazioni è anche il valore che web-vitals riporterebbe.
+  // Le durate degli Event Timing sono arrotondate a 8 ms dal browser. Le fasi
+  // si calcolano sull'insieme delle voci dell'interazione (pointerdown,
+  // pointerup, click…), come web-vitals/attribution: la voce più lunga da
+  // sola è spesso un pointerup senza handler e senza target.
+  function interactionsSummary(entries) {
+    const byId = new Map();
+    for (const e of entries) {
+      if (!e.interactionId) continue;
+      if (!byId.has(e.interactionId)) byId.set(e.interactionId, []);
+      byId.get(e.interactionId).push(e);
+    }
+    const list = [...byId.values()].map((group) => ({ group, duration: Math.max(...group.map((e) => e.duration)) }))
+      .sort((x, y) => y.duration - x.duration);
+    if (!list.length) return { count: 0, inp_ms: null, note: 'No interaction in the window. Synthetic events have no interactionId: use action.trusted for INP.' };
+    const { group, duration } = list[0];
+    const start = Math.min(...group.map((e) => e.startTime));
+    const procStart = Math.min(...group.map((e) => e.processingStart));
+    const procEnd = Math.max(...group.map((e) => e.processingEnd));
+    const main = [...group].sort((x, y) => (y.processingEnd - y.processingStart) - (x.processingEnd - x.processingStart))
+      .find((e) => e.target) || group[0];
+    return {
+      count: list.length,
+      inp_ms: round(duration),
+      worst: {
+        event: main.name,
+        events: [...new Set(group.map((e) => e.name))],
+        selector: stableSelector(main.target),
+        input_delay_ms: round(procStart - start),
+        processing_ms: round(procEnd - procStart),
+        presentation_delay_ms: round(Math.max(0, start + duration - procEnd)),
+      },
+    };
+  }
+
+  function stop({ threshold_ms = 50, limit = 10 } = {}) {
+    const rec = globalThis.__cbMotionRec;
+    if (!rec) return { error: 'No recording in this page: it was never started, or the page navigated and lost it.' };
+    stopObservers(rec);
+    delete globalThis.__cbMotionRec;
+    const t0 = rec.t0;
+    const animations = [...rec.seen.entries()].map(([a, at]) => ({ first_seen_ms: at, ...describe(a) }));
+    const long = rec.loaf.filter((e) => e.duration >= threshold_ms).sort((x, y) => y.duration - x.duration);
+    return {
+      window_ms: round(performance.now() - t0),
+      prefers_reduced_motion: reducedMotion(),
+      ...(rec.hiddenDuring ? { page_hidden_during: true } : {}),
+      support: rec.support,
+      frames: frameStats(rec.frames),
+      long_frames: {
+        threshold_ms,
+        count: long.length,
+        total_blocking_ms: round(long.reduce((s, e) => s + (e.blockingDuration || 0), 0)),
+        worst: long.slice(0, limit).map((e) => ({ ...loafEntry(e), at_ms: round(e.startTime - t0) })),
+      },
+      layout_shifts: shiftsSummary(rec.shifts),
+      interactions: interactionsSummary(rec.events),
+      animations: {
+        summary: summarize(animations),
+        list: animations.slice(0, limit * 3),
+        ...(animations.length > limit * 3 ? { truncated: animations.length - limit * 3 } : {}),
+      },
+    };
+  }
+
+  globalThis.__cbMotion = { snapshot, start, stop, _internals: { describe, summarize, frameStats, shiftsSummary, interactionsSummary, loafEntry, shortEasing } };
+})();

package/extension/lib/trusted-input.js

@@ -5,7 +5,10 @@
  * scorciatoie di tastiera gestite dal browser.
  *
  * Il debugger si aggancia solo per la durata dell'azione e si stacca subito:
- * la barra «sta eseguendo il debug» compare solo in quel momento.
+ * la barra «sta eseguendo il debug» compare solo in quel momento. Eccezione:
+ * una scheda «tenuta» (holdDebugger, per l'emulazione di emulate_media, che
+ * vive solo finché il debugger è agganciato) resta agganciata fino al
+ * rilascio, e withDebugger usa quell'aggancio senza staccarlo.
  */
 
 // Tasti con nome: code e keyCode di Windows che Input.dispatchKeyEvent vuole
@@ -73,20 +76,76 @@ export function mouseClickEvents(x, y, { button = 'left', count = 1 } = {}) {
   return events;
 }
 
+// Schede tenute agganciate: tabId → insieme dei motivi ('emulation', …).
+// Chrome stacca il debugger da solo quando l'utente preme «Annulla» sulla
+// barra o la scheda si chiude: onDetach toglie la voce, e chi la teneva lo
+// scopre con debuggerHeld.
+const held = new Map();
+let detachListener = false;
+
+function listenDetach() {
+  if (detachListener || !globalThis.chrome?.debugger?.onDetach) return;
+  detachListener = true;
+  chrome.debugger.onDetach.addListener((source, reason) => {
+    if (source.tabId == null || !held.has(source.tabId)) return;
+    held.delete(source.tabId);
+    lastDetach.set(source.tabId, reason);
+  });
+}
+const lastDetach = new Map();
+
+async function attach(tabId, purpose) {
+  try {
+    await chrome.debugger.attach({ tabId }, '1.3');
+  } catch (e) {
+    const msg = String(e?.message ?? e);
+    if (/already attached/i.test(msg)) throw new Error(`${purpose} unavailable: another debugger (DevTools?) is attached to this tab — close it, or retry without it`);
+    throw new Error(`${purpose} unavailable: ${msg}`);
+  }
+}
+
+/** Tiene il debugger agganciato alla scheda per un motivo, finché releaseDebugger. */
+export async function holdDebugger(tabId, why, purpose = why) {
+  listenDetach();
+  let reasons = held.get(tabId);
+  if (!reasons) {
+    await attach(tabId, purpose);
+    reasons = new Set();
+    held.set(tabId, reasons);
+    lastDetach.delete(tabId);
+  }
+  reasons.add(why);
+  return (method, params) => chrome.debugger.sendCommand({ tabId }, method, params);
+}
+
+/** Toglie un motivo; senza più motivi il debugger si stacca e la barra sparisce. */
+export async function releaseDebugger(tabId, why) {
+  const reasons = held.get(tabId);
+  if (!reasons) return false;
+  reasons.delete(why);
+  if (reasons.size) return true;
+  held.delete(tabId);
+  await chrome.debugger.detach({ tabId }).catch(() => {});
+  return true;
+}
+
+/** Stato della tenuta: held, i motivi, o il motivo dello stacco (canceled_by_user, target_closed). */
+export function debuggerHeld(tabId) {
+  const reasons = held.get(tabId);
+  if (reasons) return { held: true, reasons: [...reasons] };
+  return { held: false, ...(lastDetach.has(tabId) && { detached: lastDetach.get(tabId) }) };
+}
+
 /**
  * Aggancia il debugger alla scheda, esegue fn(send) e si stacca sempre, anche
  * su errore. Un DevTools già aperto sulla scheda impedisce l'aggancio: lo dice.
+ * Su una scheda tenuta usa l'aggancio esistente e non lo stacca.
  */
 export async function withDebugger(tabId, fn) {
   const target = { tabId };
-  try {
-    await chrome.debugger.attach(target, '1.3');
-  } catch (e) {
-    const msg = String(e?.message ?? e);
-    if (/already attached/i.test(msg)) throw new Error('trusted input unavailable: another debugger (DevTools?) is attached to this tab — close it, or retry without trusted');
-    throw new Error(`trusted input unavailable: ${msg}`);
-  }
   const send = (method, params) => chrome.debugger.sendCommand(target, method, params);
+  if (held.has(tabId)) return fn(send);
+  await attach(tabId, 'trusted input');
   try {
     return await fn(send);
   } finally {

package/extension/manifest.json

@@ -1,8 +1,8 @@
 {
   "manifest_version": 3,
   "name": "Chrome Bridge for Claude Code",
-  "version": "1.26.0",
-  "description": "Bridge your browser to Claude Code: 60 token-efficient web-dev automation tools over a local WebSocket. ChromeOS included.",
+  "version": "1.28.0",
+  "description": "Bridge your browser to Claude Code: 66 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": [

package/extension/popup.css

@@ -58,6 +58,7 @@ body {
 .dot.connected { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
 .dot.connecting { background: #f39c12; }
 .dot.disconnected { background: var(--err); }
+.dot.refused { background: #f39c12; }
 #status-text { font-weight: 600; }
 .status-row .ws-url {
   margin-left: auto;

package/extension/popup.js

@@ -4,6 +4,7 @@ const stateLabels = {
   connected: 'Connesso',
   connecting: 'Connessione…',
   disconnected: 'Disconnesso',
+  refused: 'In attesa: un altro browser è collegato',
 };
 
 function renderState(state) {