@different-ai/opencode-browser 4.5.1 → 4.6.1

package/extension/background.js

@@ -1,19 +1,200 @@
 const NATIVE_HOST_NAME = "com.opencode.browser_automation"
 const KEEPALIVE_ALARM = "keepalive"
+const PERMISSION_HINT = "Click the OpenCode Browser extension icon and approve requested permissions."
+const OPTIONAL_RUNTIME_PERMISSIONS = ["nativeMessaging", "downloads", "debugger"]
+const OPTIONAL_RUNTIME_ORIGINS = ["<all_urls>"]
+
+const runtimeManifest = chrome.runtime.getManifest()
+const declaredOptionalPermissions = new Set(runtimeManifest.optional_permissions || [])
+const declaredOptionalOrigins = new Set(runtimeManifest.optional_host_permissions || [])
 
 let port = null
 let isConnected = false
 let connectionAttempts = 0
+let nativePermissionHintLogged = false
+
+// Debugger state management for console/error capture
+const debuggerState = new Map()
+const MAX_LOG_ENTRIES = 1000
+
+async function hasPermissions(query) {
+  if (!chrome.permissions?.contains) return true
+  try {
+    return await chrome.permissions.contains(query)
+  } catch {
+    return false
+  }
+}
+
+async function hasNativeMessagingPermission() {
+  return await hasPermissions({ permissions: ["nativeMessaging"] })
+}
+
+async function hasDebuggerPermission() {
+  return await hasPermissions({ permissions: ["debugger"] })
+}
+
+async function hasDownloadsPermission() {
+  return await hasPermissions({ permissions: ["downloads"] })
+}
+
+async function hasHostAccessPermission() {
+  return await hasPermissions({ origins: ["<all_urls>"] })
+}
+
+async function requestOptionalPermissionsFromClick() {
+  if (!chrome.permissions?.contains || !chrome.permissions?.request) {
+    return { granted: true, requested: false, permissions: [], origins: [] }
+  }
+
+  const permissions = []
+  for (const permission of OPTIONAL_RUNTIME_PERMISSIONS) {
+    if (!declaredOptionalPermissions.has(permission)) continue
+    const granted = await hasPermissions({ permissions: [permission] })
+    if (!granted) permissions.push(permission)
+  }
+
+  const origins = []
+  for (const origin of OPTIONAL_RUNTIME_ORIGINS) {
+    if (!declaredOptionalOrigins.has(origin)) continue
+    const granted = await hasPermissions({ origins: [origin] })
+    if (!granted) origins.push(origin)
+  }
+
+  if (!permissions.length && !origins.length) {
+    return { granted: true, requested: false, permissions, origins }
+  }
+
+  try {
+    const granted = await chrome.permissions.request({ permissions, origins })
+    return { granted, requested: true, permissions, origins }
+  } catch (error) {
+    return {
+      granted: false,
+      requested: true,
+      permissions,
+      origins,
+      error: error?.message || String(error),
+    }
+  }
+}
+
+async function ensureDebuggerAvailable() {
+  if (!chrome.debugger?.attach) {
+    return {
+      ok: false,
+      reason: "Debugger API unavailable in this build.",
+    }
+  }
+
+  const granted = await hasDebuggerPermission()
+  if (!granted) {
+    return {
+      ok: false,
+      reason: `Debugger permission not granted. ${PERMISSION_HINT}`,
+    }
+  }
+
+  return { ok: true }
+}
+
+async function ensureDownloadsAvailable() {
+  if (!chrome.downloads) {
+    throw new Error(`Downloads API unavailable in this build. ${PERMISSION_HINT}`)
+  }
+
+  const granted = await hasDownloadsPermission()
+  if (!granted) {
+    throw new Error(`Downloads permission not granted. ${PERMISSION_HINT}`)
+  }
+}
+
+async function ensureDebuggerAttached(tabId) {
+  const availability = await ensureDebuggerAvailable()
+  if (!availability.ok) {
+    return {
+      attached: false,
+      unavailableReason: availability.reason,
+      consoleMessages: [],
+      pageErrors: [],
+    }
+  }
+
+  if (debuggerState.has(tabId)) return debuggerState.get(tabId)
+
+  const state = { attached: false, consoleMessages: [], pageErrors: [] }
+  debuggerState.set(tabId, state)
+
+  try {
+    await chrome.debugger.attach({ tabId }, "1.3")
+    await chrome.debugger.sendCommand({ tabId }, "Runtime.enable")
+    state.attached = true
+  } catch (e) {
+    console.warn("[OpenCode] Failed to attach debugger:", e.message || e)
+  }
+
+  return state
+}
+
+if (chrome.debugger?.onEvent) {
+  chrome.debugger.onEvent.addListener((source, method, params) => {
+    const state = debuggerState.get(source.tabId)
+    if (!state) return
+
+    if (method === "Runtime.consoleAPICalled") {
+      if (state.consoleMessages.length >= MAX_LOG_ENTRIES) {
+        state.consoleMessages.shift()
+      }
+      state.consoleMessages.push({
+        type: params.type,
+        text: params.args.map((a) => a.value ?? a.description ?? "").join(" "),
+        timestamp: Date.now(),
+        source: params.stackTrace?.callFrames?.[0]?.url,
+        line: params.stackTrace?.callFrames?.[0]?.lineNumber,
+      })
+    }
+
+    if (method === "Runtime.exceptionThrown") {
+      if (state.pageErrors.length >= MAX_LOG_ENTRIES) {
+        state.pageErrors.shift()
+      }
+      state.pageErrors.push({
+        message: params.exceptionDetails.text,
+        source: params.exceptionDetails.url,
+        line: params.exceptionDetails.lineNumber,
+        column: params.exceptionDetails.columnNumber,
+        stack: params.exceptionDetails.exception?.description,
+        timestamp: Date.now(),
+      })
+    }
+  })
+}
+
+if (chrome.debugger?.onDetach) {
+  chrome.debugger.onDetach.addListener((source) => {
+    if (debuggerState.has(source.tabId)) {
+      const state = debuggerState.get(source.tabId)
+      state.attached = false
+    }
+  })
+}
+
+chrome.tabs.onRemoved.addListener((tabId) => {
+  if (debuggerState.has(tabId)) {
+    if (chrome.debugger?.detach) chrome.debugger.detach({ tabId }).catch(() => {})
+    debuggerState.delete(tabId)
+  }
+})
 
 chrome.alarms.create(KEEPALIVE_ALARM, { periodInMinutes: 0.25 })
 
 chrome.alarms.onAlarm.addListener((alarm) => {
   if (alarm.name === KEEPALIVE_ALARM) {
-    if (!isConnected) connect()
+    if (!isConnected) connect().catch(() => {})
   }
 })
 
