@different-ai/opencode-browser 2.0.2 → 3.0.0

package/README.md

@@ -1,6 +1,6 @@
 # OpenCode Browser
 
-Browser automation plugin for [OpenCode](https://github.com/opencode-ai/opencode).
+Browser automation MCP server for [OpenCode](https://github.com/opencode-ai/opencode).
 
 Control your real Chrome browser with existing logins, cookies, and bookmarks. No DevTools Protocol, no security prompts.
 
@@ -8,7 +8,7 @@ Control your real Chrome browser with existing logins, cookies, and bookmarks. N
 
 Chrome 136+ blocks `--remote-debugging-port` on your default profile for security reasons. DevTools-based automation (like Playwright) triggers a security prompt every time.
 
-OpenCode Browser uses a simple WebSocket connection between an OpenCode plugin and a Chrome extension. Your automation works with your existing browser session - no prompts, no separate profiles.
+OpenCode Browser uses a simple WebSocket connection between an MCP server and a Chrome extension. Your automation works with your existing browser session - no prompts, no separate profiles.
 
 ## Installation
 
@@ -19,7 +19,7 @@ npx @different-ai/opencode-browser install
 The installer will:
 1. Copy the extension to `~/.opencode-browser/extension/`
 2. Guide you to load the extension in Chrome
-3. Update your `opencode.json` to use the plugin
+3. Update your `opencode.json` with MCP server config
 
 ## Configuration
 
@@ -27,7 +27,12 @@ Add to your `opencode.json`:
 
 ```json
 {
-  "plugin": ["@different-ai/opencode-browser"]
+  "mcp": {
+    "browser": {
+      "type": "local",
+      "command": ["bunx", "@different-ai/opencode-browser", "serve"]
+    }
+  }
 }
 ```
 
@@ -40,59 +45,65 @@ Then load the extension in Chrome:
 
 | Tool | Description |
 |------|-------------|
-| `browser_status` | Check if browser is available or locked |
-| `browser_kill_session` | Take over from another OpenCode session |
+| `browser_status` | Check if browser extension is connected |
 | `browser_navigate` | Navigate to a URL |
 | `browser_click` | Click an element by CSS selector |
 | `browser_type` | Type text into an input field |
-| `browser_screenshot` | Capture the visible page |
-| `browser_snapshot` | Get accessibility tree with selectors |
+| `browser_screenshot` | Capture the page (returns base64, optionally saves to file) |
+| `browser_snapshot` | Get accessibility tree with selectors + all page links |
 | `browser_get_tabs` | List all open tabs |
 | `browser_scroll` | Scroll page or element into view |
 | `browser_wait` | Wait for a duration |
 | `browser_execute` | Run JavaScript in page context |
 
-## Multi-Session Support
+### Screenshot Tool
 
-Only one OpenCode session can use the browser at a time. This prevents conflicts when you have multiple terminals open.
+The `browser_screenshot` tool returns base64 image data by default, allowing AI to view images directly:
 
-- `browser_status` - Check who has the lock
-- `browser_kill_session` - Kill the other session and take over
+```javascript
+// Returns base64 image (AI can view it)
+browser_screenshot()
 
-In your prompts, you can say:
-- "If browser is locked, kill the session and proceed"
-- "If browser is locked, skip this task"
+// Save to current working directory
+browser_screenshot({ save: true })
+
+// Save to specific path
+browser_screenshot({ path: "my-screenshot.png" })
+```
 
 ## Architecture
 
 ```
-OpenCode Plugin ◄──WebSocket:19222──► Chrome Extension
-       │                                    │
-       └── Lock file                        └── chrome.tabs, chrome.scripting
+OpenCode <──STDIO──> MCP Server <──WebSocket:19222──> Chrome Extension
+                          │                                   │
+                          └── @modelcontextprotocol/sdk       └── chrome.tabs, chrome.scripting
 ```
 
 **Two components:**
-1. OpenCode plugin (runs WebSocket server, defines tools)
-2. Chrome extension (connects to plugin, executes commands)
+1. MCP Server (runs as separate process, manages WebSocket server)
+2. Chrome extension (connects to server, executes browser commands)
 
-**No daemon. No MCP server. No native messaging host.**
+**Benefits of MCP architecture:**
+- No session conflicts between OpenCode instances
+- Server runs independently of OpenCode process
+- Clean separation of concerns
+- Standard MCP protocol
 
-## Upgrading from v1.x
+## Upgrading from v2.x (Plugin)
 
-v2.0 is a complete rewrite with a simpler architecture:
+v3.0 migrates from plugin to MCP architecture:
 
-1. Run `npx @different-ai/opencode-browser install` (cleans up old daemon automatically)
-2. Replace MCP config with plugin config in `opencode.json`:
+1. Run `npx @different-ai/opencode-browser install`
+2. Replace plugin config with MCP config in `opencode.json`:
 
 ```diff
-- "mcp": {
--   "browser": {
--     "type": "local",
--     "command": ["npx", "@different-ai/opencode-browser", "start"],
--     "enabled": true
--   }
-- }
-+ "plugin": ["@different-ai/opencode-browser"]
+- "plugin": ["@different-ai/opencode-browser"]
++ "mcp": {
++   "browser": {
++     "type": "local",
++     "command": ["bunx", "@different-ai/opencode-browser", "serve"]
++   }
++ }
 ```
 
 3. Restart OpenCode
@@ -104,13 +115,13 @@ v2.0 is a complete rewrite with a simpler architecture:
 - Check that the extension is loaded and enabled
 - Click the extension icon to see connection status
 
-**"Browser locked by another session"**
-- Use `browser_kill_session` to take over
-- Or close the other OpenCode session
-
 **"Failed to start WebSocket server"**
 - Port 19222 may be in use
-- Check if another OpenCode session is running
+- Run `lsof -i :19222` to check what's using it
+
+**"browser_execute fails on some sites"**
+- Sites with strict CSP block JavaScript execution
+- Use `browser_snapshot` to get page data instead
 
 ## Uninstall
 
@@ -123,7 +134,7 @@ Then remove the extension from Chrome and delete `~/.opencode-browser/` if desir
 ## Platform Support
 
 - macOS ✓
-- Linux ✓
+- Linux ✓  
 - Windows (not yet supported)
 
 ## License

package/bin/cli.js

@@ -1,16 +1,18 @@
 #!/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)
+ * Commands:
+ *   install  - Install Chrome extension
+ *   serve    - Run MCP server (used by OpenCode)
+ *   status   - Check connection status
  */
 
 import { existsSync, mkdirSync, writeFileSync, readFileSync, copyFileSync, readdirSync, unlinkSync } from "fs";
 import { homedir, platform } from "os";
 import { join, dirname } from "path";
 import { fileURLToPath } from "url";
-import { execSync } from "child_process";
+import { execSync, spawn } from "child_process";
 import { createInterface } from "readline";
 
 const __filename = fileURLToPath(import.meta.url);
@@ -71,33 +73,71 @@ async function confirm(question) {
 }
 
 async function main() {
-  console.log(`
-${color("cyan", color("bright", "OpenCode Browser v2.0"))}
-${color("cyan", "Browser automation for OpenCode")}
-`);
-
   const command = process.argv[2];
 
-  if (command === "install") {
+  if (command === "serve") {
+    // Run MCP server - this is called by OpenCode
+    await serve();
+  } else if (command === "install") {
+    await showHeader();
     await install();
+    rl.close();
   } else if (command === "uninstall") {
+    await showHeader();
     await uninstall();
+    rl.close();
   } else if (command === "status") {
+    await showHeader();
     await status();
+    rl.close();
   } else {
+    await showHeader();
     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 status      Check status
+  npx @different-ai/opencode-browser serve       Run MCP server (internal)
+
+${color("bright", "Quick Start:")}
+  1. Run: npx @different-ai/opencode-browser install
+  2. Add to your opencode.json:
+     ${color("cyan", `"mcp": { "browser": { "type": "local", "command": ["bunx", "@different-ai/opencode-browser", "serve"] } }`)}
+  3. Restart OpenCode
 `);
+    rl.close();
   }
+}
 
-  rl.close();
+async function showHeader() {
+  console.log(`
+${color("cyan", color("bright", "OpenCode Browser v2.1"))}
+${color("cyan", "Browser automation MCP server for OpenCode")}
+`);
+}
+
+async function serve() {
+  // Launch the MCP server
+  const serverPath = join(PACKAGE_ROOT, "src", "mcp-server.ts");
+  
+  // Use bun to run the TypeScript server
+  const child = spawn("bun", ["run", serverPath], {
+    stdio: "inherit",
+    env: process.env,
+  });
+
+  child.on("error", (err) => {
+    console.error("[browser-mcp] Failed to start server:", err);
+    process.exit(1);
+  });
+
+  child.on("exit", (code) => {
+    process.exit(code || 0);
+  });
+
+  // Forward signals to child
+  process.on("SIGINT", () => child.kill("SIGINT"));
+  process.on("SIGTERM", () => child.kill("SIGTERM"));
 }
 
 async function install() {
@@ -157,45 +197,50 @@ To load the extension:
 
   header("Step 4: Configure OpenCode");
 
-  const pluginConfig = `{
-  "$schema": "https://opencode.ai/config.json",
-  "plugin": ["@different-ai/opencode-browser"]
-}`;
+  const mcpConfig = {
+    browser: {
+      type: "local",
+      command: ["bunx", "@different-ai/opencode-browser", "serve"],
+    },
+  };
 
   log(`
-Add the plugin to your ${color("cyan", "opencode.json")}:
+Add the MCP server to your ${color("cyan", "opencode.json")}:
 
-${color("bright", pluginConfig)}
+${color("bright", JSON.stringify({ $schema: "https://opencode.ai/config.json", mcp: mcpConfig }, null, 2))}
 
-Or if you already have an opencode.json, just add to the "plugin" array:
-${color("bright", '"plugin": ["@different-ai/opencode-browser"]')}
+Or if you already have an opencode.json, add to the "mcp" object:
+${color("bright", JSON.stringify({ mcp: mcpConfig }, null, 2))}
 `);
 
   const opencodeJsonPath = join(process.cwd(), "opencode.json");
 
   if (existsSync(opencodeJsonPath)) {
-    const shouldUpdate = await confirm(`Found opencode.json. Add plugin automatically?`);
+    const shouldUpdate = await confirm(`Found opencode.json. Add MCP server 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 (config.mcp?.browser) {
-          delete config.mcp.browser;
-          if (Object.keys(config.mcp).length === 0) {
-            delete config.mcp;
+        config.mcp = config.mcp || {};
+        config.mcp.browser = mcpConfig.browser;
+        
+        // Remove old plugin config if present
+        if (config.plugin && Array.isArray(config.plugin)) {
+          const idx = config.plugin.indexOf("@different-ai/opencode-browser");
+          if (idx !== -1) {
+            config.plugin.splice(idx, 1);
+            warn("Removed old plugin entry (replaced by MCP)");
+          }
+          if (config.plugin.length === 0) {
+            delete config.plugin;
           }
-          warn("Removed old MCP browser config (replaced by plugin)");
         }
+        
         writeFileSync(opencodeJsonPath, JSON.stringify(config, null, 2) + "\n");
-        success("Updated opencode.json with plugin");
+        success("Updated opencode.json with MCP server");
       } catch (e) {
         error(`Failed to update opencode.json: ${e.message}`);
-        log("Please add the plugin manually.");
+        log("Please add the MCP config manually.");
       }
     }
   } else {
@@ -205,60 +250,69 @@ ${color("bright", '"plugin": ["@different-ai/opencode-browser"]')}
       try {
         const config = {
           $schema: "https://opencode.ai/config.json",
-          plugin: ["@different-ai/opencode-browser"],
+          mcp: mcpConfig,
         };
         writeFileSync(opencodeJsonPath, JSON.stringify(config, null, 2) + "\n");
-        success("Created opencode.json with plugin");
+        success("Created opencode.json with MCP server");
       } catch (e) {
         error(`Failed to create opencode.json: ${e.message}`);
       }
     }
   }
 
-  // Clean up old daemon if present
-  header("Step 5: Cleanup (v1.x migration)");
+  // Clean up old daemon/plugin if present
+  header("Step 5: Cleanup (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)");
+      success("Removed old daemon (no longer needed)");
     } catch {
       warn("Could not remove old daemon plist. Remove manually if needed.");
     }
-  } else {
-    success("No old daemon to clean up");
   }
 
+  // Remove old lock file
+  const oldLockFile = join(homedir(), ".opencode-browser", "lock.json");
+  if (existsSync(oldLockFile)) {
+    try {
+      unlinkSync(oldLockFile);
+      success("Removed old lock file (not needed with MCP)");
+    } catch {}
+  }
+
+  success("Cleanup complete");
+
   header("Installation Complete!");
 
   log(`
 ${color("green", "")} Extension: ${extensionDir}
-${color("green", "")} Plugin: @different-ai/opencode-browser
+${color("green", "")} MCP Server: @different-ai/opencode-browser
 
 ${color("bright", "How it works:")}
-  1. OpenCode loads the plugin on startup
-  2. Plugin starts WebSocket server on port 19222
+  1. OpenCode spawns MCP server on demand
+  2. MCP server starts WebSocket server on port 19222
   3. Chrome extension connects automatically
-  4. Browser tools are available!
+  4. Browser tools are available to any OpenCode session!
 
 ${color("bright", "Available tools:")}
-  browser_status      - Check if browser is available
-  browser_kill_session - Take over from another session
+  browser_status      - Check if browser is connected
   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_snapshot    - Get accessibility tree + all links
   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", "Benefits of MCP architecture:")}
+  - No session conflicts between OpenCode instances
+  - Server runs independently of OpenCode process
+  - Clean separation of concerns
 
 ${color("bright", "Test it:")}
   Restart OpenCode and try: ${color("cyan", '"Check browser status"')}
@@ -266,35 +320,27 @@ ${color("bright", "Test it:")}
 }
 
 async function status() {
-  header("Browser Lock Status");
-
-  const lockFile = join(homedir(), ".opencode-browser", "lock.json");
-
-  if (!existsSync(lockFile)) {
-    success("Browser available (no lock file)");
-    return;
-  }
+  header("Browser Status");
 
+  // Check if port 19222 is in use
   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 result = execSync("lsof -i :19222 2>/dev/null || true", { encoding: "utf-8" });
+    if (result.trim()) {
+      success("WebSocket server is running on port 19222");
+      log(result);
+    } else {
+      warn("WebSocket server not running (starts on demand via MCP)");
     }
-  } catch (e) {
-    error(`Could not read lock file: ${e.message}`);
+  } catch {
+    warn("Could not check port status");
+  }
+
+  // Check extension directory
+  const extensionDir = join(homedir(), ".opencode-browser", "extension");
+  if (existsSync(extensionDir)) {
+    success(`Extension installed at: ${extensionDir}`);
+  } else {
+    warn("Extension not installed. Run: npx @different-ai/opencode-browser install");
   }
 }
 
@@ -338,7 +384,7 @@ ${color("bright", "Note:")} Extension files at ~/.opencode-browser/ were not rem
 Remove manually if needed:
   rm -rf ~/.opencode-browser/
 
-Also remove "@different-ai/opencode-browser" from your opencode.json plugin array.
+Also remove the "browser" entry from your opencode.json mcp section.
 `);
 }
 

