@different-ai/opencode-browser 4.0.7 → 4.2.0

package/README.md

@@ -23,11 +23,11 @@ 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**
-4. Update your `.opencode.json` to load the plugin
+4. Update your `opencode.json` or `opencode.jsonc` to load the plugin
 
 ### Configure OpenCode
 
-Your `.opencode.json` should contain:
+Your `opencode.json` or `opencode.jsonc` should contain:
 
 ```json
 {
@@ -50,26 +50,24 @@ OpenCode Plugin <-> Local Broker (unix socket) <-> Native Host <-> Chrome Extens
 
 - First time a session touches a tab, the broker **auto-claims** it for that session.
 - Other sessions attempting to use the same tab will get an error.
-
-Tools:
-
-- `browser_claim_tab({ tabId })`
-- `browser_release_tab({ tabId })`
-- `browser_list_claims()`
+- Use `browser_status` to inspect claims if needed.
 
 ## Available tools
 
-- `browser_version`
+Core primitives:
 - `browser_status`
 - `browser_get_tabs`
 - `browser_navigate`
+- `browser_query` (modes: `text`, `value`, `list`, `exists`, `page_text`; optional `timeoutMs`/`pollMs`)
 - `browser_click`
 - `browser_type`
-- `browser_screenshot`
-- `browser_snapshot`
 - `browser_scroll`
 - `browser_wait`
-- `browser_execute`
+
+Diagnostics:
+- `browser_snapshot`
+- `browser_screenshot`
+- `browser_version`
 
 ## Troubleshooting
 
@@ -78,8 +76,8 @@ Tools:
 - Confirm the extension ID you pasted matches the loaded extension in `chrome://extensions`
 
 **Tab ownership errors**
-- Use `browser_list_claims()` to see who owns a tab
-- Use `browser_claim_tab({ tabId, force: true })` to take over intentionally
+- Use `browser_status` to see current claims
+- Close the other OpenCode session to release ownership
 
 ## Uninstall
 
@@ -87,4 +85,4 @@ Tools:
 npx @different-ai/opencode-browser uninstall
 ```
 
-Then remove the unpacked extension in `chrome://extensions` and remove the plugin from `.opencode.json`.
+Then remove the unpacked extension in `chrome://extensions` and remove the plugin from `opencode.json` or `opencode.jsonc`.

package/dist/plugin.js

@@ -12529,10 +12529,11 @@ var plugin = async (ctx) => {
         description: "Click an element on the page using a CSS selector",
         args: {
           selector: schema.string(),
+          index: schema.number().optional(),
           tabId: schema.number().optional()
         },
-        async execute({ selector, tabId }, ctx2) {
-          const data = await brokerRequest("tool", { tool: "click", args: { selector, tabId } });
+        async execute({ selector, index, tabId }, ctx2) {
+          const data = await brokerRequest("tool", { tool: "click", args: { selector, index, tabId } });
           return toolResultText(data, `Clicked ${selector}`);
         }
       }),
@@ -12542,10 +12543,11 @@ var plugin = async (ctx) => {
           selector: schema.string(),
           text: schema.string(),
           clear: schema.boolean().optional(),
+          index: schema.number().optional(),
           tabId: schema.number().optional()
         },
-        async execute({ selector, text, clear, tabId }, ctx2) {
-          const data = await brokerRequest("tool", { tool: "type", args: { selector, text, clear, tabId } });
+        async execute({ selector, text, clear, index, tabId }, ctx2) {
+          const data = await brokerRequest("tool", { tool: "type", args: { selector, text, clear, index, tabId } });
           return toolResultText(data, `Typed "${text}" into ${selector}`);
         }
       }),
@@ -12593,44 +12595,27 @@ var plugin = async (ctx) => {
           return toolResultText(data, "Waited");
         }
       }),
