@different-ai/opencode-browser 4.3.0 → 4.3.2

package/README.md

@@ -4,20 +4,32 @@ Browser automation plugin for [OpenCode](https://github.com/opencode-ai/opencode
 
 Control your real Chromium browser (Chrome/Brave/Arc/Edge) using your existing profile (logins, cookies, bookmarks). No DevTools Protocol, no security prompts.
 
+
+https://github.com/user-attachments/assets/1496b3b3-419b-436c-b412-8cda2fed83d6
+
+
 ## Why this architecture
 
 This version is optimized for reliability and predictable multi-session behavior:
-
+- **No MCP** -> just opencode plugin
 - **No WebSocket port** → no port conflicts
 - **Chrome Native Messaging** between extension and a local host process
 - A local **broker** multiplexes multiple OpenCode plugin sessions and enforces **per-tab ownership**
 
 ## Installation
 
+> Help me improve this! 
+
 ```bash
-npx @different-ai/opencode-browser install
+bunx @different-ai/opencode-browser@latest install
 ```
 
+
+https://github.com/user-attachments/assets/d5767362-fbf3-4023-858b-90f06d9f0b25
+
+
+
+
 The installer will:
 
 1. Copy the extension to `~/.opencode-browser/extension/`
@@ -62,6 +74,7 @@ Core primitives:
 - `browser_query` (modes: `text`, `value`, `list`, `exists`, `page_text`; optional `timeoutMs`/`pollMs`)
 - `browser_click`
 - `browser_type`
+- `browser_select`
 - `browser_scroll`
 - `browser_wait`
 
@@ -70,6 +83,14 @@ Diagnostics:
 - `browser_screenshot`
 - `browser_version`
 
+## Roadmap
+
+- [ ] Add tab management tools (`browser_set_active_tab`, `browser_close_tab`)
+- [ ] Add navigation helpers (`browser_back`, `browser_forward`, `browser_reload`)
+- [ ] Add keyboard input tool (`browser_key`)
+- [ ] Add download support (`browser_download`, `browser_list_downloads`)
+- [ ] Add upload support (`browser_set_file_input`)
+
 ## Troubleshooting
 
 **Extension says native host not available**

package/bin/cli.js

@@ -31,6 +31,7 @@ import { execSync } from "child_process";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 const PACKAGE_ROOT = join(__dirname, "..");
+const PACKAGE_JSON = join(PACKAGE_ROOT, "package.json");
 
 const BASE_DIR = join(homedir(), ".opencode-browser");
 const EXTENSION_DIR = join(BASE_DIR, "extension");
@@ -108,6 +109,14 @@ function resolveNodePath() {
   return process.execPath;
 }
 
+function getPackageVersion() {
+  try {
+    const pkg = JSON.parse(readFileSync(PACKAGE_JSON, "utf-8"));
+    if (typeof pkg?.version === "string") return pkg.version;
+  } catch {}
+  return null;
+}
+
 function writeHostWrapper(nodePath) {
   ensureDir(BASE_DIR);
   const script = `#!/bin/sh\n"${nodePath}" "${NATIVE_HOST_DST}"\n`;
@@ -293,6 +302,24 @@ async function install() {
   ensureDir(BASE_DIR);
   const srcExtensionDir = join(PACKAGE_ROOT, "extension");
   copyDirRecursive(srcExtensionDir, EXTENSION_DIR);
+
+  const packageVersion = getPackageVersion();
+  if (packageVersion) {
+    const manifestPath = join(EXTENSION_DIR, "manifest.json");
+    if (existsSync(manifestPath)) {
+      try {
+        const manifest = JSON.parse(readFileSync(manifestPath, "utf-8"));
+        if (manifest.version !== packageVersion) {
+          manifest.version = packageVersion;
+          writeFileSync(manifestPath, JSON.stringify(manifest, null, 2) + "\n");
+          success(`Updated extension manifest version to ${packageVersion}`);
+        }
+      } catch (e) {
+        warn(`Could not update extension manifest: ${e.message || String(e)}`);
+      }
+    }
+  }
+
   success(`Extension files copied to: ${EXTENSION_DIR}`);
 
   header("Step 3: Load & Pin Extension");

package/dist/plugin.js

@@ -12562,6 +12562,25 @@ var plugin = async (ctx) => {
           return toolResultText(data, `Typed "${text}" into ${selector}`);
         }
       }),
+      browser_select: tool({
+        description: "Select an option in a native select element",
+        args: {
+          selector: schema.string(),
+          value: schema.string().optional(),
+          label: schema.string().optional(),
+          optionIndex: schema.number().optional(),
+          index: schema.number().optional(),
+          tabId: schema.number().optional()
+        },
+        async execute({ selector, value, label, optionIndex, index, tabId }, ctx2) {
+          const data = await brokerRequest("tool", {
+            tool: "select",
+            args: { selector, value, label, optionIndex, index, tabId }
+          });
+          const summary = value ?? label ?? (optionIndex != null ? String(optionIndex) : "option");
+          return toolResultText(data, `Selected ${summary} in ${selector}`);
+        }
+      }),
       browser_screenshot: tool({
         description: "Take a screenshot of the current page. Returns base64 image data URL.",
         args: {

package/extension/background.js

@@ -104,6 +104,7 @@ async function executeTool(toolName, args) {
     navigate: toolNavigate,
     click: toolClick,
     type: toolType,
+    select: toolSelect,
     screenshot: toolScreenshot,
     snapshot: toolSnapshot,
     query: toolQuery,
@@ -253,6 +254,12 @@ async function pageOps(command, args) {
     return false
   }
 
+  function setSelectValue(el, value) {
+    const setter = Object.getOwnPropertyDescriptor(window.HTMLSelectElement.prototype, "value")?.set
+    if (setter) setter.call(el, value)
+    else el.value = value
+  }
+
   function getInputValues() {
     const out = []
     const nodes = document.querySelectorAll("input, textarea")
@@ -382,6 +389,66 @@ async function pageOps(command, args) {
     return { ok: false, error: `Element is not typable: ${match.selectorUsed} (${tag.toLowerCase()})` }
   }
 
+  if (command === "select") {
+    const value = typeof options.value === "string" ? options.value : null
+    const label = typeof options.label === "string" ? options.label : null
+    const optionIndex = Number.isFinite(options.optionIndex) ? options.optionIndex : null
+    const match = resolveMatches(selectors, index)
+    if (!match.chosen) {
+      return { ok: false, error: `Element not found for selectors: ${selectors.join(", ")}` }
+    }
+
+    const tag = match.chosen.tagName
+    if (tag !== "SELECT") {
+      return { ok: false, error: `Element is not a select: ${match.selectorUsed} (${tag.toLowerCase()})` }
+    }
+
+    if (value === null && label === null && optionIndex === null) {
+      return { ok: false, error: "value, label, or optionIndex is required" }
+    }
+
+    const selectEl = match.chosen
+    const optionList = Array.from(selectEl.options || [])
+    let option = null
+
+    if (value !== null) {
+      option = optionList.find((opt) => opt.value === value)
+    }
+
+    if (!option && label !== null) {
+      const target = label.trim()
+      option = optionList.find((opt) => (opt.label || opt.textContent || "").trim() === target)
+    }
+
+    if (!option && optionIndex !== null) {
+      option = optionList[optionIndex]
+    }
+
+    if (!option) {
+      return { ok: false, error: "Option not found" }
+    }
+
+    try {
+      selectEl.scrollIntoView({ block: "center", inline: "center" })
+    } catch {}
+
+    try {
+      selectEl.focus()
+    } catch {}
+
+    setSelectValue(selectEl, option.value)
+    option.selected = true
+    selectEl.dispatchEvent(new Event("input", { bubbles: true }))
+    selectEl.dispatchEvent(new Event("change", { bubbles: true }))
+
+    return {
+      ok: true,
+      selectorUsed: match.selectorUsed,
+      value: selectEl.value,
+      label: (option.label || option.textContent || "").trim(),
+    }
+  }
+
   if (command === "scroll") {
     const scrollX = Number.isFinite(options.x) ? options.x : 0
     const scrollY = Number.isFinite(options.y) ? options.y : 0
@@ -540,6 +607,22 @@ async function toolType({ selector, text, tabId, clear = false, index = 0 }) {
   return { tabId: tab.id, content: `Typed "${text}" into ${used}` }
 }
 
+async function toolSelect({ selector, value, label, optionIndex, tabId, index = 0 }) {
+  if (!selector) throw new Error("Selector is required")
+  if (value === undefined && label === undefined && optionIndex === undefined) {
+    throw new Error("value, label, or optionIndex is required")
+  }
+  const tab = await getTabById(tabId)
+
+  const result = await runInPage(tab.id, "select", { selector, value, label, optionIndex, index })
+  if (!result?.ok) throw new Error(result?.error || "Select failed")
+  const used = result.selectorUsed || selector
+  const valueText = result.value ? String(result.value) : ""
+  const labelText = result.label ? String(result.label) : ""
+  const summary = labelText && valueText && labelText !== valueText ? `${labelText} (${valueText})` : labelText || valueText
+  return { tabId: tab.id, content: `Selected ${summary || "option"} in ${used}` }
+}
+
 async function toolScreenshot({ tabId }) {
   const tab = await getTabById(tabId)
   const png = await chrome.tabs.captureVisibleTab(tab.windowId, { format: "png" })

package/extension/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "OpenCode Browser Automation",
-  "version": "4.3.0",
+  "version": "4.3.2",
   "description": "Browser automation for OpenCode",
   "permissions": [
     "tabs",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@different-ai/opencode-browser",
-  "version": "4.3.0",
+  "version": "4.3.2",
   "description": "Browser automation plugin for OpenCode (native messaging + per-tab ownership).",
   "type": "module",
   "bin": {