iframer-toolkit 0.9.0 → 0.10.5

package/extension/native-host.cjs

@@ -0,0 +1,91 @@
+#!/usr/bin/env node
+// iframer native-messaging host: hands the machine-local pairing token to the
+// iframer extension so nobody has to copy-paste it. Chrome launches this
+// process (per its host manifest, installed by `iframer install extension`),
+// restricted by allowed_origins to the iframer extension ID only.
+//
+// Protocol (Chrome native messaging): each message is a 4-byte little-endian
+// length followed by that many bytes of JSON, both directions.
+//
+// This file is COPIED to ~/.iframer/ at install time so it keeps working if
+// the repo moves. It must stay dependency-free (plain node, no imports beyond
+// stdlib) and must read the same secret locations as src/lib/auth/crypto.ts.
+
+const fs = require("fs");
+const os = require("os");
+const path = require("path");
+
+function readToken() {
+  if (process.env.IFRAMER_SECRET) return process.env.IFRAMER_SECRET;
+  const dataDir = process.env.IFRAMER_DATA_DIR || path.join(os.homedir(), ".iframer");
+  const candidates = [
+    path.join(dataDir, "secret"),
+    path.join(process.env.XDG_RUNTIME_DIR || os.tmpdir(), "iframer-secret"),
+  ];
+  for (const file of candidates) {
+    try {
+      const t = fs.readFileSync(file, "utf8").trim();
+      if (t) return t;
+    } catch {
+      /* try next */
+    }
+  }
+  return "";
+}
+
+// Where is the iframer server right now? Reads the server registry the local
+// server writes on startup (src/lib/browser/registry.ts) and checks the pid is
+// actually alive — so the extension can connect straight to the right port
+// instead of blind-scanning 21 ports (each dead dial logs a console error).
+function readServerInfo() {
+  const dataDir = process.env.IFRAMER_DATA_DIR || path.join(os.homedir(), ".iframer");
+  try {
+    const info = JSON.parse(fs.readFileSync(path.join(dataDir, "server.json"), "utf8"));
+    let alive = false;
+    if (info && typeof info.pid === "number") {
+      try {
+        process.kill(info.pid, 0);
+        alive = true;
+      } catch {
+        /* pid gone — stale registry */
+      }
+    }
+    return { port: info && typeof info.port === "number" ? info.port : null, alive };
+  } catch {
+    return { port: null, alive: false };
+  }
+}
+
+function send(msg) {
+  const payload = Buffer.from(JSON.stringify(msg), "utf8");
+  const header = Buffer.alloc(4);
+  header.writeUInt32LE(payload.length, 0);
+  process.stdout.write(Buffer.concat([header, payload]));
+}
+
+let buf = Buffer.alloc(0);
+process.stdin.on("data", (chunk) => {
+  buf = Buffer.concat([buf, chunk]);
+  while (buf.length >= 4) {
+    const len = buf.readUInt32LE(0);
+    if (buf.length < 4 + len) return;
+    const body = buf.subarray(4, 4 + len);
+    buf = buf.subarray(4 + len);
+    let msg = {};
+    try {
+      msg = JSON.parse(body.toString("utf8"));
+    } catch {
+      /* respond with error below */
+    }
+    if (msg && msg.cmd === "get-token") {
+      const token = readToken();
+      send(token ? { ok: true, token } : { ok: false, error: "no secret file found — run any iframer command once to create it" });
+    } else if (msg && msg.cmd === "get-info") {
+      // Token + live server location in one call.
+      send({ ok: true, token: readToken() || null, ...readServerInfo() });
+    } else {
+      send({ ok: false, error: "unknown command" });
+    }
+  }
+});
+process.stdin.on("end", () => process.exit(0));

package/extension/popup.html

