@different-ai/opencode-browser 2.1.0 → 4.0.0

package/bin/cli.js

@@ -1,29 +1,49 @@
 #!/usr/bin/env node
 /**
- * OpenCode Browser - CLI Installer
+ * OpenCode Browser - CLI
  *
- * Installs the Chrome extension for browser automation.
- * v2.0: Plugin-based architecture (no daemon, no MCP server)
+ * Architecture (v4):
+ *   OpenCode Plugin <-> Local Broker (unix socket) <-> Native Messaging Host <-> Chrome Extension
+ *
+ * Commands:
+ *   install   - Install extension + native host
+ *   uninstall - Remove native host registration
+ *   status    - Show installation status
  */
 
-import { existsSync, mkdirSync, writeFileSync, readFileSync, copyFileSync, readdirSync, unlinkSync } from "fs";
+import {
+  existsSync,
+  mkdirSync,
+  writeFileSync,
+  readFileSync,
+  copyFileSync,
+  readdirSync,
+  unlinkSync,
+  chmodSync,
+} from "fs";
 import { homedir, platform } from "os";
 import { join, dirname } from "path";
 import { fileURLToPath } from "url";
-import { execSync } from "child_process";
 import { createInterface } from "readline";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 const PACKAGE_ROOT = join(__dirname, "..");
 
+const BASE_DIR = join(homedir(), ".opencode-browser");
+const EXTENSION_DIR = join(BASE_DIR, "extension");
+const BROKER_DST = join(BASE_DIR, "broker.cjs");
+const NATIVE_HOST_DST = join(BASE_DIR, "native-host.cjs");
+const CONFIG_DST = join(BASE_DIR, "config.json");
+
+const NATIVE_HOST_NAME = "com.opencode.browser_automation";
+
 const COLORS = {
   reset: "\x1b[0m",
   bright: "\x1b[1m",
   red: "\x1b[31m",
   green: "\x1b[32m",
   yellow: "\x1b[33m",
-  blue: "\x1b[34m",
   cyan: "\x1b[36m",
 };
 