-      browser_execute: tool({
-        description: "Execute JavaScript code in the page context and return the result.",
+      browser_query: tool({
+        description: "Read data from the page using selectors, optional wait, or page_text extraction (shadow DOM + same-origin iframes).",
         args: {
-          code: schema.string(),
+          selector: schema.string().optional(),
+          mode: schema.string().optional(),
+          attribute: schema.string().optional(),
+          property: schema.string().optional(),
+          index: schema.number().optional(),
+          limit: schema.number().optional(),
+          timeoutMs: schema.number().optional(),
+          pollMs: schema.number().optional(),
+          pattern: schema.string().optional(),
+          flags: schema.string().optional(),
           tabId: schema.number().optional()
         },
-        async execute({ code, tabId }, ctx2) {
-          const data = await brokerRequest("tool", { tool: "execute_script", args: { code, tabId } });
-          return toolResultText(data, "Execute failed");
-        }
-      }),
-      browser_claim_tab: tool({
-        description: "Claim a tab for this OpenCode session (per-tab ownership).",
-        args: {
-          tabId: schema.number(),
-          force: schema.boolean().optional()
-        },
-        async execute({ tabId, force }, ctx2) {
-          const data = await brokerRequest("claim_tab", { tabId, force });
-          return JSON.stringify(data);
-        }
-      }),
-      browser_release_tab: tool({
-        description: "Release a previously claimed tab.",
-        args: {
-          tabId: schema.number()
-        },
-        async execute({ tabId }, ctx2) {
-          const data = await brokerRequest("release_tab", { tabId });
-          return JSON.stringify(data);
-        }
-      }),
-      browser_list_claims: tool({
-        description: "List current tab ownership claims.",
-        args: {},
-        async execute(args, ctx2) {
-          const data = await brokerRequest("list_claims", {});
-          return JSON.stringify(data);
+        async execute({ selector, mode, attribute, property, index, limit, timeoutMs, pollMs, pattern, flags, tabId }, ctx2) {
+          const data = await brokerRequest("tool", {
+            tool: "query",
+            args: { selector, mode, attribute, property, index, limit, timeoutMs, pollMs, pattern, flags, tabId }
+          });
+          return toolResultText(data, "Query failed");
         }
       })
     }

package/extension/background.js

@@ -15,7 +15,9 @@ chrome.alarms.onAlarm.addListener((alarm) => {
 
 function connect() {
   if (port) {
-    try { port.disconnect() } catch {}
+    try {
+      port.disconnect()
+    } catch {}
     port = null
   }
 
@@ -35,7 +37,6 @@ function connect() {
 
       const err = chrome.runtime.lastError
       if (err?.message) {
-        // Usually means native host not installed or crashed
         connectionAttempts++
         if (connectionAttempts === 1) {
           console.log("[OpenCode] Native host not available. Run: npx @different-ai/opencode-browser install")
@@ -104,7 +105,7 @@ async function executeTool(toolName, args) {
     type: toolType,
     screenshot: toolScreenshot,
     snapshot: toolSnapshot,
-    execute_script: toolExecuteScript,
+    query: toolQuery,
     scroll: toolScroll,
     wait: toolWait,
   }
@@ -124,6 +125,363 @@ async function getTabById(tabId) {
   return tabId ? await chrome.tabs.get(tabId) : await getActiveTab()
 }
 
+async function runInPage(tabId, command, args) {
+  const result = await chrome.scripting.executeScript({
+    target: { tabId },
+    func: pageOps,
+    args: [command, args || {}],
+    world: "ISOLATED",
+  })
+  return result[0]?.result
+}
+
+async function pageOps(command, args) {
+  const options = args || {}
+  const MAX_DEPTH = 6
+
+  function safeString(value) {
+    return typeof value === "string" ? value : ""
+  }
+
+  function normalizeSelectorList(selector) {
+    if (Array.isArray(selector)) {
+      return selector.map((s) => safeString(s).trim()).filter(Boolean)
+    }
+    if (typeof selector !== "string") return []
+    const parts = selector
+      .split(",")
+      .map((s) => s.trim())
+      .filter(Boolean)
+    return parts.length ? parts : [selector.trim()].filter(Boolean)
+  }
+
+  function isVisible(el) {
+    if (!el) return false
+    const rect = el.getBoundingClientRect()
+    if (rect.width <= 0 || rect.height <= 0) return false
+    const style = window.getComputedStyle(el)
+    if (style.display === "none" || style.visibility === "hidden" || style.opacity === "0") return false
+    return true
+  }
+
+  function deepQuerySelectorAll(sel, rootDoc) {
+    const out = []
+    const seen = new Set()
+
+    function addAll(nodeList) {
+      for (const el of nodeList) {
+        if (!el || seen.has(el)) continue
+        seen.add(el)
+        out.push(el)
+      }
+    }
+
+    function walkRoot(root, depth) {
+      if (!root || depth > MAX_DEPTH) return
+      try {
+        addAll(root.querySelectorAll(sel))
+      } catch {
+        return
+      }
+
+      const tree = root.querySelectorAll ? root.querySelectorAll("*") : []
+      for (const el of tree) {
+        if (el.shadowRoot) {
+          walkRoot(el.shadowRoot, depth + 1)
+        }
+      }
+
+      const frames = root.querySelectorAll ? root.querySelectorAll("iframe") : []
+      for (const frame of frames) {
+        try {
+          const doc = frame.contentDocument
+          if (doc) walkRoot(doc, depth + 1)
+        } catch {}
+      }
+    }
+
+    walkRoot(rootDoc || document, 0)
+    return out
+  }
+
+  function resolveMatches(selectors, index) {
+    for (const sel of selectors) {
+      const s = safeString(sel)
+      if (!s) continue
+      const matches = deepQuerySelectorAll(s, document)
+      if (!matches.length) continue
+      const visible = matches.filter(isVisible)
+      const chosen = visible[index] || matches[index]
+      return { selectorUsed: s, matches, chosen }
+    }
+    return { selectorUsed: selectors[0] || "", matches: [], chosen: null }
+  }
+
+  function clickElement(el) {
+    try {
+      el.scrollIntoView({ block: "center", inline: "center" })
+    } catch {}
+
+    const rect = el.getBoundingClientRect()
+    const x = Math.min(Math.max(rect.left + rect.width / 2, 0), window.innerWidth - 1)
+    const y = Math.min(Math.max(rect.top + rect.height / 2, 0), window.innerHeight - 1)
+    const opts = { bubbles: true, cancelable: true, view: window, clientX: x, clientY: y }
+
+    try {
+      el.dispatchEvent(new MouseEvent("mouseover", opts))
+      el.dispatchEvent(new MouseEvent("mousemove", opts))
+      el.dispatchEvent(new MouseEvent("mousedown", opts))
+      el.dispatchEvent(new MouseEvent("mouseup", opts))
+      el.dispatchEvent(new MouseEvent("click", opts))
+    } catch {}
+
+    try {
+      el.click()
+    } catch {}
+  }
+
+  function setNativeValue(el, value) {
+    const tag = el.tagName
+    if (tag === "INPUT" || tag === "TEXTAREA") {
+      const proto = tag === "INPUT" ? window.HTMLInputElement.prototype : window.HTMLTextAreaElement.prototype
+      const setter = Object.getOwnPropertyDescriptor(proto, "value")?.set
+      if (setter) setter.call(el, value)
+      else el.value = value
+      return true
+    }
+    return false
+  }
+
+  function getInputValues() {
+    const out = []
+    const nodes = document.querySelectorAll("input, textarea")
+    nodes.forEach((el) => {
+      try {
+        const name = el.getAttribute("aria-label") || el.getAttribute("name") || el.id || el.className || el.tagName
+        const value = el.value
+        if (value != null && String(value).trim()) out.push(`${name}: ${value}`)
+      } catch {}
+    })
+    return out.join("\n")
+  }
+
+  function getPseudoText() {
+    const out = []
+    const elements = Array.from(document.querySelectorAll("*"))
+    for (let i = 0; i < elements.length && out.length < 2000; i++) {
+      const el = elements[i]
+      try {
+        const style = window.getComputedStyle(el)
+        if (style.display === "none" || style.visibility === "hidden") continue
+        const before = window.getComputedStyle(el, "::before").content
+        const after = window.getComputedStyle(el, "::after").content
+        const pushContent = (content) => {
+          if (!content) return
+          const c = String(content)
+          if (!c || c === "none" || c === "normal") return
+          const unquoted = c.replace(/^"|"$/g, "").replace(/^'|'$/g, "")
+          if (unquoted && unquoted !== "none" && unquoted !== "normal") out.push(unquoted)
+        }
+        pushContent(before)
+        pushContent(after)
+      } catch {}
+    }
+    return out.join("\n")
+  }
+
+  function buildMatches(text, pattern, flags) {
+    if (!pattern) return []
+    try {
+      const re = new RegExp(pattern, flags || "")
+      const found = []
+      let m
+      while ((m = re.exec(text)) && found.length < 50) {
+        found.push(m[0])
+        if (!re.global) break
+      }
+      return found
+    } catch {
+      return []
+    }
+  }
+
+  function getPageText(limit, pattern, flags) {
+    const parts = []
+    const bodyText = safeString(document.body?.innerText || "")
+    if (bodyText.trim()) parts.push(bodyText)
+    const inputValues = getInputValues()
+    if (inputValues) parts.push(inputValues)
+    const pseudo = getPseudoText()
+    if (pseudo) parts.push(pseudo)
+    const text = parts.filter(Boolean).join("\n\n").slice(0, Math.max(0, limit))
+    return {
+      url: location.href,
+      title: document.title,
+      text,
+      matches: buildMatches(text, pattern, flags),
+    }
+  }
+
+  const mode = typeof options.mode === "string" && options.mode ? options.mode : "text"
+  const selectors = normalizeSelectorList(options.selector)
+  const index = Number.isFinite(options.index) ? options.index : 0
+  const timeoutMs = Number.isFinite(options.timeoutMs) ? options.timeoutMs : 0
+  const pollMs = Number.isFinite(options.pollMs) ? options.pollMs : 200
+  const limit = Number.isFinite(options.limit) ? options.limit : mode === "page_text" ? 20000 : 50
+  const pattern = typeof options.pattern === "string" ? options.pattern : null
+  const flags = typeof options.flags === "string" ? options.flags : "i"
+
+  if (command === "click") {
+    const match = resolveMatches(selectors, index)
+    if (!match.chosen) {
+      return { ok: false, error: `Element not found for selectors: ${selectors.join(", ")}` }
+    }
+    clickElement(match.chosen)
+    return { ok: true, selectorUsed: match.selectorUsed }
+  }
+
+  if (command === "type") {
+    const text = options.text
+    const shouldClear = !!options.clear
+    const match = resolveMatches(selectors, index)
+    if (!match.chosen) {
+      return { ok: false, error: `Element not found for selectors: ${selectors.join(", ")}` }
+    }
+
+    try {
+      match.chosen.scrollIntoView({ block: "center", inline: "center" })
+    } catch {}
+
+    try {
+      match.chosen.focus()
+    } catch {}
+
+    const tag = match.chosen.tagName
+    const isTextInput = tag === "INPUT" || tag === "TEXTAREA"
+
+    if (isTextInput) {
+      if (shouldClear) setNativeValue(match.chosen, "")
+      setNativeValue(match.chosen, (match.chosen.value || "") + text)
+      match.chosen.dispatchEvent(new Event("input", { bubbles: true }))
+      match.chosen.dispatchEvent(new Event("change", { bubbles: true }))
+      return { ok: true, selectorUsed: match.selectorUsed }
+    }
+
+    if (match.chosen.isContentEditable) {
+      if (shouldClear) match.chosen.textContent = ""
+      try {
+        document.execCommand("insertText", false, text)
+      } catch {
+        match.chosen.textContent = (match.chosen.textContent || "") + text
+      }
+      match.chosen.dispatchEvent(new Event("input", { bubbles: true }))
+      return { ok: true, selectorUsed: match.selectorUsed }
+    }
+
+    return { ok: false, error: `Element is not typable: ${match.selectorUsed} (${tag.toLowerCase()})` }
+  }
+
+  if (command === "scroll") {
+    const scrollX = Number.isFinite(options.x) ? options.x : 0
+    const scrollY = Number.isFinite(options.y) ? options.y : 0
+    if (selectors.length) {
+      const match = resolveMatches(selectors, index)
+      if (!match.chosen) {
+        return { ok: false, error: `Element not found for selectors: ${selectors.join(", ")}` }
+      }
+      try {
+        match.chosen.scrollIntoView({ behavior: "smooth", block: "center" })
+      } catch {}
+      return { ok: true, selectorUsed: match.selectorUsed }
+    }
+    window.scrollBy(scrollX, scrollY)
+    return { ok: true }
+  }
+
+  if (command === "query") {
+    if (mode === "page_text") {
+      if (selectors.length && timeoutMs > 0) {
+        const start = Date.now()
+        while (Date.now() - start < timeoutMs) {
+          const match = resolveMatches(selectors, index)
+          if (match.matches.length) break
+          await new Promise((r) => setTimeout(r, pollMs))
+        }
+      }
+      return { ok: true, value: getPageText(limit, pattern, flags) }
+    }
+
+    if (!selectors.length) {
+      return { ok: false, error: "Selector is required" }
+    }
+
+    let match = resolveMatches(selectors, index)
+    if (timeoutMs > 0) {
+      const start = Date.now()
+      while (Date.now() - start < timeoutMs) {
+        match = resolveMatches(selectors, index)
+        if (mode === "exists" && match.matches.length) break
+        if (mode !== "exists" && match.chosen) break
+        await new Promise((r) => setTimeout(r, pollMs))
+      }
+    }
+
+    if (mode === "exists") {
+      return {
+        ok: true,
+        selectorUsed: match.selectorUsed,
+        value: { exists: match.matches.length > 0, count: match.matches.length },
+      }
+    }
+
+    if (!match.chosen) {
+      return { ok: false, error: `No matches for selectors: ${selectors.join(", ")}` }
+    }
+
+    if (mode === "text") {
+      const text = (match.chosen.innerText || match.chosen.textContent || "").trim()
+      return { ok: true, selectorUsed: match.selectorUsed, value: text }
+    }
+
+    if (mode === "value") {
+      const value = match.chosen.value
+      return { ok: true, selectorUsed: match.selectorUsed, value: typeof value === "string" ? value : String(value ?? "") }
+    }
+
+    if (mode === "attribute") {
+      const value = options.attribute ? match.chosen.getAttribute(options.attribute) : null
+      return { ok: true, selectorUsed: match.selectorUsed, value }
+    }
+
+    if (mode === "property") {
+      if (!options.property) return { ok: false, error: "property is required" }
+      return { ok: true, selectorUsed: match.selectorUsed, value: match.chosen[options.property] }
+    }
+
+    if (mode === "html") {
+      return { ok: true, selectorUsed: match.selectorUsed, value: match.chosen.outerHTML }
+    }
+
+    if (mode === "list") {
+      const maxItems = Math.min(Math.max(1, limit), 200)
+      const items = match.matches.slice(0, maxItems).map((el) => ({
+        text: (el.innerText || el.textContent || "").trim().slice(0, 200),
+        tag: (el.tagName || "").toLowerCase(),
+        ariaLabel: el.getAttribute ? el.getAttribute("aria-label") : null,
+      }))
+      return {
+        ok: true,
+        selectorUsed: match.selectorUsed,
+        value: { items, count: match.matches.length },
+      }
+    }
+
+    return { ok: false, error: `Unknown mode: ${mode}` }
+  }
+
+  return { ok: false, error: `Unknown command: ${String(command)}` }
+}
+
 async function toolGetActiveTab() {
   const tab = await getActiveTab()
   return { tabId: tab.id, content: { tabId: tab.id, url: tab.url, title: tab.title } }
@@ -151,52 +509,25 @@ async function toolNavigate({ url, tabId }) {
   return { tabId: tab.id, content: `Navigated to ${url}` }
 }
 
-async function toolClick({ selector, tabId }) {
+async function toolClick({ selector, tabId, index = 0 }) {
   if (!selector) throw new Error("Selector is required")
   const tab = await getTabById(tabId)
 
-  const result = await chrome.scripting.executeScript({
-    target: { tabId: tab.id },
-    func: (sel) => {
-      const el = document.querySelector(sel)
-      if (!el) return { success: false, error: `Element not found: ${sel}` }
-      el.click()
-      return { success: true }
-    },
-    args: [selector],
-  })
-
-  if (!result[0]?.result?.success) throw new Error(result[0]?.result?.error || "Click failed")
-  return { tabId: tab.id, content: `Clicked ${selector}` }
+  const result = await runInPage(tab.id, "click", { selector, index })
+  if (!result?.ok) throw new Error(result?.error || "Click failed")
+  const used = result.selectorUsed || selector
+  return { tabId: tab.id, content: `Clicked ${used}` }
 }
 
-async function toolType({ selector, text, tabId, clear = false }) {
+async function toolType({ selector, text, tabId, clear = false, index = 0 }) {
   if (!selector) throw new Error("Selector is required")
   if (text === undefined) throw new Error("Text is required")
   const tab = await getTabById(tabId)
 
-  const result = await chrome.scripting.executeScript({
-    target: { tabId: tab.id },
-    func: (sel, txt, shouldClear) => {
-      const el = document.querySelector(sel)
-      if (!el) return { success: false, error: `Element not found: ${sel}` }
-      el.focus()
-      if (shouldClear && (el.tagName === "INPUT" || el.tagName === "TEXTAREA")) el.value = ""
-
-      if (el.tagName === "INPUT" || el.tagName === "TEXTAREA") {
-        el.value = el.value + txt
-        el.dispatchEvent(new Event("input", { bubbles: true }))
-        el.dispatchEvent(new Event("change", { bubbles: true }))
-      } else if (el.isContentEditable) {
-        document.execCommand("insertText", false, txt)
-      }
-      return { success: true }
-    },
-    args: [selector, text, clear],
-  })
-
-  if (!result[0]?.result?.success) throw new Error(result[0]?.result?.error || "Type failed")
-  return { tabId: tab.id, content: `Typed "${text}" into ${selector}` }
+  const result = await runInPage(tab.id, "type", { selector, text, clear, index })
+  if (!result?.ok) throw new Error(result?.error || "Type failed")
+  const used = result.selectorUsed || selector
+  return { tabId: tab.id, content: `Typed "${text}" into ${used}` }
 }
 
 async function toolScreenshot({ tabId }) {
@@ -211,56 +542,109 @@ async function toolSnapshot({ tabId }) {
   const result = await chrome.scripting.executeScript({
     target: { tabId: tab.id },
     func: () => {
+      function safeText(s) {
+        return typeof s === "string" ? s : ""
+      }
+
+      function isVisible(el) {
+        if (!el) return false
+        const rect = el.getBoundingClientRect()
+        if (rect.width <= 0 || rect.height <= 0) return false
+        const style = window.getComputedStyle(el)
+        if (style.display === "none" || style.visibility === "hidden" || style.opacity === "0") return false
+        return true
+      }
+
+      function pseudoText(el) {
+        try {
+          const before = window.getComputedStyle(el, "::before").content
+          const after = window.getComputedStyle(el, "::after").content
+          const norm = (v) => {
+            const s = safeText(v)
+            if (!s || s === "none") return ""
+            return s.replace(/^"|"$/g, "")
+          }
+          return { before: norm(before), after: norm(after) }
+        } catch {
+          return { before: "", after: "" }
+        }
+      }
+
       function getName(el) {
-        return (
-          el.getAttribute("aria-label") ||
-          el.getAttribute("alt") ||
-          el.getAttribute("title") ||
-          el.getAttribute("placeholder") ||
-          el.innerText?.slice(0, 100) ||
-          ""
-        )
+        const aria = el.getAttribute("aria-label")
+        if (aria) return aria
+        const alt = el.getAttribute("alt")
+        if (alt) return alt
+        const title = el.getAttribute("title")
+        if (title) return title
+        const placeholder = el.getAttribute("placeholder")
+        if (placeholder) return placeholder
+        const txt = safeText(el.innerText)
+        if (txt.trim()) return txt.slice(0, 200)
+        const pt = pseudoText(el)
+        const combo = `${pt.before} ${pt.after}`.trim()
+        if (combo) return combo.slice(0, 200)
+        return ""
       }
 
       function build(el, depth = 0, uid = 0) {
-        if (depth > 10) return { nodes: [], nextUid: uid }
+        if (!el || depth > 12) return { nodes: [], nextUid: uid }
         const nodes = []
-        const style = window.getComputedStyle(el)
-        if (style.display === "none" || style.visibility === "hidden") return { nodes: [], nextUid: uid }
+
+        if (!isVisible(el)) return { nodes: [], nextUid: uid }
 
         const isInteractive =
           ["A", "BUTTON", "INPUT", "TEXTAREA", "SELECT"].includes(el.tagName) ||
           el.getAttribute("onclick") ||
           el.getAttribute("role") === "button" ||
           el.isContentEditable
-        const rect = el.getBoundingClientRect()
 
-        if (rect.width > 0 && rect.height > 0 && (isInteractive || el.innerText?.trim())) {
+        const name = getName(el)
+        const pt = pseudoText(el)
+
+        const shouldInclude = isInteractive || name.trim() || pt.before || pt.after
+
+        if (shouldInclude) {
           const node = {
             uid: `e${uid}`,
             role: el.getAttribute("role") || el.tagName.toLowerCase(),
-            name: getName(el).slice(0, 200),
+            name: name,
             tag: el.tagName.toLowerCase(),
           }
+
+          if (pt.before) node.before = pt.before
+          if (pt.after) node.after = pt.after
+
           if (el.href) node.href = el.href
-          if (el.tagName === "INPUT") {
+
+          if (el.tagName === "INPUT" || el.tagName === "TEXTAREA") {
             node.type = el.type
             node.value = el.value
+            if (el.readOnly) node.readOnly = true
+            if (el.disabled) node.disabled = true
           }
+
           if (el.id) node.selector = `#${el.id}`
           else if (el.className && typeof el.className === "string") {
             const cls = el.className.trim().split(/\s+/).slice(0, 2).join(".")
             if (cls) node.selector = `${el.tagName.toLowerCase()}.${cls}`
           }
+
           nodes.push(node)
           uid++
         }
 
+        if (el.shadowRoot) {
+          const r = build(el.shadowRoot.host, depth + 1, uid)
+          uid = r.nextUid
+        }
+
         for (const child of el.children) {
           const r = build(child, depth + 1, uid)
           nodes.push(...r.nodes)
           uid = r.nextUid
         }
+
         return { nodes, nextUid: uid }
       }
 
@@ -275,16 +659,25 @@ async function toolSnapshot({ tabId }) {
             links.push({ href, text })
           }
         })
-        return links.slice(0, 100)
+        return links.slice(0, 200)
       }
 
+      let pageText = ""
+      try {
+        pageText = safeText(document.body?.innerText || "").slice(0, 20000)
+      } catch {}
+
+      const built = build(document.body).nodes.slice(0, 800)
+
       return {
         url: location.href,
         title: document.title,
-        nodes: build(document.body).nodes.slice(0, 500),
+        text: pageText,
+        nodes: built,
         links: getAllLinks(),
       }
     },
+    world: "ISOLATED",
   })
 
   return { tabId: tab.id, content: JSON.stringify(result[0]?.result, null, 2) }
@@ -296,42 +689,54 @@ async function toolGetTabs() {
   return { content: JSON.stringify(out, null, 2) }
 }
 
-async function toolExecuteScript({ code, tabId }) {
-  if (!code) throw new Error("Code is required")
+async function toolQuery({
+  tabId,
+  selector,
+  mode = "text",
+  attribute,
+  property,
+  limit,
+  index = 0,
+  timeoutMs,
+  pollMs,
+  pattern,
+  flags,
+}) {
+  if (!selector && mode !== "page_text") throw new Error("selector is required")
   const tab = await getTabById(tabId)
-  const result = await chrome.scripting.executeScript({
-    target: { tabId: tab.id },
-    func: new Function(code),
+
+  const result = await runInPage(tab.id, "query", {
+    selector,
+    mode,
+    attribute,
+    property,
+    limit,
+    index,
+    timeoutMs,
+    pollMs,
+    pattern,
+    flags,
   })
-  return { tabId: tab.id, content: JSON.stringify(result[0]?.result) }
+
+  if (!result?.ok) throw new Error(result?.error || "Query failed")
+
+  if (mode === "list" || mode === "property" || mode === "exists" || mode === "page_text") {
+    return { tabId: tab.id, content: JSON.stringify(result, null, 2) }
+  }
+
+  return { tabId: tab.id, content: typeof result.value === "string" ? result.value : JSON.stringify(result.value) }
 }
 
 async function toolScroll({ x = 0, y = 0, selector, tabId }) {
   const tab = await getTabById(tabId)
-  const sel = selector || null
 
-  await chrome.scripting.executeScript({
-    target: { tabId: tab.id },
-    func: (scrollX, scrollY, sel) => {
-      if (sel) {
-        const el = document.querySelector(sel)
-        if (el) {
-          el.scrollIntoView({ behavior: "smooth", block: "center" })
-          return
-        }
-      }
-      window.scrollBy(scrollX, scrollY)
-    },
-    args: [x, y, sel],
-  })
-
-  return { tabId: tab.id, content: `Scrolled ${sel ? `to ${sel}` : `by (${x}, ${y})`}` }
+  const result = await runInPage(tab.id, "scroll", { x, y, selector })
+  if (!result?.ok) throw new Error(result?.error || "Scroll failed")
+  const target = result.selectorUsed ? `to ${result.selectorUsed}` : `by (${x}, ${y})`
+  return { tabId: tab.id, content: `Scrolled ${target}` }
 }
 
 async function toolWait({ ms = 1000, tabId }) {
-  if (typeof tabId === "number") {
-    // keep tabId in response for ownership purposes
-  }
   await new Promise((resolve) => setTimeout(resolve, ms))
   return { tabId, content: `Waited ${ms}ms` }
 }
@@ -348,4 +753,4 @@ chrome.action.onClicked.addListener(() => {
   })
 })
 
-connect()
+connect()

package/extension/manifest.json

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

package/package.json

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