@@ -0,0 +1,72 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <style>
+      body { font: 13px/1.4 -apple-system, system-ui, sans-serif; width: 300px; margin: 0; padding: 14px; color: #1a1a1a; }
+      h1 { font-size: 14px; margin: 0 0 10px; display: flex; align-items: center; gap: 6px; }
+      .dot { width: 9px; height: 9px; border-radius: 50%; background: #c33; display: inline-block; }
+      .dot.on { background: #2a2; }
+      .row { margin: 8px 0; }
+      label { display: block; font-weight: 600; margin-bottom: 3px; font-size: 12px; }
+      input { width: 100%; box-sizing: border-box; padding: 6px; border: 1px solid #ccc; border-radius: 5px; font-family: monospace; font-size: 11px; }
+      button { padding: 7px 10px; border: 0; border-radius: 6px; background: #1a1a1a; color: #fff; cursor: pointer; font-size: 12px; }
+      button.secondary { background: #eee; color: #1a1a1a; }
+      button:disabled { opacity: 0.5; cursor: default; }
+      .muted { color: #777; font-size: 11px; }
+      .tab { font-size: 11px; color: #555; word-break: break-all; margin: 4px 0; }
+      .status { font-size: 12px; margin-bottom: 8px; }
+      .actions { display: flex; gap: 6px; }
+      hr { border: 0; border-top: 1px solid #eee; margin: 12px 0; }
+    </style>
+  </head>
+  <body>
+    <h1><span id="dot" class="dot"></span> iframer</h1>
+    <div class="status" id="status">Checking…</div>
+    <div id="update" style="display:none; margin:6px 0 10px; padding:8px 10px; background:#e8f7ef; border:1px solid #b6e6cd; border-radius:6px; font-size:12px; color:#1a5e3a;"></div>
+
+    <div class="row">
+      <label>Profile</label>
+      <div class="muted" id="profinfo" style="margin-bottom:4px;">detecting…</div>
+      <input id="label" type="text" placeholder="optional: rename this profile" />
+      <div class="actions" style="margin-top:6px;">
+        <button id="savelabel" class="secondary">Override name</button>
+      </div>
+    </div>
+
+    <hr />
+
+    <div class="row">
+      <label>Pairing</label>
+      <div class="actions">
+        <button id="autopair">Pair automatically</button>
+      </div>
+      <div class="muted" id="pairmsg" style="margin-top:4px;">Needs <code>iframer install extension</code> run once in a terminal. Or paste the token below.</div>
+    </div>
+
+    <div class="row">
+      <label for="token">Pairing token (manual fallback)</label>
+      <input id="token" type="password" placeholder="paste from ~/.iframer/secret" />
+    </div>
+    <div class="actions">
+      <button id="save" class="secondary">Save &amp; connect</button>
+    </div>
+
+    <div class="muted" id="tabnote" style="margin-top:10px;">
+      When connected, iframer can find and drive any of your open tabs.
+    </div>
+
+    <hr />
+
+    <div class="row">
+      <label>Page access</label>
+      <div class="actions">
+        <button id="grant" class="secondary">Grant all-sites access</button>
+        <button id="test" class="secondary">Test page access</button>
+      </div>
+      <div class="muted" id="diag" style="margin-top:6px; white-space:pre-wrap;"></div>
+    </div>
+
+    <script src="popup.js"></script>
+  </body>
+</html>

package/extension/popup.js

@@ -0,0 +1,108 @@
+const $ = (id) => document.getElementById(id);
+
+function send(cmd, extra = {}) {
+  // Resolve to {} when the worker is asleep or errored (sendMessage passes
+  // undefined + sets lastError) so callers never null-deref on res.status etc.
+  return new Promise((resolve) =>
+    chrome.runtime.sendMessage({ cmd, ...extra }, (resp) => {
+      void chrome.runtime.lastError; // touch it so Chrome doesn't log "Unchecked"
+      resolve(resp || {});
+    }),
+  );
+}
+
+function renderStatus(status) {
+  const connected = status && status.connected;
+  $("dot").className = "dot" + (connected ? " on" : "");
+  const reasonText = {
+    "no-token": "No token set — try Pair automatically, or paste it below.",
+    "server-not-found": "iframer server not found. Is Claude Code / iframer running?",
+    "server-not-running": "iframer server not running — it starts with your Claude/iframer session. Will connect by itself.",
+    "bad-token": "Token rejected. Check it matches ~/.iframer/secret.",
+    disconnected: "Disconnected — retrying…",
+  };
+  if (connected) {
+    $("status").textContent = `Connected on port ${status.port}. iframer can drive any open tab.`;
+  } else {
+    $("status").textContent = reasonText[status && status.reason] || "Not connected.";
+  }
+  // Update-available notice (check-and-notify).
+  const up = $("update");
+  if (up) {
+    if (status && status.updateAvailable) {
+      up.style.display = "block";
+      up.textContent = `↑ Update available: v${status.updateAvailable} (you have v${status.current || "?"}). Run \`iframer update\` in a terminal.`;
+    } else {
+      up.style.display = "none";
+    }
+  }
+}
+
+async function refresh() {
+  const state = await send("get-state");
+  renderStatus(state.status);
+}
+
+async function init() {
+  const { token, profileLabel } = await chrome.storage.local.get(["token", "profileLabel"]);
+  if (token) $("token").value = token;
+  if (profileLabel) $("label").value = profileLabel;
+  const state = await send("get-state");
+  renderStatus(state.status);
+  if (state.profileName) $("profinfo").textContent = `${state.profileName} · id ${String(state.profileId).slice(0, 8)}`;
+}
+
+$("savelabel").addEventListener("click", async () => {
+  const res = await send("set-label", { label: $("label").value });
+  if (res.profileName) $("profinfo").textContent = `${res.profileName} · id ${String(res.profileId).slice(0, 8)}`;
+});
+
+$("grant").addEventListener("click", () => {
+  // Must run in the popup (user gesture) — requesting host access to all sites.
+  chrome.permissions.request({ origins: ["<all_urls>"] }, (granted) => {
+    const e = chrome.runtime.lastError;
+    $("diag").textContent = e
+      ? `request error: ${e.message}`
+      : granted
+        ? "✓ All-sites access granted. Try 'Test page access'."
+        : "✗ Access request was dismissed/denied.";
+  });
+});
+
+$("test").addEventListener("click", async () => {
+  $("diag").textContent = "testing…";
+  const res = await send("diag");
+  const lines = [];
+  lines.push(`manifest host_permissions: ${JSON.stringify(res.hostPermissions)}`);
+  lines.push(`granted origins: ${JSON.stringify(res.grantedOrigins)}`);
+  lines.push(`tab: ${res.tabUrl || "(none)"}`);
+  lines.push(res.okExec ? `✓ executeScript OK → ${res.value}` : `✗ executeScript FAILED: ${res.error}`);
+  $("diag").textContent = lines.join("\n");
+});
+
+$("autopair").addEventListener("click", async () => {
+  $("autopair").disabled = true;
+  $("pairmsg").textContent = "Asking the local pairing host…";
+  const res = await send("auto-pair");
+  if (res.ok) {
+    if (res.token) $("token").value = res.token;
+    $("pairmsg").textContent = "✓ Paired.";
+    renderStatus(res.status);
+  } else {
+    $("pairmsg").textContent = res.error || "Auto-pair failed — paste the token manually below.";
+  }
+  $("autopair").disabled = false;
+  await refresh();
+});
+
+$("save").addEventListener("click", async () => {
+  $("save").disabled = true;
+  $("save").textContent = "Connecting…";
+  const res = await send("set-token", { token: $("token").value.trim() });
+  renderStatus(res.status);
+  await refresh();
+  $("save").disabled = false;
+  $("save").textContent = "Save & connect";
+});
+
+init();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iframer-toolkit",
-  "version": "0.9.0",
+  "version": "0.10.5",
   "description": "Browser access toolkit for AI agents — CLI and MCP server for headless/headful browsing, login flows, and pipeline execution.",
   "keywords": [
     "iframer",
@@ -29,6 +29,7 @@
   "files": [
     "dist/",
     "skills/",
+    "extension/",
     "README.md",
     "LICENSE"
   ],
@@ -44,12 +45,12 @@
     "test:smoke": "node tests/smoke.js",
     "mcp:install": "node bin/cli.js install-mcp",
     "mcp:remove": "node bin/cli.js remove-mcp",
-    "build:cli": "bun build bin/cli.js --target node --format cjs --outfile dist/cli.js --external better-sqlite3 --external patchright --external fingerprint-generator --external @anthropic-ai/sdk --external @modelcontextprotocol/sdk --external zod --external cloakbrowser --external playwright-core",
-    "build:mcp": "bun build src/mcp/server.ts --target node --format cjs --outfile dist/mcp-server.cjs --external better-sqlite3 --external patchright --external fingerprint-generator --external @anthropic-ai/sdk --external @modelcontextprotocol/sdk --external zod --external cloakbrowser --external playwright-core",
-    "build:local-server": "bun build index.ts --target node --format cjs --outfile dist/local-server.cjs --external better-sqlite3 --external patchright --external fingerprint-generator --external @anthropic-ai/sdk --external @modelcontextprotocol/sdk --external zod --external cloakbrowser --external playwright-core --external express",
-    "build": "bun run build:cli && bun run build:mcp && bun run build:local-server",
+    "build:stamp": "node scripts/stamp-extension-version.mjs",
+    "build": "bun run build:stamp && node scripts/build.mjs",
     "test": "bun test tests/unit",
-    "prepublishOnly": "bun run build"
+    "test:extension": "node tests/integration/extension-bridge.mjs",
+    "prepublishOnly": "bun run build",
+    "test:cdp-relay": "bun tests/integration/cdp-relay.mjs"
   },
   "dependencies": {
     "@anthropic-ai/sdk": "^0.80.0",
@@ -57,6 +58,8 @@
     "better-sqlite3": "^12.8.0",
     "fingerprint-generator": "^2.1.81",
     "patchright": "^1.58.2",
+    "playwright-core": "^1.58.0",
+    "ws": "^8.18.0",
     "zod": "^4.3.6"
   },
   "optionalDependencies": {
@@ -66,8 +69,11 @@
     "@types/better-sqlite3": "^7.6.13",
     "@types/express": "^5.0.6",
     "@types/node": "^25.5.0",
+    "@types/ws": "^8.5.12",
     "bun-types": "^1.3.11",
+    "esbuild": "0.28.2",
     "express": "^4.18.2",
+    "tsx": "^4.23.12",
     "typescript": "^6.0.2"
   }
 }