@different-ai/opencode-browser 4.3.1 → 4.4.0

package/.opencode/skill/browser-automation/SKILL.md

@@ -21,9 +21,15 @@ metadata:
 3. Navigate with `browser_navigate` if needed
 4. Wait for UI using `browser_query` with `timeoutMs`
 5. Discover candidates using `browser_query` with `mode=list`
-6. Click or type using `index`
+6. Click, type, or select using `index`
 7. Confirm using `browser_query` or `browser_snapshot`
 
+## Selecting options
+
+- Use `browser_select` for native `<select>` elements
+- Prefer `value` or `label`; use `optionIndex` when needed
+- Example: `browser_select({ selector: "select", value: "plugin" })`
+
 ## Query modes
 
 - `text`: read visible text from a matched element

package/README.md

@@ -1,6 +1,6 @@
 # OpenCode Browser
 
-Browser automation plugin for [OpenCode](https://github.com/opencode-ai/opencode).
+Browser automation plugin for [OpenCode](https://opencode.ai).
 
 Control your real Chromium browser (Chrome/Brave/Arc/Edge) using your existing profile (logins, cookies, bookmarks). No DevTools Protocol, no security prompts.
 
@@ -34,11 +34,15 @@ The installer will:
 
 1. Copy the extension to `~/.opencode-browser/extension/`
 2. Walk you through loading + pinning it in `chrome://extensions`
-3. Ask for the extension ID and install a **Native Messaging Host manifest**
+3. Resolve a fixed extension ID (no copy/paste) and install a **Native Messaging Host manifest**
 4. Update your `opencode.json` or `opencode.jsonc` to load the plugin
 
+To override the extension ID, pass `--extension-id <id>` or set `OPENCODE_BROWSER_EXTENSION_ID`.
+
 ### Configure OpenCode
 
+> Note: if you run the installer you'll be prompted to include this automatically. If you said "yes", you can skip this part.
+
 Your `opencode.json` or `opencode.jsonc` should contain:
 
 ```json
@@ -48,6 +52,12 @@ Your `opencode.json` or `opencode.jsonc` should contain:
 }
 ```
 
+### Update
+
+```bash
+bunx @different-ai/opencode-browser@latest update
+```
+
 ## How it works
 
 ```
@@ -58,6 +68,47 @@ OpenCode Plugin <-> Local Broker (unix socket) <-> Native Host <-> Chrome Extens
 - The plugin talks to the broker over a local unix socket.
 - The broker forwards tool requests to the extension and enforces tab ownership.
 
+## Agent Browser mode (alpha)
+
+This branch adds an alternate backend powered by `agent-browser` (Playwright). It runs headless and does **not** reuse your existing Chrome profile.
+
+### Enable locally
+
+1. Install `agent-browser` and Chromium:
+
+```bash
+npm install -g agent-browser
+agent-browser install
+```
+
+2. Set the backend mode:
+
+```bash
+export OPENCODE_BROWSER_BACKEND=agent
+```
+
+Optional overrides:
+- `OPENCODE_BROWSER_AGENT_SESSION` (custom session name)
+- `OPENCODE_BROWSER_AGENT_SOCKET` (unix socket path)
+- `OPENCODE_BROWSER_AGENT_AUTOSTART=0` (disable auto-start)
+- `OPENCODE_BROWSER_AGENT_DAEMON` (explicit daemon path)
+
+### Tailnet/remote host
+
+On the host (e.g., `home-server.taild435d7.ts.net`), run the TCP gateway:
+
+```bash
+OPENCODE_BROWSER_AGENT_GATEWAY_PORT=9833 node bin/agent-gateway.cjs
+```
+
+On the client:
+
+```bash
+export OPENCODE_BROWSER_BACKEND=agent
+export OPENCODE_BROWSER_AGENT_HOST=home-server.taild435d7.ts.net
+export OPENCODE_BROWSER_AGENT_PORT=9833
+```
+
 ## Per-tab ownership
 
 - First time a session touches a tab, the broker **auto-claims** it for that session.
@@ -72,12 +123,20 @@ Core primitives:
 - `browser_open_tab`
 - `browser_navigate`
 - `browser_query` (modes: `text`, `value`, `list`, `exists`, `page_text`; optional `timeoutMs`/`pollMs`)
-- `browser_click`
-- `browser_type`
-- `browser_select`
-- `browser_scroll`
+- `browser_click` (optional `timeoutMs`/`pollMs`)
+- `browser_type` (optional `timeoutMs`/`pollMs`)
+- `browser_select` (optional `timeoutMs`/`pollMs`)
+- `browser_scroll` (optional `timeoutMs`/`pollMs`)
 - `browser_wait`
 
+Selector helpers (usable in `selector`):
+- `label:Mailing Address: City`
+- `aria:Principal Address: City`
+- `placeholder:Search`, `name:email`, `role:button`, `text:Submit`
+- `css:label:has(input)` to force CSS
+
+Selector-based tools wait up to 2000ms by default; set `timeoutMs: 0` to disable.
+
 Diagnostics:
 - `browser_snapshot`
 - `browser_screenshot`
@@ -95,7 +154,7 @@ Diagnostics:
 
 **Extension says native host not available**
 - Re-run `npx @different-ai/opencode-browser install`
-- Confirm the extension ID you pasted matches the loaded extension in `chrome://extensions`
+- If you loaded a custom extension ID, rerun with `--extension-id <id>`
 
 **Tab ownership errors**
 - Use `browser_status` to see current claims

package/bin/agent-gateway.cjs

@@ -0,0 +1,129 @@
+#!/usr/bin/env node
+"use strict";
+
+const net = require("net");
+const os = require("os");
+const path = require("path");
+const { spawn } = require("child_process");
+
+const session =
+  (process.env.OPENCODE_BROWSER_AGENT_SESSION || process.env.AGENT_BROWSER_SESSION || "default").trim();
+const socketPath =
+  process.env.OPENCODE_BROWSER_AGENT_SOCKET || path.join(os.tmpdir(), `agent-browser-${session}.sock`);
+
+function getPortForSession(name) {
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = (hash << 5) - hash + name.charCodeAt(i);
+    hash |= 0;
+  }
+  return 49152 + (Math.abs(hash) % 16383);
+}
+
+const host = process.env.OPENCODE_BROWSER_AGENT_GATEWAY_HOST || process.env.OPENCODE_BROWSER_AGENT_HOST || "0.0.0.0";
+const port =
+  Number(process.env.OPENCODE_BROWSER_AGENT_GATEWAY_PORT || process.env.OPENCODE_BROWSER_AGENT_PORT) ||
+  getPortForSession(session);
+
+function resolveDaemonPath() {
+  const override = process.env.OPENCODE_BROWSER_AGENT_DAEMON;
+  if (override) return override;
+  try {
+    return require.resolve("agent-browser/dist/daemon.js");
+  } catch {
+    return null;
+  }
+}
+
+function shouldAutoStart() {
+  const autoStart = (process.env.OPENCODE_BROWSER_AGENT_AUTOSTART || "").toLowerCase();
+  return !["0", "false", "no"].includes(autoStart);
+}
+
+function startDaemon() {
+  if (!shouldAutoStart()) return;
+  const daemonPath = resolveDaemonPath();
+  if (!daemonPath) {
+    console.error("[agent-gateway] agent-browser dependency not found.");
+    return;
+  }
+  try {
+    const child = spawn(process.execPath, [daemonPath], {
+      detached: true,
+      stdio: "ignore",
+      env: {
+        ...process.env,
+        AGENT_BROWSER_SESSION: session,
+        AGENT_BROWSER_DAEMON: "1",
+      },
+    });
+    child.unref();
+  } catch (err) {
+    console.error("[agent-gateway] Failed to start daemon:", err?.message || err);
+  }
+}
+
+async function sleep(ms) {
+  return await new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+async function connectAgentSocket() {
+  return await new Promise((resolve, reject) => {
+    const socket = net.createConnection(socketPath);
+    socket.once("connect", () => resolve(socket));
+    socket.once("error", (err) => reject(err));
+  });
+}
+
+async function createAgentConnection() {
+  try {
+    return await connectAgentSocket();
+  } catch {
+    startDaemon();
+    for (let attempt = 0; attempt < 20; attempt++) {
+      await sleep(100);
+      try {
+        return await connectAgentSocket();
+      } catch {}
+    }
+    throw new Error(`Could not connect to agent-browser socket at ${socketPath}`);
+  }
+}
+
+const server = net.createServer(async (client) => {
+  let upstream = null;
+  try {
+    upstream = await createAgentConnection();
+  } catch (err) {
+    client.end();
+    console.error("[agent-gateway] Connection failed:", err?.message || err);
+    return;
+  }
+
+  client.pipe(upstream);
+  upstream.pipe(client);
+
+  const close = () => {
+    try {
+      client.destroy();
+    } catch {}
+    try {
+      upstream.destroy();
+    } catch {}
+  };
+
+  client.on("error", close);
+  upstream.on("error", close);
+  client.on("close", close);
+  upstream.on("close", close);
+});
+
+server.on("error", (err) => {
+  console.error("[agent-gateway] Server error:", err?.message || err);
+  process.exit(1);
+});
+
+server.listen(port, host, () => {
+  console.log(`[agent-gateway] Listening on ${host}:${port}`);
+  console.log(`[agent-gateway] Proxying to ${socketPath}`);
+});

package/bin/cli.js

@@ -26,7 +26,8 @@ import { join, dirname } from "path";
 import { fileURLToPath } from "url";
 import { createInterface } from "readline";
 import { createConnection } from "net";
-import { execSync } from "child_process";
+import { execSync, spawn } from "child_process";
+import { createHash } from "crypto";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -34,6 +35,7 @@ const PACKAGE_ROOT = join(__dirname, "..");
 
 const BASE_DIR = join(homedir(), ".opencode-browser");
 const EXTENSION_DIR = join(BASE_DIR, "extension");
+const EXTENSION_MANIFEST_PATH = join(PACKAGE_ROOT, "extension", "manifest.json");
 const BROKER_DST = join(BASE_DIR, "broker.cjs");
 const NATIVE_HOST_DST = join(BASE_DIR, "native-host.cjs");
 const NATIVE_HOST_WRAPPER = join(BASE_DIR, "host-wrapper.sh");
@@ -92,6 +94,84 @@ async function confirm(question) {
   return answer.toLowerCase() === "y" || answer.toLowerCase() === "yes";
 }
 
+function getFlagValue(flag) {
+  const index = process.argv.findIndex((arg) => arg === flag || arg.startsWith(`${flag}=`));
+  if (index === -1) return null;
+  const arg = process.argv[index];
+  if (arg.includes("=")) return arg.slice(arg.indexOf("=") + 1).trim() || null;
+  const next = process.argv[index + 1];
+  if (!next || next.startsWith("-")) return null;
+  return next.trim();
+}
+
+function getExtensionIdOverride() {
+  const cliValue = getFlagValue("--extension-id") || getFlagValue("-e");
+  if (cliValue) return cliValue;
+  const envValue = process.env.OPENCODE_BROWSER_EXTENSION_ID;
+  return envValue ? envValue.trim() : null;
+}
+
+function readExtensionManifest() {
+  try {
+    if (!existsSync(EXTENSION_MANIFEST_PATH)) return null;
+    return JSON.parse(readFileSync(EXTENSION_MANIFEST_PATH, "utf-8"));
+  } catch {
+    return null;
+  }
+}
+
+function computeExtensionIdFromKey(key) {
+  try {
+    const raw = String(key || "").trim();
+    if (!raw) return null;
+    const buffer = Buffer.from(raw, "base64");
+    if (!buffer.length) return null;
+    const hash = createHash("sha256").update(buffer).digest();
+    const bytes = hash.subarray(0, 16);
+    return Array.from(bytes)
+      .map((b) => {
+        const hi = b >> 4;
+        const lo = b & 15;
+        return String.fromCharCode(97 + hi) + String.fromCharCode(97 + lo);
+      })
+      .join("");
+  } catch {
+    return null;
+  }
+}
+
+function getExtensionIdFromManifest() {
+  const manifest = readExtensionManifest();
+  if (!manifest?.key) return null;
+  return computeExtensionIdFromKey(manifest.key);
+}
+
+async function resolveExtensionId({ allowPrompt = true, preferConfig = false } = {}) {
+  const override = getExtensionIdOverride();
+  if (override) return { id: override, source: "override" };
+
+  const config = loadConfig();
+  if (preferConfig && config?.extensionId) {
+    return { id: config.extensionId, source: "config" };
+  }
+
+  const manifestId = getExtensionIdFromManifest();
+  if (manifestId) {
+    return { id: manifestId, source: "manifest" };
+  }
+
+  if (!preferConfig && config?.extensionId) {
+    return { id: config.extensionId, source: "config" };
+  }
+
+  if (!allowPrompt) {
+    return { id: null, source: "missing" };
+  }
+
+  const extensionId = await ask(color("bright", "Paste Extension ID: "));
+  return { id: extensionId || null, source: extensionId ? "prompt" : "missing" };
+}
+
 function ensureDir(p) {
   mkdirSync(p, { recursive: true });
 }
@@ -256,21 +336,38 @@ ${color("cyan", "Browser automation plugin (native messaging + per-tab ownership
 
   if (command === "install") {
     await install();
+  } else if (command === "update") {
+    await update();
   } else if (command === "uninstall") {
     await uninstall();
   } else if (command === "status") {
     await status();
+  } else if (command === "agent-install") {
+    await agentInstall();
+  } else if (command === "agent-gateway") {
+    await agentGateway();
   } else {
     log(`
 ${color("bright", "Usage:")}
   npx @different-ai/opencode-browser install
+  npx @different-ai/opencode-browser update
   npx @different-ai/opencode-browser status
   npx @different-ai/opencode-browser uninstall
+  npx @different-ai/opencode-browser agent-install
+  npx @different-ai/opencode-browser agent-gateway
+
+${color("bright", "Options:")}
+  --extension-id <id> (or OPENCODE_BROWSER_EXTENSION_ID)
 
 ${color("bright", "Quick Start:")}
   1. Run: npx @different-ai/opencode-browser install
   2. Restart OpenCode
   3. Use: browser_navigate / browser_click / browser_snapshot
+
+${color("bright", "Agent Mode:")}
+  1. Run: npx @different-ai/opencode-browser agent-install
+  2. Set OPENCODE_BROWSER_BACKEND=agent
+  3. Optionally run: npx @different-ai/opencode-browser agent-gateway
 `);
   }
 
@@ -311,9 +408,13 @@ After loading, ${color("bright", "pin the extension")}: open the Extensions menu
 
   await ask(color("bright", "Press Enter when you've loaded and pinned the extension..."));
 
-  header("Step 4: Get Extension ID");
+  header("Step 4: Extension ID");
 
-  log(`
+  let resolved = await resolveExtensionId({ allowPrompt: false, preferConfig: true });
+  let extensionId = resolved.id;
+
+  if (!extensionId) {
+    log(`
 We need the extension ID to register the native messaging host.
 
 Find it at ${color("cyan", "chrome://extensions")}:
@@ -322,7 +423,22 @@ Find it at ${color("cyan", "chrome://extensions")}:
 - Copy the ${color("bright", "ID")}
 `);
 
-  const extensionId = await ask(color("bright", "Paste Extension ID: "));
+    resolved = await resolveExtensionId({ allowPrompt: true, preferConfig: false });
+    extensionId = resolved.id;
+  } else if (resolved.source === "manifest") {
+    success(`Using fixed extension ID from manifest: ${extensionId}`);
+    log(`If you already loaded a different ID, rerun with --extension-id to override.`);
+  } else if (resolved.source === "config") {
+    success(`Using extension ID from config.json: ${extensionId}`);
+  } else if (resolved.source === "override") {
+    success(`Using extension ID override: ${extensionId}`);
+  }
+
+  if (!extensionId) {
+    error("Extension ID is required to continue.");
+    process.exit(1);
+  }
+
   if (!/^[a-p]{32}$/i.test(extensionId)) {
     warn("That doesn't look like a Chrome extension ID (expected 32 chars a-p). Continuing anyway.");
   }
@@ -539,10 +655,114 @@ Open Chrome and:
  ${color("bright", "Try it:")}
   Restart OpenCode and run: ${color("cyan", "browser_get_tabs")}
  `);
+ }
+
+async function update() {
+  header("Update: Check Platform");
+
+  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: ${osName === "darwin" ? "macOS" : "Linux"}`);
+
+  header("Step 1: Copy Extension Files");
+
+  ensureDir(BASE_DIR);
+  const srcExtensionDir = join(PACKAGE_ROOT, "extension");
+  copyDirRecursive(srcExtensionDir, EXTENSION_DIR);
+  success(`Extension files copied to: ${EXTENSION_DIR}`);
+
+  header("Step 2: Resolve Extension ID");
+
+  let resolved = await resolveExtensionId({ allowPrompt: false, preferConfig: true });
+  let extensionId = resolved.id;
+
+  if (!extensionId) {
+    log(`
+We need the extension ID to register the native messaging host.
+
+Find it at ${color("cyan", "chrome://extensions")}:
+- Locate ${color("bright", "OpenCode Browser Automation")}
+- Click ${color("bright", "Details")}
+- Copy the ${color("bright", "ID")}
+`);
+
+    resolved = await resolveExtensionId({ allowPrompt: true, preferConfig: false });
+    extensionId = resolved.id;
+  } else if (resolved.source === "manifest") {
+    success(`Using fixed extension ID from manifest: ${extensionId}`);
+  } else if (resolved.source === "config") {
+    success(`Using extension ID from config.json: ${extensionId}`);
+  } else if (resolved.source === "override") {
+    success(`Using extension ID override: ${extensionId}`);
+  }
+
+  if (!extensionId) {
+    error("Extension ID is required to continue.");
+    process.exit(1);
+  }
+
+  if (!/^[a-p]{32}$/i.test(extensionId)) {
+    warn("That doesn't look like a Chrome extension ID (expected 32 chars a-p). Continuing anyway.");
+  }
+
+  const manifestId = getExtensionIdFromManifest();
+  if (resolved.source === "config" && manifestId && manifestId !== extensionId) {
+    warn(`Manifest key implies ${manifestId}, but config.json uses ${extensionId}. Run update with --extension-id ${manifestId} to switch.`);
+  }
+
+  header("Step 3: Install Local Host + Broker");
+
+  const brokerSrc = join(PACKAGE_ROOT, "bin", "broker.cjs");
+  const nativeHostSrc = join(PACKAGE_ROOT, "bin", "native-host.cjs");
+
+  copyFileSync(brokerSrc, BROKER_DST);
+  copyFileSync(nativeHostSrc, NATIVE_HOST_DST);
+
+  try {
+    chmodSync(BROKER_DST, 0o755);
+  } catch {}
+  try {
+    chmodSync(NATIVE_HOST_DST, 0o755);
+  } catch {}
+
+  success(`Updated broker: ${BROKER_DST}`);
+  success(`Updated native host: ${NATIVE_HOST_DST}`);
+
+  const nodePath = resolveNodePath();
+  if (!/node(\.exe)?$/.test(nodePath)) {
+    warn(`Node not detected; using ${nodePath}. Set OPENCODE_BROWSER_NODE if needed.`);
+  }
+  const hostPath = writeHostWrapper(nodePath);
+  success(`Updated host wrapper: ${hostPath}`);
+
+  saveConfig({ extensionId, installedAt: new Date().toISOString(), nodePath });
+
+  header("Step 4: Register Native Messaging Host");
+
+  const hostDirs = getNativeHostDirs(osName);
+  for (const dir of hostDirs) {
+    try {
+      writeNativeHostManifest(dir, extensionId, hostPath);
+      success(`Wrote native host manifest: ${nativeHostManifestPath(dir)}`);
+    } catch {
+      warn(`Could not write native host manifest to: ${dir}`);
+    }
+  }
+
+  header("Update Complete!");
+
+  log(`
+ Reload the extension in ${color("cyan", "chrome://extensions")} and restart OpenCode.
+ `);
 }
 
 
 async function status() {
+
   header("Status");
 
   success(`Base dir: ${BASE_DIR}`);
@@ -558,6 +778,11 @@ async function status() {
     warn("No config.json found (run install)");
   }
 
+  const manifestId = getExtensionIdFromManifest();
+  if (manifestId) {
+    success(`Fixed extension ID (manifest): ${manifestId}`);
+  }
+
   if (cfg?.nodePath) {
     success(`Node path: ${cfg.nodePath}`);
   }
@@ -577,6 +802,31 @@ async function status() {
   }
 }
 
+async function agentInstall() {
+  header("Agent Browser Install");
+
+  const extraArgs = process.argv.slice(3).join(" ");
+  const command = `npx agent-browser install ${extraArgs}`.trim();
+  try {
+    execSync(command, { stdio: "inherit" });
+    success("agent-browser install completed.");
+  } catch (err) {
+    error(`agent-browser install failed: ${err?.message || err}`);
+  }
+}
+
+async function agentGateway() {
+  header("Agent Browser Gateway");
+
+  const gatewayPath = join(PACKAGE_ROOT, "bin", "agent-gateway.cjs");
+  success(`Starting gateway: ${gatewayPath}`);
+
+  await new Promise((resolve) => {
+    const child = spawn(process.execPath, [gatewayPath], { stdio: "inherit" });
+    child.on("exit", resolve);
+  });
+}
+
 async function uninstall() {
   header("Uninstall");
 

package/bin/tool-test.ts

@@ -0,0 +1,35 @@
+import plugin from "../dist/plugin.js";
+
+const toolName = process.argv[2] ?? "browser_status";
+const rawArgs = process.argv[3];
+
+let args: Record<string, unknown> = {};
+if (rawArgs) {
+  try {
+    args = JSON.parse(rawArgs);
+  } catch (error) {
+    console.error("Args must be valid JSON.");
+    console.error(String(error));
+    process.exit(1);
+  }
+}
+
+try {
+  const pluginInstance = await (plugin as any)({});
+  const tool = pluginInstance?.tool?.[toolName];
+  if (!tool) {
+    console.error(`Tool not found: ${toolName}`);
+    process.exit(1);
+  }
+
+  const result = await tool.execute(args, {});
+  if (typeof result === "string") {
+    console.log(result);
+  } else {
+    console.log(JSON.stringify(result, null, 2));
+  }
+  process.exit(0);
+} catch (error) {
+  console.error(String(error));
+  process.exit(1);
+}