package/extension/background.js

@@ -215,7 +215,8 @@ async function toolSnapshot({ tabId }) {
         if (rect.width > 0 && rect.height > 0 && (isInteractive || el.innerText?.trim())) {
           const node = { uid: `e${uid}`, role: el.getAttribute("role") || el.tagName.toLowerCase(), 
                         name: getName(el).slice(0, 200), tag: el.tagName.toLowerCase() };
-          if (el.tagName === "A" && el.href) node.href = el.href;
+          // Capture href for any element that has one (links, area, base, etc.)
+          if (el.href) node.href = el.href;
           if (el.tagName === "INPUT") { node.type = el.type; node.value = el.value; }
           if (el.id) node.selector = `#${el.id}`;
           else if (el.className && typeof el.className === "string") {
@@ -234,7 +235,27 @@ async function toolSnapshot({ tabId }) {
         return { nodes, nextUid: uid };
       }
       
-      return { url: location.href, title: document.title, nodes: build(document.body).nodes.slice(0, 500) };
+      // Collect all links on the page separately for easy access
+      function getAllLinks() {
+        const links = [];
+        const seen = new Set();
+        document.querySelectorAll("a[href]").forEach(a => {
+          const href = a.href;
+          if (href && !seen.has(href) && !href.startsWith("javascript:")) {
+            seen.add(href);
+            const text = a.innerText?.trim().slice(0, 100) || a.getAttribute("aria-label") || "";
+            links.push({ href, text });
+          }
+        });
+        return links.slice(0, 100); // Limit to 100 links
+      }
+      
+      return { 
+        url: location.href, 
+        title: document.title, 
+        nodes: build(document.body).nodes.slice(0, 500),
+        links: getAllLinks()
+      };
     }
   });
   

