@jobshimo/browser-link 0.11.0 → 0.13.0

package/dist/extension/background.js

@@ -19,9 +19,15 @@ function isRuntimeMessage(msg) {
     if (typeof msg !== 'object' || msg === null)
         return false;
     const m = msg;
+    if (m.action === 'versionCheck')
+        return true;
     if (typeof m.tabId !== 'number')
         return false;
-    return m.action === 'connect' || m.action === 'disconnect' || m.action === 'status';
+    return (m.action === 'connect' ||
+        m.action === 'disconnect' ||
+        m.action === 'status' ||
+        m.action === 'pendingDialog' ||
+        m.action === 'respondDialog');
 }
 const tabStates = new Map();
 function send(ws, msg) {
@@ -38,6 +44,43 @@ function safeParse(raw) {
 function cdp(tabId, method, params = {}) {
     return chrome.debugger.sendCommand({ tabId }, method, params);
 }
+/**
+ * Mapping from the CDP permission name (the contract `browser.set_permission`
+ * accepts on the wire) to the `chrome.contentSettings` setting key. Only the
+ * names that actually have a contentSettings surface in MV3 are listed —
+ * `Browser.setPermission` covers more, but that domain is not reachable from
+ * `chrome.debugger` attached to a tab.
+ */
+const CONTENT_SETTING_BY_PERMISSION = {
+    geolocation: 'location',
+    notifications: 'notifications',
+    camera: 'camera',
+    microphone: 'microphone',
+    clipboardReadWrite: 'clipboard',
+    clipboardSanitizedWrite: 'clipboard',
+    sensors: 'sensors',
+};
+const STATE_TO_CONTENT_SETTING = {
+    granted: 'allow',
+    denied: 'block',
+    prompt: 'ask',
+};
+/**
+ * Apply a `chrome.contentSettings.<setting>.set({ primaryPattern, setting })`
+ * call without statically referencing each key — the `contentSettings`
+ * surface is dynamic at the API level. We narrow `unknown` carefully so the
+ * cast is the smallest possible.
+ */
+async function applyContentSetting(settingKey, primaryPattern, setting) {
+    const root = chrome.contentSettings;
+    if (!root)
+        throw new Error('chrome.contentSettings not available in this build');
+    const setter = root[settingKey];
+    if (!setter || typeof setter.set !== 'function') {
+        throw new Error(`chrome.contentSettings.${settingKey} is not exposed in this Chrome build`);
+    }
+    await setter.set({ primaryPattern, setting });
+}
 /**
  * Defensive caps applied to every duration that ends up in a setTimeout
  * driven by tool params. The MCP request payload is technically untrusted
@@ -283,11 +326,67 @@ function attachDebuggerListener(state) {
             entry.failed = p.errorText ?? 'failed';
             return;
         }
+        if (method === 'Page.javascriptDialogOpening') {
+            // The page JS thread is now frozen until something calls
+            // Page.handleJavaScriptDialog. We do NOT respond automatically —
+            // the agent reads dialog-opening from browser.events and decides
+            // via browser.dialog_respond. The popup also exposes accept/dismiss
+            // buttons as a manual escape hatch.
+            const p = params;
+            const info = {
+                type: p.type ?? 'alert',
+                message: p.message ?? '',
+            };
+            if (typeof p.defaultPrompt === 'string')
+                info.default_prompt = p.defaultPrompt;
+            if (typeof p.url === 'string')
+                info.url = p.url;
+            state.pendingDialog = info;
+            if (state.ws && state.ws.readyState === WebSocket.OPEN && state.serverTabId) {
+                const data = {
+                    type: info.type,
+                    message: info.message,
+                };
+                if (info.default_prompt !== undefined)
+                    data.default_prompt = info.default_prompt;
+                if (info.url !== undefined)
+                    data.url = info.url;
+                send(state.ws, {
+                    kind: 'bridge.event',
+                    eventKind: 'dialog-opening',
+                    tabId: state.serverTabId,
+                    data,
+                });
+            }
+            return;
+        }
+        if (method === 'Page.javascriptDialogClosed') {
+            const p = params;
+            state.pendingDialog = undefined;
+            if (state.ws && state.ws.readyState === WebSocket.OPEN && state.serverTabId) {
+                const data = { accept: p.result === true };
+                if (typeof p.userInput === 'string')
+                    data.user_input = p.userInput;
+                send(state.ws, {
+                    kind: 'bridge.event',
+                    eventKind: 'dialog-closed',
+                    tabId: state.serverTabId,
+                    data,
+                });
+            }
+            return;
+        }
     };
     state.debuggerListener = listener;
 }
-const SNAPSHOT_JS = `
-(() => {
+/**
+ * Shared in-page DOM helpers, injected verbatim into any JS template that
+ * needs them (`buildSnapshotJs`, `buildFindJs`). Defining them once here
+ * keeps the heuristics (visibility, selector generation, accessible text)
+ * identical across tools so a selector returned by `snapshot` and a selector
+ * returned by `find` follow the same rules.
+ */
+const DOM_HELPERS_JS = `
   function isVisible(el) {
     if (!(el instanceof HTMLElement)) return true;
     const style = getComputedStyle(el);
@@ -330,39 +429,168 @@ const SNAPSHOT_JS = `
     }
     return parts.join(' > ');
   }
