@mehmoodqureshi/chrome-mcp 0.1.0

package/extension-dist/background.js

@@ -0,0 +1,567 @@
+"use strict";
+(() => {
+  // shared/protocol.ts
+  var PROTOCOL_VERSION = 1;
+  var WIRE_METHODS = [
+    "tabs_list",
+    "tab_select",
+    "tab_new",
+    "tab_close",
+    "navigate",
+    "back",
+    "forward",
+    "reload",
+    "click",
+    "type",
+    "press",
+    "hover",
+    "scroll",
+    "screenshot",
+    "get_text",
+    "get_html",
+    "eval",
+    "wait_for",
+    "download_file",
+    "ping_probe"
+  ];
+
+  // extension/src/sw/ws-client.ts
+  function chromeVersion() {
+    const m = /Chrome\/(\d+)/.exec(navigator.userAgent);
+    return m ? m[1] : "0";
+  }
+  var WsClient = class {
+    constructor(deps) {
+      this.deps = deps;
+    }
+    ws = null;
+    state = "idle";
+    isConnected() {
+      return this.state === "connected" && this.ws?.readyState === WebSocket.OPEN;
+    }
+    connect(port, token) {
+      if (this.ws && (this.ws.readyState === WebSocket.OPEN || this.ws.readyState === WebSocket.CONNECTING)) {
+        return;
+      }
+      this.setState("connecting");
+      let ws2;
+      try {
+        ws2 = new WebSocket(`ws://127.0.0.1:${port}`);
+      } catch (err) {
+        this.setState("idle", `dial failed: ${String(err)}`);
+        return;
+      }
+      this.ws = ws2;
+      ws2.onopen = () => {
+        const hello = {
+          type: "hello",
+          v: PROTOCOL_VERSION,
+          token,
+          ext: { id: chrome.runtime.id, version: chrome.runtime.getManifest().version, chrome: chromeVersion() }
+        };
+        ws2.send(JSON.stringify(hello));
+      };
+      ws2.onmessage = (ev) => {
+        let frame;
+        try {
+          frame = JSON.parse(typeof ev.data === "string" ? ev.data : "");
+        } catch {
+          return;
+        }
+        switch (frame.type) {
+          case "welcome":
+            this.setState("connected");
+            this.deps.log("paired with server");
+            break;
+          case "unauthorized":
+            this.setState("unauthorized", frame.reason);
+            this.deps.log(`pairing rejected: ${frame.reason}`);
+            break;
+          case "ping":
+            this.send({ type: "pong", v: PROTOCOL_VERSION, ts: frame.ts });
+            break;
+          case "command":
+            this.deps.onCommand(frame);
+            break;
+        }
+      };
+      ws2.onclose = () => {
+        if (this.ws === ws2) this.ws = null;
+        if (this.state !== "unauthorized") this.setState("idle");
+      };
+      ws2.onerror = () => {
+      };
+    }
+    /** Send any extension→server frame (result/error/event/pong). */
+    send(frame) {
+      if (this.ws?.readyState === WebSocket.OPEN) {
+        this.ws.send(JSON.stringify(frame));
+      }
+    }
+    close() {
+      try {
+        this.ws?.close();
+      } catch {
+      }
+      this.ws = null;
+    }
+    setState(state, detail) {
+      this.state = state;
+      this.deps.onState(state, detail);
+    }
+  };
+
+  // shared/download.ts
+  var MAX_DOWNLOAD_BYTES = 100 * 1024 * 1024;
+  var DANGEROUS_EXTENSIONS = /* @__PURE__ */ new Set([
+    "exe",
+    "dll",
+    "scr",
+    "bat",
+    "cmd",
+    "com",
+    "msi",
+    "app",
+    "dmg",
+    "pkg",
+    "sh",
+    "bash",
+    "zsh",
+    "ps1",
+    "vbs",
+    "js",
+    "jar",
+    "lnk",
+    "reg",
+    "msc"
+  ]);
+  var MAX_NAME_LEN = 200;
+  var ILLEGAL = new RegExp('[\\u0000-\\u001f<>:"|?*]', "g");
+  function sanitizeDownloadName(name) {
+    let n = (name ?? "").trim();
+    n = n.replace(/[/\\]+/g, "_").replace(/\.{2,}/g, "_");
+    n = n.replace(ILLEGAL, "_");
+    n = n.replace(/^\.+/, "");
+    n = n.replace(/\s+/g, " ").trim();
+    if (!n || /^[_.]+$/.test(n)) n = "download";
+    const dot = n.lastIndexOf(".");
+    if (dot > 0) {
+      const ext = n.slice(dot + 1).toLowerCase();
+      if (DANGEROUS_EXTENSIONS.has(ext)) n = `${n.slice(0, dot)}.download`;
+    }
+    if (n.length > MAX_NAME_LEN) {
+      const dot2 = n.lastIndexOf(".");
+      if (dot2 > 0 && n.length - dot2 <= 12) {
+        const ext = n.slice(dot2);
+        n = n.slice(0, MAX_NAME_LEN - ext.length) + ext;
+      } else {
+        n = n.slice(0, MAX_NAME_LEN);
+      }
+    }
+    return n;
+  }
+
+  // extension/src/sw/executor.ts
+  var CmdError = class extends Error {
+    constructor(code, message) {
+      super(message);
+      this.code = code;
+    }
+  };
+  var SESSION = crypto.randomUUID();
+  var CONTENT_SCHEME = /^(https?|file):/i;
+  var delay = (ms) => new Promise((r) => setTimeout(r, ms));
+  function mint(tabId) {
+    return `ext:${SESSION}:${tabId}`;
+  }
+  function parseTabId(wire) {
+    const parts = wire.split(":");
+    if (parts.length !== 3 || parts[0] !== "ext") throw new CmdError("TARGET_GONE", `malformed tab handle: ${wire}`);
+    if (parts[1] !== SESSION) throw new CmdError("TARGET_GONE", "tab handle is from a previous session; call tabs_list again");
+    const id = Number(parts[2]);
+    if (!Number.isInteger(id)) throw new CmdError("TARGET_GONE", `bad tab id: ${wire}`);
+    return id;
+  }
+  async function currentTabId() {
+    const [active] = await chrome.tabs.query({ active: true, lastFocusedWindow: true });
+    if (active?.id !== void 0) return active.id;
+    const [any] = await chrome.tabs.query({ active: true });
+    if (any?.id !== void 0) return any.id;
+    throw new CmdError("NO_TARGET", "no active tab to operate on");
+  }
+  async function targetTab(cmd) {
+    return cmd.tabId ? parseTabId(cmd.tabId) : currentTabId();
+  }
+  async function execInTab(tabId, func, args = [], world) {
+    const [res] = await chrome.scripting.executeScript({
+      target: { tabId },
+      func,
+      args,
+      world
+    });
+    return res?.result;
+  }
+  async function waitComplete(tabId, timeoutMs = 3e4) {
+    const start = Date.now();
+    for (; ; ) {
+      const t = await chrome.tabs.get(tabId);
+      if (t.status === "complete") return;
+      if (Date.now() - start > timeoutMs) return;
+      await delay(100);
+    }
+  }
+  function selectorOf(cmd) {
+    const s = cmd.params.selector;
+    return typeof s === "string" ? s : void 0;
+  }
+  async function tabInfo(tab, index = 0) {
+    return {
+      tabId: mint(tab.id ?? -1),
+      url: tab.url ?? "",
+      title: tab.title ?? "",
+      active: tab.active ?? false,
+      index: tab.index ?? index
+    };
+  }
+  var HANDLED = /* @__PURE__ */ new Set([
+    "tabs_list",
+    "tab_select",
+    "tab_new",
+    "tab_close",
+    "navigate",
+    "back",
+    "forward",
+    "reload",
+    "click",
+    "type",
+    "press",
+    "hover",
+    "scroll",
+    "screenshot",
+    "get_text",
+    "get_html",
+    "eval",
+    "wait_for",
+    "download_file",
+    "ping_probe"
+  ]);
+  var ChromeExecutor = class {
+    async run(cmd) {
+      switch (cmd.method) {
+        case "ping_probe":
+          return {};
+        // -- tabs --
+        case "tabs_list": {
+          const tabs = (await chrome.tabs.query({})).filter((t) => CONTENT_SCHEME.test(t.url ?? ""));
+          return Promise.all(tabs.map((t, i) => tabInfo(t, i)));
+        }
+        case "tab_select": {
+          const id = parseTabId(String(cmd.tabId));
+          const t = await chrome.tabs.update(id, { active: true });
+          return tabInfo(t ?? await chrome.tabs.get(id));
+        }
+        case "tab_new": {
+          const url = typeof cmd.params.url === "string" ? cmd.params.url : void 0;
+          const t = await chrome.tabs.create({ url, active: false });
+          return tabInfo(t);
+        }
+        case "tab_close": {
+          const id = parseTabId(String(cmd.tabId));
+          await chrome.tabs.remove(id);
+          return { closed: true, tabId: cmd.tabId };
+        }
+        // -- navigation --
+        case "navigate": {
+          const id = await targetTab(cmd);
+          const url = String(cmd.params.url);
+          await chrome.tabs.update(id, { url });
+          await waitComplete(id);
+          const t = await chrome.tabs.get(id);
+          return { url: t.url ?? url, title: t.title ?? "" };
+        }
+        case "back": {
+          const id = await targetTab(cmd);
+          await chrome.tabs.goBack(id).catch(() => void 0);
+          const t = await chrome.tabs.get(id);
+          return { url: t.url ?? "", title: t.title ?? "" };
+        }
+        case "forward": {
+          const id = await targetTab(cmd);
+          await chrome.tabs.goForward(id).catch(() => void 0);
+          const t = await chrome.tabs.get(id);
+          return { url: t.url ?? "", title: t.title ?? "" };
+        }
+        case "reload": {
+          const id = await targetTab(cmd);
+          await chrome.tabs.reload(id);
+          await waitComplete(id);
+          const t = await chrome.tabs.get(id);
+          return { url: t.url ?? "", title: t.title ?? "" };
+        }
+        // -- reads (isolated world; CSP-safe) --
+        case "get_text": {
+          const id = await targetTab(cmd);
+          const text = await execInTab(
+            id,
+            (sel) => {
+              const el = sel ? document.querySelector(sel) : document.body;
+              return el ? el.innerText : "";
+            },
+            [selectorOf(cmd) ?? null]
+          );
+          return { text: text ?? "" };
+        }
+        case "get_html": {
+          const id = await targetTab(cmd);
+          const outer = cmd.params.outer === true;
+          const html = await execInTab(
+            id,
+            (sel, isOuter) => {
+              const el = sel ? document.querySelector(sel) : document.documentElement;
+              if (!el) return "";
+              return isOuter || !sel ? el.outerHTML : el.innerHTML;
+            },
+            [selectorOf(cmd) ?? null, outer]
+          );
+          return { html: html ?? "" };
+        }
+        // -- interaction (synthetic events in the isolated world) --
+        case "click": {
+          const id = await targetTab(cmd);
+          const found = await execInTab(
+            id,
+            (sel) => {
+              const el = document.querySelector(sel);
+              if (!el) return false;
+              el.scrollIntoView({ block: "center" });
+              el.click();
+              return true;
+            },
+            [requireSelector(cmd)]
+          );
+          if (!found) throw new CmdError("SELECTOR_NOT_FOUND", `no element for selector: ${requireSelector(cmd)}`);
+          return { ok: true };
+        }
+        case "type": {
+          const id = await targetTab(cmd);
+          const text = String(cmd.params.text ?? "");
+          const clear = cmd.params.clear === true;
+          const found = await execInTab(
+            id,
+            (sel, value, doClear) => {
+              const el = document.querySelector(sel);
+              if (!el) return false;
+              el.focus();
+              if (doClear) el.value = "";
+              el.value = (el.value ?? "") + value;
+              el.dispatchEvent(new Event("input", { bubbles: true }));
+              el.dispatchEvent(new Event("change", { bubbles: true }));
+              return true;
+            },
+            [requireSelector(cmd), text, clear]
+          );
+          if (!found) throw new CmdError("SELECTOR_NOT_FOUND", `no element for selector: ${requireSelector(cmd)}`);
+          return { ok: true };
+        }
+        case "press": {
+          const id = await targetTab(cmd);
+          const key = String(cmd.params.key ?? "");
+          await execInTab(
+            id,
+            (k) => {
+              const el = document.activeElement ?? document.body;
+              for (const type of ["keydown", "keypress", "keyup"]) {
+                el.dispatchEvent(new KeyboardEvent(type, { key: k, bubbles: true }));
+              }
+            },
+            [key]
+          );
+          return { ok: true };
+        }
+        case "hover": {
+          const id = await targetTab(cmd);
+          await execInTab(
+            id,
+            (sel) => {
+              const el = document.querySelector(sel);
+              el?.dispatchEvent(new MouseEvent("mouseover", { bubbles: true }));
+            },
+            [requireSelector(cmd)]
+          );
+          return { ok: true };
+        }
+        case "scroll": {
+          const id = await targetTab(cmd);
+          await execInTab(
+            id,
+            (x, y, dx, dy) => {
+              if (x != null || y != null) window.scrollTo(x ?? 0, y ?? 0);
+              else window.scrollBy(dx ?? 0, dy ?? 0);
+            },
+            [cmd.params.x ?? null, cmd.params.y ?? null, cmd.params.deltaX ?? null, cmd.params.deltaY ?? null]
+          );
+          return { ok: true };
+        }
+        // -- screenshot (visible tab) --
+        case "screenshot": {
+          const id = await targetTab(cmd);
+          const t = await chrome.tabs.get(id);
+          const dataUrl = await chrome.tabs.captureVisibleTab(t.windowId, { format: "png" });
+          return {
+            dataBase64: dataUrl.split(",")[1] ?? "",
+            mimeType: "image/png",
+            width: 0,
+            height: 0,
+            truncated: false
+          };
+        }
+        // -- eval (MAIN world; may be blocked by strict page CSP) --
+        case "eval": {
+          const id = await targetTab(cmd);
+          const expr = String(cmd.params.expression ?? "");
+          const result = await execInTab(
+            id,
+            (e) => {
+              try {
+                const v = (0, eval)(e);
+                return { ok: true, value: v, type: typeof v };
+              } catch (err) {
+                return { ok: false, error: String(err) };
+              }
+            },
+            [expr],
+            "MAIN"
+          );
+          return result ?? { ok: false, error: "no result" };
+        }
+        // -- wait_for (poll the isolated world) --
+        case "wait_for": {
+          const id = await targetTab(cmd);
+          const timeout = typeof cmd.params.timeoutMs === "number" ? cmd.params.timeoutMs : 3e4;
+          const start = Date.now();
+          for (; ; ) {
+            const matched = await execInTab(
+              id,
+              (sel, text, gone) => {
+                let present;
+                if (sel) present = !!document.querySelector(sel);
+                else if (text) present = (document.body?.innerText ?? "").includes(text);
+                else present = true;
+                return gone ? !present : present;
+              },
+              [cmd.params.selector ?? null, cmd.params.textContains ?? null, cmd.params.gone === true]
+            );
+            if (matched) return { matched: true, waitedMs: Date.now() - start };
+            if (Date.now() - start > timeout) return { matched: false, waitedMs: Date.now() - start };
+            await delay(150);
+          }
+        }
+        // -- download (user's Downloads dir) --
+        case "download_file": {
+          const url = typeof cmd.params.url === "string" ? cmd.params.url : void 0;
+          if (!url) throw new CmdError("DOWNLOAD_FAILED", "the extension download path requires a url");
+          const name = sanitizeDownloadName(
+            typeof cmd.params.suggestedName === "string" ? cmd.params.suggestedName : void 0
+          );
+          const downloadId = await chrome.downloads.download({ url, filename: name });
+          return { path: `(downloads)/${name}`, backend: "extension", bytes: 0, suggestedName: name };
+        }
+        default:
+          throw new CmdError("UNKNOWN_METHOD", `unhandled method: ${cmd.method}`);
+      }
+    }
+  };
+  function requireSelector(cmd) {
+    const s = cmd.params.selector;
+    if (typeof s !== "string" || s.length === 0) {
+      throw new CmdError("BAD_ARGS", "this command needs a CSS selector (the scripting backend does not support refs)");
+    }
+    return s;
+  }
+
+  // extension/src/sw/router.ts
+  var CommandRouter = class {
+    constructor(deps) {
+      this.deps = deps;
+      for (const m of WIRE_METHODS) {
+        if (!HANDLED.has(m)) throw new Error(`router drift: no handler for wire method "${m}"`);
+      }
+    }
+    async dispatch(cmd) {
+      try {
+        const data = await this.deps.exec.run(cmd);
+        const frame = { type: "result", v: PROTOCOL_VERSION, id: cmd.id, ok: true, data };
+        this.deps.send(frame);
+      } catch (err) {
+        const code = err instanceof CmdError ? err.code : "CDP_ERROR";
+        const message = err instanceof Error ? err.message : String(err);
+        this.deps.log(`command "${cmd.method}" failed: ${message}`);
+        const frame = {
+          type: "error",
+          v: PROTOCOL_VERSION,
+          id: cmd.id,
+          ok: false,
+          error: { code, message }
+        };
+        this.deps.send(frame);
+      }
+    }
+  };
+
+  // extension/src/sw/background.ts
+  var KEEPALIVE_ALARM = "chrome-mcp-keepalive";
+  var executor = new ChromeExecutor();
+  var ws = new WsClient({
+    onCommand: (cmd) => void router.dispatch(cmd),
+    onState: (state) => void persistState(state),
+    log: (m) => console.debug("[chrome-mcp]", m)
+  });
+  var router = new CommandRouter({
+    exec: executor,
+    send: (frame) => ws.send(frame),
+    log: (m) => console.debug("[chrome-mcp]", m)
+  });
+  async function getConfig() {
+    const { wsPort, token } = await chrome.storage.local.get(["wsPort", "token"]);
+    if (typeof wsPort === "number" && typeof token === "string" && token.length > 0) {
+      return { wsPort, token };
+    }
+    return null;
+  }
+  async function persistState(state) {
+    await chrome.storage.local.set({ connState: state });
+  }
+  async function ensureConnected() {
+    if (ws.isConnected() || ws.state === "unauthorized") return;
+    const cfg = await getConfig();
+    if (!cfg) return;
+    ws.connect(cfg.wsPort, cfg.token);
+  }
+  async function keepalivePulse() {
+    await chrome.storage.local.get("connState");
+    await ensureConnected();
+  }
+  chrome.runtime.onInstalled.addListener(() => void bootstrap());
+  chrome.runtime.onStartup.addListener(() => void bootstrap());
+  chrome.alarms.onAlarm.addListener((alarm) => {
+    if (alarm.name === KEEPALIVE_ALARM) void keepalivePulse();
+  });
+  chrome.storage.onChanged.addListener((changes, area) => {
+    if (area === "local" && (changes.wsPort || changes.token)) {
+      if (ws.state === "unauthorized") ws.state = "idle";
+      void ensureConnected();
+    }
+  });
+  chrome.runtime.onMessage.addListener((msg) => {
+    if (msg?.type === "reconnect") {
+      ws.close();
+      ws.state = "idle";
+      void ensureConnected();
+    }
+  });
+  async function bootstrap() {
+    await chrome.alarms.create(KEEPALIVE_ALARM, { periodInMinutes: 0.5 });
+    await ensureConnected();
+  }
+  void bootstrap();
+})();

