@different-ai/opencode-browser 4.2.6 → 4.3.1

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

@@ -17,11 +17,12 @@ metadata:
 ## Best-practice workflow
 
 1. Inspect tabs with `browser_get_tabs`
-2. Navigate with `browser_navigate` if needed
-3. Wait for UI using `browser_query` with `timeoutMs`
-4. Discover candidates using `browser_query` with `mode=list`
-5. Click or type using `index`
-6. Confirm using `browser_query` or `browser_snapshot`
+2. Open new tabs with `browser_open_tab` when needed
+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`
+7. Confirm using `browser_query` or `browser_snapshot`
 
 ## Query modes
 
@@ -31,6 +32,11 @@ metadata:
 - `exists`: check presence and count
 - `page_text`: extract visible page text
 
+## Opening tabs
+
+- Use `browser_open_tab` to create a new tab, optionally with `url` and `active`
+- Example: `browser_open_tab({ url: "https://example.com", active: false })`
+
 ## Troubleshooting
 
 - If a selector fails, run `browser_query` with `mode=page_text` to confirm the content exists

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/`
@@ -57,10 +69,12 @@ OpenCode Plugin <-> Local Broker (unix socket) <-> Native Host <-> Chrome Extens
 Core primitives:
 - `browser_status`
 - `browser_get_tabs`
+- `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_wait`
 
@@ -69,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

@@ -12514,6 +12514,17 @@ var plugin = async (ctx) => {
           return toolResultText(data, "ok");
         }
       }),
+      browser_open_tab: tool({
+        description: "Open a new browser tab",
+        args: {
+          url: schema.string().optional(),
+          active: schema.boolean().optional()
+        },
+        async execute({ url: url2, active }, ctx2) {
+          const data = await brokerRequest("tool", { tool: "open_tab", args: { url: url2, active } });
+          return toolResultText(data, "Opened new tab");
+        }
+      }),
       browser_navigate: tool({
         description: "Navigate to a URL in the browser",
         args: {
@@ -12551,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

@@ -100,9 +100,11 @@ async function executeTool(toolName, args) {
   const tools = {
     get_active_tab: toolGetActiveTab,
     get_tabs: toolGetTabs,
+    open_tab: toolOpenTab,
     navigate: toolNavigate,
     click: toolClick,
     type: toolType,
+    select: toolSelect,
     screenshot: toolScreenshot,
     snapshot: toolSnapshot,
     query: toolQuery,
@@ -252,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")
@@ -381,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
@@ -487,6 +555,15 @@ async function toolGetActiveTab() {
   return { tabId: tab.id, content: { tabId: tab.id, url: tab.url, title: tab.title } }
 }
 
+async function toolOpenTab({ url, active = true }) {
+  const createOptions = {}
+  if (typeof url === "string" && url.trim()) createOptions.url = url.trim()
+  if (typeof active === "boolean") createOptions.active = active
+
+  const tab = await chrome.tabs.create(createOptions)
+  return { tabId: tab.id, content: { tabId: tab.id, url: tab.url, active: tab.active } }
+}
+
 async function toolNavigate({ url, tabId }) {
   if (!url) throw new Error("URL is required")
   const tab = await getTabById(tabId)
@@ -530,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.2.6",
+  "version": "4.3.0",
   "description": "Browser automation for OpenCode",
   "permissions": [
     "tabs",

package/package.json

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