+  function accessibleText(el) {
+    const aria = el.getAttribute && el.getAttribute('aria-label');
+    if (aria) return aria;
+    const txt = (el.innerText || el.textContent || '').trim();
+    if (txt) return txt;
+    if ('value' in el && el.value) return String(el.value);
+    const ph = el.getAttribute && el.getAttribute('placeholder');
+    if (ph) return ph;
+    const title = el.getAttribute && el.getAttribute('title');
+    if (title) return title;
+    return '';
+  }
+`;
+function buildSnapshotJs(opts = {}) {
+    const optsJson = JSON.stringify({
+        withinSelector: typeof opts.within_selector === 'string' ? opts.within_selector : null,
+        onlyInteractive: opts.only_interactive === true,
+        exclude: Array.isArray(opts.exclude) ? opts.exclude : [],
+        maxInteractive: typeof opts.max_interactive === 'number' && opts.max_interactive > 0
+            ? Math.min(opts.max_interactive, 500)
+            : 120,
+    });
+    return `
+(() => {
+  ${DOM_HELPERS_JS}
+  const opts = ${optsJson};
+  let root = document;
+  let notice = '';
+  if (opts.withinSelector) {
+    const sub = document.querySelector(opts.withinSelector);
+    if (!sub) {
+      return {
+        title: document.title,
+        url: location.href,
+        interactive: [],
+        notice: 'within_selector did not match any element',
+      };
+    }
+    root = sub;
+  }
+  const excludeSet = new Set((opts.exclude || []).map(s => String(s).toLowerCase()));
+  function inExcludedLandmark(el) {
+    if (excludeSet.size === 0) return false;
+    let cur = el.parentElement;
+    while (cur && cur !== document.body) {
+      const tag = cur.tagName ? cur.tagName.toLowerCase() : '';
+      if (excludeSet.has(tag)) return true;
+      if (cur === root) return false;
+      cur = cur.parentElement;
+    }
+    return false;
+  }
   const sel = 'a[href], button, input, select, textarea, [role=button], [role=link], [role=checkbox], [role=tab], [role=menuitem], [contenteditable=true]';
   const interactive = [];
-  document.querySelectorAll(sel).forEach((el) => {
+  const scope = (root.querySelectorAll ? root : document);
+  scope.querySelectorAll(sel).forEach((el) => {
     if (!isVisible(el)) return;
-    interactive.push({
-      tag: el.tagName.toLowerCase(),
-      role: el.getAttribute('role') || el.tagName.toLowerCase(),
-      text: shortText(el),
-      value: 'value' in el ? (el.value || '') : '',
-      placeholder: el.getAttribute('placeholder') || '',
-      aria_label: el.getAttribute('aria-label') || '',
-      name: el.getAttribute('name') || '',
-      type: el.getAttribute('type') || '',
-      href: el.getAttribute('href') || '',
-      disabled: 'disabled' in el ? !!el.disabled : false,
-      selector: genSelector(el),
-    });
-  });
-  const headings = [];
-  document.querySelectorAll('h1, h2, h3').forEach((h) => {
-    if (!isVisible(h)) return;
-    headings.push({ level: h.tagName, text: shortText(h) });
+    if (inExcludedLandmark(el)) return;
+    const tag = el.tagName.toLowerCase();
+    const role = el.getAttribute('role') || tag;
+    const entry = { tag, role, selector: genSelector(el) };
+    const txt = shortText(el);
+    if (txt) entry.text = txt;
+    if ('value' in el && el.value) entry.value = String(el.value);
+    const placeholder = el.getAttribute('placeholder');
+    if (placeholder) entry.placeholder = placeholder;
+    const aria_label = el.getAttribute('aria-label');
+    if (aria_label) entry.aria_label = aria_label;
+    const name = el.getAttribute('name');
+    if (name) entry.name = name;
+    const type = el.getAttribute('type');
+    if (type) entry.type = type;
+    const href = el.getAttribute('href');
+    if (href) entry.href = href;
+    if ('disabled' in el && el.disabled) entry.disabled = true;
+    interactive.push(entry);
   });
-  const visibleText = (document.body && document.body.innerText) ? document.body.innerText.slice(0, 4000) : '';
-  return {
+  const result = {
     title: document.title,
     url: location.href,
-    headings: headings.slice(0, 30),
-    text: visibleText,
-    interactive: interactive.slice(0, 120),
+    interactive: interactive.slice(0, opts.maxInteractive),
   };
+  if (!opts.onlyInteractive) {
+    const headings = [];
+    scope.querySelectorAll('h1, h2, h3').forEach((h) => {
+      if (!isVisible(h)) return;
+      if (inExcludedLandmark(h)) return;
+      const t = shortText(h);
+      if (t) headings.push({ level: h.tagName, text: t });
+    });
+    result.headings = headings.slice(0, 30);
+    const textRoot = (root === document) ? (document.body || document) : root;
+    const visibleText = (textRoot && textRoot.innerText) ? textRoot.innerText.slice(0, 4000) : '';
+    if (visibleText) result.text = visibleText;
+  }
+  if (notice) result.notice = notice;
+  return result;
 })()
 `;
+}
+function buildFindJs(opts) {
+    const optsJson = JSON.stringify({
+        text: opts.text,
+        role: typeof opts.role === 'string' && opts.role.length > 0 ? opts.role : null,
+        exact: opts.exact === true,
+        candidateLimit: 5,
+    });
+    return `
+(() => {
+  ${DOM_HELPERS_JS}
+  const opts = ${optsJson};
+  const needle = opts.text.toLowerCase();
+  const ROLE_SELECTORS = {
+    button: 'button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"]',
+    link: 'a[href], [role="link"]',
+    textbox: 'input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input[type="tel"], input:not([type]), textarea, [role="textbox"], [contenteditable="true"]',
+    checkbox: 'input[type="checkbox"], [role="checkbox"]',
+    tab: '[role="tab"]',
+    menuitem: '[role="menuitem"]',
+  };
+  const selectorSet = opts.role && ROLE_SELECTORS[opts.role]
+    ? ROLE_SELECTORS[opts.role]
+    : 'button, a, input, textarea, select, [role], [onclick], [contenteditable="true"], [tabindex]';
+  const all = Array.from(document.querySelectorAll(selectorSet));
+  const matches = [];
+  for (const el of all) {
+    if (!isVisible(el)) continue;
+    const text = accessibleText(el).trim();
+    if (text.length === 0) continue;
+    const lower = text.toLowerCase();
+    const ok = opts.exact ? lower === needle : lower.includes(needle);
+    if (ok) matches.push(el);
+  }
+  if (matches.length === 0) {
+    return { matched: false, reason: 'not-found' };
+  }
+  if (matches.length > 1) {
+    return {
+      matched: false,
+      reason: 'multiple-matches',
+      candidates: matches.slice(0, opts.candidateLimit).map((el) => ({
+        selector: genSelector(el),
+        text: shortText(el),
+        tag: el.tagName.toLowerCase(),
+      })),
+    };
+  }
+  const el = matches[0];
+  const rect = el.getBoundingClientRect();
+  return {
+    matched: true,
+    selector: genSelector(el),
+    coords: {
+      x: Math.round(rect.left + rect.width / 2),
+      y: Math.round(rect.top + rect.height / 2),
+    },
+    tag: el.tagName.toLowerCase(),
+    text: shortText(el),
+  };
+})()
+`;
+}
 async function evaluateInTab(tabId, expression) {
     const result = await cdp(tabId, 'Runtime.evaluate', {
         expression,
@@ -426,7 +654,31 @@ async function handleTool(state, msg) {
                 };
             }
             case 'snapshot': {
-                const value = await evaluateInTab(tabId, SNAPSHOT_JS);
+                const value = await evaluateInTab(tabId, buildSnapshotJs({
+                    within_selector: optStr('within_selector'),
+                    only_interactive: p.only_interactive === true,
+                    exclude: Array.isArray(p.exclude)
+                        ? p.exclude.filter((x) => typeof x === 'string')
+                        : undefined,
+                    max_interactive: typeof p.max_interactive === 'number' ? p.max_interactive : undefined,
+                }));
+                return { kind: 'tool.response', id: msg.id, ok: true, result: value };
+            }
+            case 'find': {
+                const text = str('text');
+                if (!text) {
+                    return {
+                        kind: 'tool.response',
+                        id: msg.id,
+                        ok: false,
+                        error: 'find: text required',
+                    };
+                }
+                const value = await evaluateInTab(tabId, buildFindJs({
+                    text,
+                    role: optStr('role'),
+                    exact: p.exact === true,
+                }));
                 return { kind: 'tool.response', id: msg.id, ok: true, result: value };
             }
             case 'console': {
@@ -901,6 +1153,73 @@ async function handleTool(state, msg) {
                         : { matched: false, elapsed_ms: elapsedMs, checks, reason: 'timeout' },
                 };
             }
+            case 'dialog_respond': {
+                const accept = p.accept === true;
+                const promptText = optStr('prompt_text');
+                // No probing — if there is no dialog open, CDP returns an error.
+                // We propagate it; the caller decides if "no dialog to respond to"
+                // is a problem or a race they can ignore.
+                const params = { accept };
+                if (promptText !== undefined)
+                    params.promptText = promptText;
+                await cdp(tabId, 'Page.handleJavaScriptDialog', params);
+                return {
+                    kind: 'tool.response',
+                    id: msg.id,
+                    ok: true,
+                    result: { accepted: accept },
+                };
+            }
+            case 'set_permission': {
+                const origin = str('origin');
+                const name = str('name');
+                const state_ = str('state');
+                // CDP `Browser.setPermission` requires a browser-level target,
+                // which `chrome.debugger.attach({ tabId })` does NOT give us in
+                // MV3. We use `chrome.contentSettings` instead — that surface IS
+                // available to extensions and covers the realistic permissions
+                // an agent needs to pre-set (geolocation, notifications, camera,
+                // microphone, clipboard, sensors).
+                const settingKey = CONTENT_SETTING_BY_PERMISSION[name];
+                if (!settingKey) {
+                    return {
+                        kind: 'tool.response',
+                        id: msg.id,
+                        ok: false,
+                        error: `set_permission: '${name}' is not supported by chrome.contentSettings in MV3. Supported names: ${Object.keys(CONTENT_SETTING_BY_PERMISSION).join(', ')}.`,
+                    };
+                }
+                const setting = STATE_TO_CONTENT_SETTING[state_];
+                if (!setting) {
+                    return {
+                        kind: 'tool.response',
+                        id: msg.id,
+                        ok: false,
+                        error: `set_permission: unknown state '${state_}' (expected granted | denied | prompt).`,
+                    };
+                }
+                // `chrome.contentSettings.<name>.set({ primaryPattern, setting })`
+                // requires a URL pattern, not a bare origin. Append `/*` so the
+                // pattern covers every path on the origin.
+                const primaryPattern = origin.endsWith('/*') ? origin : `${origin}/*`;
+                try {
+                    await applyContentSetting(settingKey, primaryPattern, setting);
+                }
+                catch (err) {
+                    return {
+                        kind: 'tool.response',
+                        id: msg.id,
+                        ok: false,
+                        error: `set_permission: ${err instanceof Error ? err.message : String(err)}`,
+                    };
+                }
+                return {
+                    kind: 'tool.response',
+                    id: msg.id,
+                    ok: true,
+                    result: { origin, name, state: state_, applied_as: settingKey },
+                };
+            }
             default:
                 return { kind: 'tool.response', id: msg.id, ok: false, error: `Unknown tool: ${msg.tool}` };
         }
@@ -1050,6 +1369,11 @@ async function connectTab(tabId) {
                     return;
                 if (msg.kind === 'tab.registered') {
                     state.serverTabId = msg.payload.tabId;
+                    // serverVersion is optional on the wire so older servers that
+                    // predate the field still parse — narrow on `typeof string`.
+                    if (typeof msg.payload.serverVersion === 'string') {
+                        state.serverVersion = msg.payload.serverVersion;
+                    }
                     // Remember this id so the next reconnect (after a primary swap)
                     // asks the new primary to honour it. The primary emits
                     // `tab-renamed` in the bridge event log if it can't.
@@ -1094,6 +1418,40 @@ function getTabStatus(tabId) {
         return { connected: false };
     return { connected: true, serverTabId: state.serverTabId };
 }
+/**
+ * Compute the version-mismatch summary for the popup. Picks the
+ * `serverVersion` reported by ANY currently-connected tab — they all come
+ * from the same primary, so the first one is enough. When no tab has
+ * registered yet (e.g. user just installed and hasn't pressed Connect),
+ * `server` stays null and the popup hides the banner.
+ */
+function getVersionCheck() {
+    const extension = chrome.runtime.getManifest().version;
+    let server = null;
+    for (const s of tabStates.values()) {
+        if (typeof s.serverVersion === 'string' && s.serverVersion.length > 0) {
+            server = s.serverVersion;
+            break;
+        }
+    }
+    return {
+        extension,
+        server,
+        aligned: server === null ? null : server === extension,
+    };
+}
+async function respondToDialogFromPopup(tabId, accept, promptText) {
+    try {
+        const params = { accept };
+        if (promptText !== undefined)
+            params.promptText = promptText;
+        await cdp(tabId, 'Page.handleJavaScriptDialog', params);
+        return { ok: true };
+    }
+    catch (err) {
+        return { ok: false, error: err instanceof Error ? err.message : String(err) };
+    }
+}
 chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
     if (!isRuntimeMessage(msg))
         return false;
@@ -1105,6 +1463,19 @@ chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
         void disconnectTab(msg.tabId).then(sendResponse);
         return true;
     }
+    if (msg.action === 'pendingDialog') {
+        const state = tabStates.get(msg.tabId);
+        sendResponse({ pending: state?.pendingDialog ?? null });
+        return false;
+    }
+    if (msg.action === 'respondDialog') {
+        void respondToDialogFromPopup(msg.tabId, msg.accept, msg.promptText).then(sendResponse);
+        return true;
+    }
+    if (msg.action === 'versionCheck') {
+        sendResponse(getVersionCheck());
+        return false;
+    }
     // 'status'
     sendResponse(getTabStatus(msg.tabId));
     return false;
@@ -1116,6 +1487,87 @@ chrome.tabs.onRemoved.addListener((tabId) => {
     // The Chrome tab is gone — drop any cached browser-link id for it.
     void forgetTabId(tabId);
 });
+/* Auto-connect tabs spawned by a connected tab.
+ *
+ * When a tab the user has connected via the popup opens a new tab
+ * (window.open, target="_blank", a click handler doing window.open, etc.),
+ * Chrome reports it via tabs.onCreated with `openerTabId` pointing at the
+ * source. We use that link to:
+ *   1. Wait for the new tab to settle on a real URL (the first onCreated
+ *      callback often reports `about:blank` even when a destination is set).
+ *   2. Auto-connect the new tab through the same flow as the popup
+ *      "Connect" button — attach debugger, register with the server.
+ *   3. Emit a `tab-created` bridge.event tagged with `opened_from = the
+ *      opener's server tab id`. The MCP `browser.wait_for_tab` tool reads
+ *      that event and auto-claims the new tab for the waiting agent.
+ *
+ * If the opener is not connected (regular browsing), we do nothing —
+ * background tabs the user opens for themselves stay out of the bridge.
+ */
+chrome.tabs.onCreated.addListener((tab) => {
+    const newTabId = tab.id;
+    const openerTabId = tab.openerTabId;
+    if (typeof newTabId !== 'number')
+        return;
+    if (typeof openerTabId !== 'number')
+        return;
+    const openerState = tabStates.get(openerTabId);
+    if (!openerState)
+        return;
+    const openedFrom = openerState.serverTabId;
+    if (!openedFrom)
+        return;
+    void (async () => {
+        // Wait until chrome.tabs.get returns a real `url`. `pendingUrl` alone
+        // is NOT enough — connectTab's guard short-circuits on `!tab.url`.
+        // Bound at 5 s so a never-navigating tab doesn't park us forever.
+        const deadline = Date.now() + 5_000;
+        let ready = false;
+        while (Date.now() < deadline) {
+            try {
+                const t = await chrome.tabs.get(newTabId);
+                if (t.url && t.url.length > 0) {
+                    ready = true;
+                    break;
+                }
+            }
+            catch {
+                return;
+            }
+            await sleep(50);
+        }
+        if (!ready)
+            return;
+        try {
+            const result = await connectTab(newTabId);
+            if (!result.ok || !result.serverTabId)
+                return;
+            const newState = tabStates.get(newTabId);
+            if (!newState?.ws || newState.ws.readyState !== WebSocket.OPEN)
+                return;
+            let resolvedUrl = '';
+            try {
+                const settled = await chrome.tabs.get(newTabId);
+                resolvedUrl = settled.url ?? settled.pendingUrl ?? '';
+            }
+            catch {
+                // Tab vanished between attach and read.
+            }
+            send(newState.ws, {
+                kind: 'bridge.event',
+                eventKind: 'tab-created',
+                tabId: newState.serverTabId,
+                data: {
+                    opened_from: openedFrom,
+                    url: resolvedUrl,
+                },
+            });
+        }
+        catch {
+            // Auto-connect is best-effort.
+        }
+    })();
+});
 chrome.debugger.onDetach.addListener((source) => {
     if (source.tabId === undefined)
         return;