@@ -59,9 +79,7 @@ const rl = createInterface({
 
 function ask(question) {
   return new Promise((resolve) => {
-    rl.question(question, (answer) => {
-      resolve(answer.trim());
-    });
+    rl.question(question, (answer) => resolve(answer.trim()));
   });
 }
 
@@ -70,14 +88,86 @@ async function confirm(question) {
   return answer.toLowerCase() === "y" || answer.toLowerCase() === "yes";
 }
 
+function ensureDir(p) {
+  mkdirSync(p, { recursive: true });
+}
+
+function copyDirRecursive(srcDir, destDir) {
+  ensureDir(destDir);
+  const entries = readdirSync(srcDir, { recursive: true });
+  for (const entry of entries) {
+    const srcPath = join(srcDir, entry);
+    const destPath = join(destDir, entry);
+
+    try {
+      readdirSync(srcPath);
+      ensureDir(destPath);
+    } catch {
+      ensureDir(dirname(destPath));
+      copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+function getNativeHostDirs(osName) {
+  if (osName === "darwin") {
+    const base = join(homedir(), "Library", "Application Support");
+    return [
+      join(base, "Google", "Chrome", "NativeMessagingHosts"),
+      join(base, "Chromium", "NativeMessagingHosts"),
+      join(base, "BraveSoftware", "Brave-Browser", "NativeMessagingHosts"),
+    ];
+  }
+
+  // linux
+  const base = join(homedir(), ".config");
+  return [
+    join(base, "google-chrome", "NativeMessagingHosts"),
+    join(base, "chromium", "NativeMessagingHosts"),
+    join(base, "BraveSoftware", "Brave-Browser", "NativeMessagingHosts"),
+  ];
+}
+
+function nativeHostManifestPath(dir) {
+  return join(dir, `${NATIVE_HOST_NAME}.json`);
+}
+
+function writeNativeHostManifest(dir, extensionId) {
+  ensureDir(dir);
+
+  const manifest = {
+    name: NATIVE_HOST_NAME,
+    description: "OpenCode Browser native messaging host",
+    path: NATIVE_HOST_DST,
+    type: "stdio",
+    allowed_origins: [`chrome-extension://${extensionId}/`],
+  };
+
+  writeFileSync(nativeHostManifestPath(dir), JSON.stringify(manifest, null, 2) + "\n");
+}
+
+function loadConfig() {
+  try {
+    if (!existsSync(CONFIG_DST)) return null;
+    return JSON.parse(readFileSync(CONFIG_DST, "utf-8"));
+  } catch {
+    return null;
+  }
+}
+
+function saveConfig(config) {
+  ensureDir(BASE_DIR);
+  writeFileSync(CONFIG_DST, JSON.stringify(config, null, 2) + "\n");
+}
+
 async function main() {
+  const command = process.argv[2];
+
   console.log(`
-${color("cyan", color("bright", "OpenCode Browser v2.0"))}
-${color("cyan", "Browser automation for OpenCode")}
+${color("cyan", color("bright", "OpenCode Browser v4"))}
+${color("cyan", "Browser automation plugin (native messaging + per-tab ownership)")}
 `);
 
-  const command = process.argv[2];
-
   if (command === "install") {
     await install();
   } else if (command === "uninstall") {
@@ -87,13 +177,14 @@ ${color("cyan", "Browser automation for OpenCode")}
   } else {
     log(`
 ${color("bright", "Usage:")}
-  npx @different-ai/opencode-browser install     Install extension
-  npx @different-ai/opencode-browser uninstall   Remove installation
-  npx @different-ai/opencode-browser status      Check lock status
-
-${color("bright", "v2.0 Changes:")}
-  - Plugin-based architecture (no daemon needed)
-  - Add plugin to opencode.json, load extension in Chrome, done
+  npx @different-ai/opencode-browser install
+  npx @different-ai/opencode-browser status
+  npx @different-ai/opencode-browser uninstall
+
+${color("bright", "Quick Start:")}
+  1. Run: npx @different-ai/opencode-browser install
+  2. Restart OpenCode
+  3. Use: browser_navigate / browser_click / browser_snapshot
 `);
   }
 
@@ -103,246 +194,200 @@ ${color("bright", "v2.0 Changes:")}
 async function install() {
   header("Step 1: Check Platform");
 
-  const os = platform();
-  if (os !== "darwin" && os !== "linux") {
-    error(`Unsupported platform: ${os}`);
+  const osName = platform();
+  if (osName !== "darwin" && osName !== "linux") {
+    error(`Unsupported platform: ${osName}`);
     error("OpenCode Browser currently supports macOS and Linux only.");
     process.exit(1);
   }
-  success(`Platform: ${os === "darwin" ? "macOS" : "Linux"}`);
+  success(`Platform: ${osName === "darwin" ? "macOS" : "Linux"}`);
 
   header("Step 2: Copy Extension Files");
 
-  const extensionDir = join(homedir(), ".opencode-browser", "extension");
+  ensureDir(BASE_DIR);
   const srcExtensionDir = join(PACKAGE_ROOT, "extension");
+  copyDirRecursive(srcExtensionDir, EXTENSION_DIR);
+  success(`Extension files copied to: ${EXTENSION_DIR}`);
 
-  mkdirSync(extensionDir, { recursive: true });
+  header("Step 3: Load & Pin Extension");
 
-  const files = readdirSync(srcExtensionDir, { recursive: true });
-  for (const file of files) {
-    const srcPath = join(srcExtensionDir, file);
-    const destPath = join(extensionDir, file);
+  log(`
+To load the extension:
 
-    try {
-      const stat = readdirSync(srcPath);
-      mkdirSync(destPath, { recursive: true });
-    } catch {
-      mkdirSync(dirname(destPath), { recursive: true });
-      copyFileSync(srcPath, destPath);
-    }
-  }
+1. Open ${color("cyan", "chrome://extensions")}
+2. Enable ${color("bright", "Developer mode")}
+3. Click ${color("bright", "Load unpacked")}
+4. Select:
+   ${color("cyan", EXTENSION_DIR)}
 
-  success(`Extension files copied to: ${extensionDir}`);
+After loading, ${color("bright", "pin the extension")}: open the Extensions menu (puzzle icon) and click the pin.
+`);
+
+  await ask(color("bright", "Press Enter when you've loaded and pinned the extension..."));
 
-  header("Step 3: Load Extension in Chrome");
+  header("Step 4: Get Extension ID");
 
   log(`
-Works with: ${color("cyan", "Chrome")}, ${color("cyan", "Brave")}, ${color("cyan", "Arc")}, ${color("cyan", "Edge")}, and other Chromium browsers.
+We need the extension ID to register the native messaging host.
 
-To load the extension:
+Find it at ${color("cyan", "chrome://extensions")}:
+- Locate ${color("bright", "OpenCode Browser Automation")}
+- Click ${color("bright", "Details")}
+- Copy the ${color("bright", "ID")}
+`);
 
-1. Open your browser and go to: ${color("cyan", "chrome://extensions")}
-   (or ${color("cyan", "brave://extensions")}, ${color("cyan", "arc://extensions")}, etc.)
+  const extensionId = await ask(color("bright", "Paste Extension ID: "));
+  if (!/^[a-p]{32}$/i.test(extensionId)) {
+    warn("That doesn't look like a Chrome extension ID (expected 32 chars a-p). Continuing anyway.");
+  }
 
-2. Enable ${color("bright", "Developer mode")} (toggle in top right)
+  header("Step 5: Install Local Host + Broker");
 
-3. Click ${color("bright", "Load unpacked")}
+  const brokerSrc = join(PACKAGE_ROOT, "bin", "broker.cjs");
+  const nativeHostSrc = join(PACKAGE_ROOT, "bin", "native-host.cjs");
 
-4. Select this folder:
-   ${color("cyan", extensionDir)}
-   ${os === "darwin" ? color("yellow", "Tip: Press Cmd+Shift+G and paste the path above") : ""}
-`);
+  copyFileSync(brokerSrc, BROKER_DST);
+  copyFileSync(nativeHostSrc, NATIVE_HOST_DST);
 
-  await ask(color("bright", "Press Enter when you've loaded the extension..."));
+  try {
+    chmodSync(BROKER_DST, 0o755);
+  } catch {}
+  try {
+    chmodSync(NATIVE_HOST_DST, 0o755);
+  } catch {}
 
-  header("Step 4: Configure OpenCode");
+  success(`Installed broker: ${BROKER_DST}`);
+  success(`Installed native host: ${NATIVE_HOST_DST}`);
 
-  const pluginConfig = `{
-  "$schema": "https://opencode.ai/config.json",
-  "plugin": ["@different-ai/opencode-browser"]
-}`;
+  saveConfig({ extensionId, installedAt: new Date().toISOString() });
 
-  log(`
-Add the plugin to your ${color("cyan", "opencode.json")}:
+  header("Step 6: Register Native Messaging Host");
 
-${color("bright", pluginConfig)}
+  const hostDirs = getNativeHostDirs(osName);
+  for (const dir of hostDirs) {
+    try {
+      writeNativeHostManifest(dir, extensionId);
+      success(`Wrote native host manifest: ${nativeHostManifestPath(dir)}`);
+    } catch (e) {
+      warn(`Could not write native host manifest to: ${dir}`);
+    }
+  }
 
-Or if you already have an opencode.json, just add to the "plugin" array:
-${color("bright", '"plugin": ["@different-ai/opencode-browser"]')}
-`);
+  header("Step 7: Configure OpenCode");
 
   const opencodeJsonPath = join(process.cwd(), "opencode.json");
 
-  if (existsSync(opencodeJsonPath)) {
-    const shouldUpdate = await confirm(`Found opencode.json. Add plugin automatically?`);
+  const desiredPlugin = "@different-ai/opencode-browser";
 
+  if (existsSync(opencodeJsonPath)) {
+    const shouldUpdate = await confirm("Found opencode.json. Add plugin automatically?");
     if (shouldUpdate) {
       try {
         const config = JSON.parse(readFileSync(opencodeJsonPath, "utf-8"));
         config.plugin = config.plugin || [];
-        if (!config.plugin.includes("@different-ai/opencode-browser")) {
-          config.plugin.push("@different-ai/opencode-browser");
-        }
-        // Remove old MCP config if present
+        if (!Array.isArray(config.plugin)) config.plugin = [];
+        if (!config.plugin.includes(desiredPlugin)) config.plugin.push(desiredPlugin);
+
+        // Remove MCP config if present
         if (config.mcp?.browser) {
           delete config.mcp.browser;
-          if (Object.keys(config.mcp).length === 0) {
-            delete config.mcp;
-          }
+          if (Object.keys(config.mcp).length === 0) delete config.mcp;
           warn("Removed old MCP browser config (replaced by plugin)");
         }
+
         writeFileSync(opencodeJsonPath, JSON.stringify(config, null, 2) + "\n");
         success("Updated opencode.json with plugin");
       } catch (e) {
         error(`Failed to update opencode.json: ${e.message}`);
-        log("Please add the plugin manually.");
       }
     }
   } else {
-    const shouldCreate = await confirm(`No opencode.json found. Create one?`);
-
+    const shouldCreate = await confirm("No opencode.json found. Create one?");
     if (shouldCreate) {
-      try {
-        const config = {
-          $schema: "https://opencode.ai/config.json",
-          plugin: ["@different-ai/opencode-browser"],
-        };
-        writeFileSync(opencodeJsonPath, JSON.stringify(config, null, 2) + "\n");
-        success("Created opencode.json with plugin");
-      } catch (e) {
-        error(`Failed to create opencode.json: ${e.message}`);
-      }
-    }
-  }
-
-  // Clean up old daemon if present
-  header("Step 5: Cleanup (v1.x migration)");
-
-  const oldDaemonPlist = join(homedir(), "Library", "LaunchAgents", "com.opencode.browser-daemon.plist");
-  if (existsSync(oldDaemonPlist)) {
-    try {
-      execSync(`launchctl unload "${oldDaemonPlist}" 2>/dev/null || true`, { stdio: "ignore" });
-      unlinkSync(oldDaemonPlist);
-      success("Removed old daemon (no longer needed in v2.0)");
-    } catch {
-      warn("Could not remove old daemon plist. Remove manually if needed.");
+      const config = { $schema: "https://opencode.ai/config.json", plugin: [desiredPlugin] };
+      writeFileSync(opencodeJsonPath, JSON.stringify(config, null, 2) + "\n");
+      success("Created opencode.json with plugin");
     }
-  } else {
-    success("No old daemon to clean up");
   }
 
   header("Installation Complete!");
 
   log(`
-${color("green", "")} Extension: ${extensionDir}
-${color("green", "")} Plugin: @different-ai/opencode-browser
-
-${color("bright", "How it works:")}
-  1. OpenCode loads the plugin on startup
-  2. Plugin starts WebSocket server on port 19222
-  3. Chrome extension connects automatically
-  4. Browser tools are available!
-
-${color("bright", "Available tools:")}
-  browser_status      - Check if browser is available
-  browser_kill_session - Take over from another session
-  browser_navigate    - Go to a URL
-  browser_click       - Click an element
-  browser_type        - Type into an input
-  browser_screenshot  - Capture the page
-  browser_snapshot    - Get accessibility tree
-  browser_get_tabs    - List open tabs
-  browser_scroll      - Scroll the page
-  browser_wait        - Wait for duration
-  browser_execute     - Run JavaScript
-
-${color("bright", "Multi-session:")}
-  Only one OpenCode session can use browser at a time.
-  Use browser_status to check, browser_kill_session to take over.
-
-${color("bright", "Test it:")}
-  Restart OpenCode and try: ${color("cyan", '"Check browser status"')}
+${color("bright", "What happens now:")}
+  - The extension connects to the native host automatically.
+  - OpenCode loads the plugin, which talks to the broker.
+  - The broker enforces ${color("bright", "per-tab ownership")}. First touch auto-claims.
+
+${color("bright", "Try it:")}
+  Restart OpenCode and run: ${color("cyan", "browser_get_tabs")}
 `);
 }
 
 async function status() {
-  header("Browser Lock Status");
+  header("Status");
 
-  const lockFile = join(homedir(), ".opencode-browser", "lock.json");
+  success(`Base dir: ${BASE_DIR}`);
+  success(`Extension dir present: ${existsSync(EXTENSION_DIR)}`);
+  success(`Broker installed: ${existsSync(BROKER_DST)}`);
+  success(`Native host installed: ${existsSync(NATIVE_HOST_DST)}`);
 
-  if (!existsSync(lockFile)) {
-    success("Browser available (no lock file)");
-    return;
+  const cfg = loadConfig();
+  if (cfg?.extensionId) {
+    success(`Configured extension ID: ${cfg.extensionId}`);
+  } else {
+    warn("No config.json found (run install)");
   }
 
-  try {
-    const lock = JSON.parse(readFileSync(lockFile, "utf-8"));
-    log(`
-Lock file: ${lockFile}
-
-PID: ${lock.pid}
-Session: ${lock.sessionId}
-Started: ${lock.startedAt}
-Working directory: ${lock.cwd}
-`);
-
-    // Check if process is alive
-    try {
-      process.kill(lock.pid, 0);
-      warn(`Process ${lock.pid} is running. Browser is locked.`);
-    } catch {
-      success(`Process ${lock.pid} is dead. Lock is stale and will be auto-cleaned.`);
+  const osName = platform();
+  const hostDirs = getNativeHostDirs(osName);
+  let foundAny = false;
+  for (const dir of hostDirs) {
+    const p = nativeHostManifestPath(dir);
+    if (existsSync(p)) {
+      foundAny = true;
+      success(`Native host manifest: ${p}`);
     }
-  } catch (e) {
-    error(`Could not read lock file: ${e.message}`);
+  }
+  if (!foundAny) {
+    warn("No native host manifest found. Run: npx @different-ai/opencode-browser install");
   }
 }
 
 async function uninstall() {
-  header("Uninstalling OpenCode Browser");
+  header("Uninstall");
 
-  // Remove old daemon
-  const os = platform();
-  if (os === "darwin") {
-    const plistPath = join(homedir(), "Library", "LaunchAgents", "com.opencode.browser-daemon.plist");
-    if (existsSync(plistPath)) {
-      try {
-        execSync(`launchctl unload "${plistPath}" 2>/dev/null || true`, { stdio: "ignore" });
-        unlinkSync(plistPath);
-        success("Removed daemon plist");
-      } catch {}
+  const osName = platform();
+  const hostDirs = getNativeHostDirs(osName);
+  for (const dir of hostDirs) {
+    const p = nativeHostManifestPath(dir);
+    if (!existsSync(p)) continue;
+    try {
+      unlinkSync(p);
+      success(`Removed native host manifest: ${p}`);
+    } catch {
+      warn(`Could not remove: ${p}`);
     }
   }
 
-  // Remove native host registration (v1.x)
-  const nativeHostDir =
-    os === "darwin"
-      ? join(homedir(), "Library", "Application Support", "Google", "Chrome", "NativeMessagingHosts")
-      : join(homedir(), ".config", "google-chrome", "NativeMessagingHosts");
-
-  const manifestPath = join(nativeHostDir, "com.opencode.browser_automation.json");
-  if (existsSync(manifestPath)) {
-    unlinkSync(manifestPath);
-    success("Removed native host registration");
-  }
-
-  // Remove lock file
-  const lockFile = join(homedir(), ".opencode-browser", "lock.json");
-  if (existsSync(lockFile)) {
-    unlinkSync(lockFile);
-    success("Removed lock file");
+  for (const p of [BROKER_DST, NATIVE_HOST_DST, CONFIG_DST, join(BASE_DIR, "broker.sock")]) {
+    if (!existsSync(p)) continue;
+    try {
+      unlinkSync(p);
+      success(`Removed: ${p}`);
+    } catch {
+      // ignore
+    }
   }
 
   log(`
-${color("bright", "Note:")} Extension files at ~/.opencode-browser/ were not removed.
-Remove manually if needed:
-  rm -rf ~/.opencode-browser/
-
-Also remove "@different-ai/opencode-browser" from your opencode.json plugin array.
+${color("bright", "Note:")}
+- The unpacked extension folder remains at: ${EXTENSION_DIR}
+- Remove it manually in ${color("cyan", "chrome://extensions")}
+- Remove ${color("bright", "@different-ai/opencode-browser")} from your opencode.json plugin list if desired.
 `);
 }
 
 main().catch((e) => {
-  error(e.message);
+  error(e.message || String(e));
   process.exit(1);
 });

package/bin/native-host.cjs

@@ -0,0 +1,136 @@
+#!/usr/bin/env node
+"use strict";
+
+// Chrome Native Messaging host for OpenCode Browser.
+// Speaks length-prefixed JSON over stdin/stdout and forwards messages to the local broker over a unix socket.
+
+const net = require("net");
+const fs = require("fs");
+const os = require("os");
+const path = require("path");
+const { spawn } = require("child_process");
+
+const BASE_DIR = path.join(os.homedir(), ".opencode-browser");
+const SOCKET_PATH = path.join(BASE_DIR, "broker.sock");
+const BROKER_PATH = path.join(BASE_DIR, "broker.cjs");
+
+fs.mkdirSync(BASE_DIR, { recursive: true });
+
+function createJsonLineParser(onMessage) {
+  let buffer = "";
+  return (chunk) => {
+    buffer += chunk.toString("utf8");
+    while (true) {
+      const idx = buffer.indexOf("\n");
+      if (idx === -1) return;
+      const line = buffer.slice(0, idx);
+      buffer = buffer.slice(idx + 1);
+      if (!line.trim()) continue;
+      try {
+        onMessage(JSON.parse(line));
+      } catch {
+        // ignore
+      }
+    }
+  };
+}
+
+function writeJsonLine(socket, msg) {
+  socket.write(JSON.stringify(msg) + "\n");
+}
+
+function maybeStartBroker() {
+  try {
+    if (!fs.existsSync(BROKER_PATH)) return;
+    const child = spawn(process.execPath, [BROKER_PATH], { detached: true, stdio: "ignore" });
+    child.unref();
+  } catch {
+    // ignore
+  }
+}
+
+async function connectToBroker() {
+  return await new Promise((resolve, reject) => {
+    const socket = net.createConnection(SOCKET_PATH);
+    socket.once("connect", () => resolve(socket));
+    socket.once("error", (err) => reject(err));
+  });
+}
+
+async function ensureBroker() {
+  try {
+    return await connectToBroker();
+  } catch {
+    maybeStartBroker();
+    for (let i = 0; i < 50; i++) {
+      await new Promise((r) => setTimeout(r, 100));
+      try {
+        return await connectToBroker();
+      } catch {}
+    }
+    throw new Error("Could not connect to broker");
+  }
+}
+
+// --- Native messaging framing ---
+let stdinBuffer = Buffer.alloc(0);
+
+function writeNativeMessage(obj) {
+  try {
+    const payload = Buffer.from(JSON.stringify(obj), "utf8");
+    const header = Buffer.alloc(4);
+    header.writeUInt32LE(payload.length, 0);
+    process.stdout.write(Buffer.concat([header, payload]));
+  } catch (e) {
+    console.error("[native-host] write error", e);
+  }
+}
+
+function onStdinData(chunk, onMessage) {
+  stdinBuffer = Buffer.concat([stdinBuffer, chunk]);
+  while (stdinBuffer.length >= 4) {
+    const len = stdinBuffer.readUInt32LE(0);
+    if (stdinBuffer.length < 4 + len) return;
+    const body = stdinBuffer.slice(4, 4 + len);
+    stdinBuffer = stdinBuffer.slice(4 + len);
+    try {
+      onMessage(JSON.parse(body.toString("utf8")));
+    } catch {
+      // ignore
+    }
+  }
+}
+
+(async () => {
+  const broker = await ensureBroker();
+  broker.setNoDelay(true);
+  broker.on("data", createJsonLineParser((msg) => {
+    if (msg && msg.type === "to_extension" && msg.message) {
+      writeNativeMessage(msg.message);
+    }
+  }));
+
+  broker.on("close", () => {
+    process.exit(0);
+  });
+
+  broker.on("error", () => {
+    process.exit(1);
+  });
+
+  writeJsonLine(broker, { type: "hello", role: "native-host" });
+
+  process.stdin.on("data", (chunk) =>
+    onStdinData(chunk, (message) => {
+      // Forward extension-origin messages to broker.
+      writeJsonLine(broker, { type: "from_extension", message });
+    })
+  );
+
+  process.stdin.on("end", () => {
+    try {
+      broker.end();
+    } catch {}
+    process.exit(0);
+  });
+})();