package/package.json

@@ -1,15 +1,14 @@
 {
   "name": "@different-ai/opencode-browser",
-  "version": "2.0.2",
-  "description": "Browser automation plugin for OpenCode. Control your real Chrome browser with existing logins and cookies.",
+  "version": "3.0.0",
+  "description": "Browser automation MCP server for OpenCode. Control your real Chrome browser with existing logins and cookies.",
   "type": "module",
   "bin": {
     "opencode-browser": "./bin/cli.js"
   },
-  "main": "./src/plugin.ts",
+  "main": "./src/mcp-server.ts",
   "exports": {
-    ".": "./src/plugin.ts",
-    "./plugin": "./src/plugin.ts"
+    ".": "./src/mcp-server.ts"
   },
   "files": [
     "bin",
@@ -18,14 +17,16 @@
     "README.md"
   ],
   "scripts": {
-    "install-extension": "node bin/cli.js install"
+    "install-extension": "node bin/cli.js install",
+    "serve": "bun run src/mcp-server.ts"
   },
   "keywords": [
     "opencode",
     "browser",
     "automation",
     "chrome",
-    "plugin"
+    "mcp",
+    "model-context-protocol"
   ],
   "author": "Benjamin Shafii",
   "license": "MIT",
@@ -37,11 +38,11 @@
     "url": "https://github.com/different-ai/opencode-browser/issues"
   },
   "homepage": "https://github.com/different-ai/opencode-browser#readme",
-  "peerDependencies": {
-    "@opencode-ai/plugin": "*"
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.25.2",
+    "zod": "^4.3.5"
   },
   "devDependencies": {
-    "@opencode-ai/plugin": "*",
     "bun-types": "*"
   }
 }