@different-ai/opencode-browser 4.3.0 → 4.3.1

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/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/package.json

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