package/extension-dist/manifest.json

@@ -0,0 +1,12 @@
+{
+  "manifest_version": 3,
+  "name": "Chrome MCP Bridge",
+  "version": "0.1.0",
+  "description": "Lets a local chrome-mcp server drive this browser. Pair it with the server's handshake token.",
+  "minimum_chrome_version": "116",
+  "background": { "service_worker": "background.js" },
+  "permissions": ["tabs", "scripting", "activeTab", "downloads", "storage", "alarms"],
+  "host_permissions": ["http://*/*", "https://*/*"],
+  "options_page": "options.html",
+  "action": { "default_title": "Chrome MCP — open options to pair" }
+}

package/extension-dist/options.html

@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Chrome MCP — Pairing</title>
+    <style>
+      body { font: 14px/1.5 system-ui, sans-serif; max-width: 32rem; margin: 2rem auto; padding: 0 1rem; }
+      h1 { font-size: 1.2rem; }
+      label { display: block; margin: 0.75rem 0 0.25rem; font-weight: 600; }
+      input { width: 100%; padding: 0.5rem; box-sizing: border-box; font: inherit; }
+      button { margin-top: 1rem; padding: 0.5rem 1rem; font: inherit; cursor: pointer; }
+      .status { margin-top: 1rem; padding: 0.5rem 0.75rem; border-radius: 0.4rem; background: #eef; }
+      code { background: #f3f3f3; padding: 0 0.25rem; }
+      .hint { color: #555; font-size: 0.9rem; }
+    </style>
+  </head>
+  <body>
+    <h1>Pair with chrome-mcp</h1>
+    <p class="hint">
+      Run <code>npx chrome-mcp --print-pairing</code>, open the printed
+      <code>handshake.json</code>, and paste its <code>port</code> and
+      <code>token</code> below.
+    </p>
+    <label for="port">Port</label>
+    <input id="port" type="number" inputmode="numeric" placeholder="38017" />
+    <label for="token">Token</label>
+    <input id="token" type="password" placeholder="paste the handshake token" />
+    <button id="save">Save & connect</button>
+    <div class="status" id="status">Status: unknown</div>
+    <script src="options.js"></script>
+  </body>
+</html>

package/extension-dist/options.js

@@ -0,0 +1,37 @@
+"use strict";
+(() => {
+  // extension/src/options/options.ts
+  var portEl = document.getElementById("port");
+  var tokenEl = document.getElementById("token");
+  var saveEl = document.getElementById("save");
+  var statusEl = document.getElementById("status");
+  async function loadExisting() {
+    const { wsPort, connState } = await chrome.storage.local.get(["wsPort", "connState"]);
+    if (typeof wsPort === "number") portEl.value = String(wsPort);
+    render(typeof connState === "string" ? connState : "idle");
+  }
+  function render(state) {
+    const labels = {
+      connected: "\u2705 connected",
+      connecting: "\u2026 connecting",
+      unauthorized: "\u26D4 rejected (bad/stale token \u2014 re-paste)",
+      idle: "\u25CB not connected"
+    };
+    statusEl.textContent = `Status: ${labels[state] ?? state}`;
+  }
+  saveEl.addEventListener("click", async () => {
+    const wsPort = Number(portEl.value);
+    const token = tokenEl.value.trim();
+    if (!Number.isInteger(wsPort) || wsPort < 0 || !token) {
+      statusEl.textContent = "Status: enter a valid port and token";
+      return;
+    }
+    await chrome.storage.local.set({ wsPort, token });
+    await chrome.runtime.sendMessage({ type: "reconnect" }).catch(() => void 0);
+    statusEl.textContent = "Status: \u2026 connecting";
+  });
+  chrome.storage.onChanged.addListener((changes, area) => {
+    if (area === "local" && changes.connState) render(String(changes.connState.newValue));
+  });
+  void loadExisting();
+})();