-function connect() {
+async function connect() {
   if (port) {
     try {
       port.disconnect()
@@ -21,6 +202,19 @@ function connect() {
     port = null
   }
 
+  const nativeMessagingAllowed = await hasNativeMessagingPermission()
+  if (!nativeMessagingAllowed) {
+    isConnected = false
+    updateBadge(false)
+    if (!nativePermissionHintLogged) {
+      nativePermissionHintLogged = true
+      console.log(`[OpenCode] Native messaging permission not granted. ${PERMISSION_HINT}`)
+    }
+    return
+  }
+
+  nativePermissionHintLogged = false
+
   try {
     port = chrome.runtime.connectNative(NATIVE_HOST_NAME)
 
@@ -111,6 +305,12 @@ async function executeTool(toolName, args) {
     query: toolQuery,
     scroll: toolScroll,
     wait: toolWait,
+    download: toolDownload,
+    list_downloads: toolListDownloads,
+    set_file_input: toolSetFileInput,
+    highlight: toolHighlight,
+    console: toolConsole,
+    errors: toolErrors,
   }
 
   const fn = tools[toolName]
@@ -129,13 +329,26 @@ async function getTabById(tabId) {
 }
 
 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
+  const hasHostAccess = await hasHostAccessPermission()
+  if (!hasHostAccess) {
+    throw new Error(`Site access permission not granted. ${PERMISSION_HINT}`)
+  }
+
+  try {
+    const result = await chrome.scripting.executeScript({
+      target: { tabId },
+      func: pageOps,
+      args: [command, args || {}],
+      world: "ISOLATED",
+    })
+    return result[0]?.result
+  } catch (error) {
+    const message = error?.message || String(error)
+    if (message.includes("Cannot access contents of the page")) {
+      throw new Error(`Site access permission not granted for this page. ${PERMISSION_HINT}`)
+    }
+    throw error
+  }
 }
 
 async function pageOps(command, args) {
@@ -309,7 +522,7 @@ async function pageOps(command, args) {
     const results = []
     const seen = new Set()
     const candidates = deepQuerySelectorAll(
-      "button, a, label, option, summary, [role='button'], [role='link'], [role='tab'], [role='menuitem']",
+      "button, a, label, option, summary, [role='button'], [role='link'], [role='tab'], [role='menuitem'], [role='option'], [role='listitem'], [role='row'], [tabindex]",
       document
     )
     for (const el of candidates) {
@@ -319,6 +532,23 @@ async function pageOps(command, args) {
         results.push(el)
       }
     }
+
+    const generic = deepQuerySelectorAll("div, span, li, article", document)
+    for (const el of generic) {
+      if (!matchesText(el.innerText || el.textContent || "", target)) continue
+      const style = window.getComputedStyle(el)
+      const likelyInteractive =
+        !!el.getAttribute("onclick") ||
+        !!el.getAttribute("role") ||
+        el.tabIndex >= 0 ||
+        style.cursor === "pointer"
+      if (!likelyInteractive) continue
+      if (!seen.has(el)) {
+        seen.add(el)
+        results.push(el)
+      }
+    }
+
     const inputs = deepQuerySelectorAll("input[type='button'], input[type='submit'], input[type='reset']", document)
     for (const el of inputs) {
       if (!matchesText(el.value || "", target)) continue
@@ -609,6 +839,67 @@ async function pageOps(command, args) {
     }
   }
 
+  if (command === "set_file_input") {
+    const rawFiles = Array.isArray(options.files) ? options.files : options.files ? [options.files] : []
+    if (!rawFiles.length) return { ok: false, error: "files is required" }
+
+    const match = await resolveMatches(selectors, index, timeoutMs, pollMs)
+    if (!match.chosen) {
+      return { ok: false, error: `Element not found for selectors: ${selectors.join(", ")}` }
+    }
+
+    const tag = match.chosen.tagName
+    if (tag !== "INPUT" || match.chosen.type !== "file") {
+      return { ok: false, error: `Element is not a file input: ${match.selectorUsed} (${tag.toLowerCase()})` }
+    }
+
+    function decodeBase64(value) {
+      const raw = safeString(value)
+      const b64 = raw.includes(",") ? raw.split(",").pop() : raw
+      const binary = atob(b64)
+      const bytes = new Uint8Array(binary.length)
+      for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i)
+      return bytes
+    }
+
+    const dt = new DataTransfer()
+    const names = []
+
+    for (const fileInfo of rawFiles) {
+      const name = safeString(fileInfo?.name) || "upload.bin"
+      const mimeType = safeString(fileInfo?.mimeType) || "application/octet-stream"
+      const base64 = safeString(fileInfo?.base64)
+      if (!base64) return { ok: false, error: "file.base64 is required" }
+      const bytes = decodeBase64(base64)
+      const file = new File([bytes], name, { type: mimeType, lastModified: Date.now() })
+      dt.items.add(file)
+      names.push(name)
+    }
+
+    try {
+      match.chosen.scrollIntoView({ block: "center", inline: "center" })
+    } catch {}
+
+    try {
+      match.chosen.focus()
+    } catch {}
+
+    try {
+      match.chosen.files = dt.files
+    } catch {
+      try {
+        Object.defineProperty(match.chosen, "files", { value: dt.files, writable: false })
+      } catch {
+        return { ok: false, error: "Failed to set file input" }
+      }
+    }
+
+    match.chosen.dispatchEvent(new Event("input", { bubbles: true }))
+    match.chosen.dispatchEvent(new Event("change", { bubbles: true }))
+
+    return { ok: true, selectorUsed: match.selectorUsed, count: dt.files.length, names }
+  }
+
   if (command === "scroll") {
     const scrollX = Number.isFinite(options.x) ? options.x : 0
     const scrollY = Number.isFinite(options.y) ? options.y : 0
@@ -617,6 +908,21 @@ async function pageOps(command, args) {
       if (!match.chosen) {
         return { ok: false, error: `Element not found for selectors: ${selectors.join(", ")}` }
       }
+      if (scrollX || scrollY) {
+        try {
+          if (typeof match.chosen.scrollBy === "function") {
+            match.chosen.scrollBy({ left: scrollX, top: scrollY, behavior: "smooth" })
+          } else {
+            match.chosen.scrollLeft = Number(match.chosen.scrollLeft || 0) + scrollX
+            match.chosen.scrollTop = Number(match.chosen.scrollTop || 0) + scrollY
+          }
+        } catch {
+          match.chosen.scrollLeft = Number(match.chosen.scrollLeft || 0) + scrollX
+          match.chosen.scrollTop = Number(match.chosen.scrollTop || 0) + scrollY
+        }
+        return { ok: true, selectorUsed: match.selectorUsed, elementScroll: { x: scrollX, y: scrollY } }
+      }
+
       try {
         match.chosen.scrollIntoView({ behavior: "smooth", block: "center" })
       } catch {}
@@ -626,6 +932,73 @@ async function pageOps(command, args) {
     return { ok: true }
   }
 
+  if (command === "highlight") {
+    const duration = Number.isFinite(options.duration) ? options.duration : 3000
+    const color = typeof options.color === "string" ? options.color : "#ff0000"
+    const showInfo = !!options.showInfo
+
+    const match = await resolveMatches(selectors, index, timeoutMs, pollMs)
+    if (!match.chosen) {
+      return { ok: false, error: `Element not found for selectors: ${selectors.join(", ")}` }
+    }
+
+    const el = match.chosen
+    const rect = el.getBoundingClientRect()
+
+    // Remove any existing highlight overlay
+    const existing = document.getElementById("__opc_highlight_overlay")
+    if (existing) existing.remove()
+
+    // Create overlay
+    const overlay = document.createElement("div")
+    overlay.id = "__opc_highlight_overlay"
+    overlay.style.cssText = `
+      position: fixed;
+      top: ${rect.top}px;
+      left: ${rect.left}px;
+      width: ${rect.width}px;
+      height: ${rect.height}px;
+      border: 3px solid ${color};
+      box-shadow: 0 0 10px ${color};
+      pointer-events: none;
+      z-index: 2147483647;
+      transition: opacity 0.3s;
+    `
+
+    if (showInfo) {
+      const info = document.createElement("div")
+      info.style.cssText = `
+        position: absolute;
+        top: -25px;
+        left: 0;
+        background: ${color};
+        color: white;
+        padding: 2px 8px;
+        font-size: 12px;
+        font-family: monospace;
+        border-radius: 3px;
+        white-space: nowrap;
+      `
+      info.textContent = `${el.tagName.toLowerCase()}${el.id ? "#" + el.id : ""}`
+      overlay.appendChild(info)
+    }
+
+    document.body.appendChild(overlay)
+
+    setTimeout(() => {
+      overlay.style.opacity = "0"
+      setTimeout(() => overlay.remove(), 300)
+    }, duration)
+
+    return {
+      ok: true,
+      selectorUsed: match.selectorUsed,
+      highlighted: true,
+      tag: el.tagName,
+      id: el.id || null,
+    }
+  }
+
   if (command === "query") {
     if (mode === "page_text") {
       if (selectors.length && timeoutMs > 0) {
@@ -986,16 +1359,250 @@ async function toolWait({ ms = 1000, tabId }) {
   return { tabId, content: `Waited ${ms}ms` }
 }
 
-chrome.runtime.onInstalled.addListener(() => connect())
-chrome.runtime.onStartup.addListener(() => connect())
-chrome.action.onClicked.addListener(() => {
-  connect()
-  chrome.notifications.create({
-    type: "basic",
-    iconUrl: "icons/icon128.png",
-    title: "OpenCode Browser",
-    message: isConnected ? "Connected" : "Reconnecting...",
+function clampNumber(value, min, max, fallback) {
+  const n = Number(value)
+  if (!Number.isFinite(n)) return fallback
+  return Math.min(Math.max(n, min), max)
+}
+
+function normalizeDownloadTimeoutMs(value) {
+  return clampNumber(value, 0, 60000, 60000)
+}
+
+function waitForNextDownloadCreated(timeoutMs) {
+  const timeout = normalizeDownloadTimeoutMs(timeoutMs)
+  return new Promise((resolve, reject) => {
+    const listener = (item) => {
+      cleanup()
+      resolve(item)
+    }
+
+    const timer = timeout
+      ? setTimeout(() => {
+          cleanup()
+          reject(new Error("Timed out waiting for download to start"))
+        }, timeout)
+      : null
+
+    function cleanup() {
+      chrome.downloads.onCreated.removeListener(listener)
+      if (timer) clearTimeout(timer)
+    }
+
+    chrome.downloads.onCreated.addListener(listener)
+  })
+}
+
+async function getDownloadById(downloadId) {
+  const items = await chrome.downloads.search({ id: downloadId })
+  return items && items.length ? items[0] : null
+}
+
+async function waitForDownloadCompletion(downloadId, timeoutMs) {
+  const timeout = normalizeDownloadTimeoutMs(timeoutMs)
+  const pollMs = 200
+  const endAt = Date.now() + timeout
+
+  while (true) {
+    const item = await getDownloadById(downloadId)
+    if (item && (item.state === "complete" || item.state === "interrupted")) return item
+    if (!timeout || Date.now() >= endAt) return item
+    await new Promise((resolve) => setTimeout(resolve, pollMs))
+  }
+}
+
+async function toolDownload({
+  url,
+  selector,
+  filename,
+  conflictAction,
+  saveAs = false,
+  wait = false,
+  downloadTimeoutMs,
+  tabId,
+  index = 0,
+  timeoutMs,
+  pollMs,
+}) {
+  const hasUrl = typeof url === "string" && url.trim()
+  const hasSelector = typeof selector === "string" && selector.trim()
+
+  await ensureDownloadsAvailable()
+
+  if (!hasUrl && !hasSelector) throw new Error("url or selector is required")
+  if (hasUrl && hasSelector) throw new Error("Provide either url or selector, not both")
+
+  let downloadId = null
+
+  if (hasUrl) {
+    const options = { url: url.trim() }
+    if (typeof filename === "string" && filename.trim()) options.filename = filename.trim()
+    if (typeof conflictAction === "string" && conflictAction.trim()) options.conflictAction = conflictAction.trim()
+    if (typeof saveAs === "boolean") options.saveAs = saveAs
+
+    downloadId = await chrome.downloads.download(options)
+  } else {
+    const tab = await getTabById(tabId)
+    const created = waitForNextDownloadCreated(downloadTimeoutMs)
+    const clicked = await runInPage(tab.id, "click", { selector, index, timeoutMs, pollMs })
+    if (!clicked?.ok) throw new Error(clicked?.error || "Click failed")
+    const createdItem = await created
+    downloadId = createdItem?.id
+  }
+
+  if (!Number.isFinite(downloadId)) throw new Error("Download did not start")
+
+  if (!wait) {
+    const item = await getDownloadById(downloadId)
+    return { content: { downloadId, item } }
+  }
+
+  const item = await waitForDownloadCompletion(downloadId, downloadTimeoutMs)
+  return { content: { downloadId, item } }
+}
+
+async function toolListDownloads({ limit = 20, state } = {}) {
+  await ensureDownloadsAvailable()
+
+  const limitValue = clampNumber(limit, 1, 200, 20)
+  const query = { orderBy: ["-startTime"], limit: limitValue }
+  if (typeof state === "string" && state.trim()) query.state = state.trim()
+
+  const downloads = await chrome.downloads.search(query)
+  const out = downloads.map((d) => ({
+    id: d.id,
+    url: d.url,
+    filename: d.filename,
+    state: d.state,
+    bytesReceived: d.bytesReceived,
+    totalBytes: d.totalBytes,
+    startTime: d.startTime,
+    endTime: d.endTime,
+    error: d.error,
+    mime: d.mime,
+  }))
+
+  return { content: JSON.stringify({ downloads: out }, null, 2) }
+}
+
+async function toolSetFileInput({ selector, tabId, index = 0, timeoutMs, pollMs, files }) {
+  if (!selector) throw new Error("Selector is required")
+  const tab = await getTabById(tabId)
+
+  const result = await runInPage(tab.id, "set_file_input", { selector, index, timeoutMs, pollMs, files })
+  if (!result?.ok) throw new Error(result?.error || "Failed to set file input")
+  const used = result.selectorUsed || selector
+  return { tabId: tab.id, content: JSON.stringify({ selector: used, ...result }, null, 2) }
+}
+
+async function toolHighlight({ selector, tabId, index = 0, duration, color, showInfo, timeoutMs, pollMs }) {
+  if (!selector) throw new Error("Selector is required")
+  const tab = await getTabById(tabId)
+
+  const result = await runInPage(tab.id, "highlight", {
+    selector,
+    index,
+    duration,
+    color,
+    showInfo,
+    timeoutMs,
+    pollMs,
   })
+  if (!result?.ok) throw new Error(result?.error || "Highlight failed")
+  return {
+    tabId: tab.id,
+    content: JSON.stringify({
+      highlighted: true,
+      tag: result.tag,
+      id: result.id,
+      selectorUsed: result.selectorUsed,
+    }),
+  }
+}
+
+async function toolConsole({ tabId, clear = false, filter } = {}) {
+  const tab = await getTabById(tabId)
+  const state = await ensureDebuggerAttached(tab.id)
+
+  if (!state.attached) {
+    return {
+      tabId: tab.id,
+      content: JSON.stringify({
+        error: state.unavailableReason || "Debugger not attached. DevTools may be open or another debugger is active.",
+        messages: [],
+      }),
+    }
+  }
+
+  let messages = [...state.consoleMessages]
+
+  if (filter && typeof filter === "string") {
+    const filterType = filter.toLowerCase()
+    messages = messages.filter((m) => m.type === filterType)
+  }
+
+  if (clear) {
+    state.consoleMessages = []
+  }
+
+  return {
+    tabId: tab.id,
+    content: JSON.stringify(messages, null, 2),
+  }
+}
+
+async function toolErrors({ tabId, clear = false } = {}) {
+  const tab = await getTabById(tabId)
+  const state = await ensureDebuggerAttached(tab.id)
+
+  if (!state.attached) {
+    return {
+      tabId: tab.id,
+      content: JSON.stringify({
+        error: state.unavailableReason || "Debugger not attached. DevTools may be open or another debugger is active.",
+        errors: [],
+      }),
+    }
+  }
+
+  const errors = [...state.pageErrors]
+
+  if (clear) {
+    state.pageErrors = []
+  }
+
+  return {
+    tabId: tab.id,
+    content: JSON.stringify(errors, null, 2),
+  }
+}
+
+chrome.runtime.onInstalled.addListener(() => connect().catch(() => {}))
+chrome.runtime.onStartup.addListener(() => connect().catch(() => {}))
+
+if (chrome.permissions?.onAdded) {
+  chrome.permissions.onAdded.addListener(() => connect().catch(() => {}))
+}
+
+chrome.action.onClicked.addListener(async () => {
+  const permissionResult = await requestOptionalPermissionsFromClick()
+  if (!permissionResult.granted) {
+    updateBadge(false)
+    if (permissionResult.error) {
+      console.warn("[OpenCode] Permission request failed:", permissionResult.error)
+    } else {
+      console.warn("[OpenCode] Permission request denied.")
+    }
+    return
+  }
+
+  if (permissionResult.requested) {
+    const requestedPermissions = permissionResult.permissions.join(", ") || "none"
+    const requestedOrigins = permissionResult.origins.join(", ") || "none"
+    console.log(`[OpenCode] Requested permissions -> permissions: ${requestedPermissions}; origins: ${requestedOrigins}`)
+  }
+
+  await connect()
 })
 
-connect()
+connect().catch(() => {})