@different-ai/opencode-browser 3.0.0 → 4.0.1

package/bin/native-host.cjs

@@ -0,0 +1,136 @@
+#!/usr/bin/env node
+"use strict";
+
+// Chrome Native Messaging host for OpenCode Browser.
+// Speaks length-prefixed JSON over stdin/stdout and forwards messages to the local broker over a unix socket.
+
+const net = require("net");
+const fs = require("fs");
+const os = require("os");
+const path = require("path");
+const { spawn } = require("child_process");
+
+const BASE_DIR = path.join(os.homedir(), ".opencode-browser");
+const SOCKET_PATH = path.join(BASE_DIR, "broker.sock");
+const BROKER_PATH = path.join(BASE_DIR, "broker.cjs");
+
+fs.mkdirSync(BASE_DIR, { recursive: true });
+
+function createJsonLineParser(onMessage) {
+  let buffer = "";
+  return (chunk) => {
+    buffer += chunk.toString("utf8");
+    while (true) {
+      const idx = buffer.indexOf("\n");
+      if (idx === -1) return;
+      const line = buffer.slice(0, idx);
+      buffer = buffer.slice(idx + 1);
+      if (!line.trim()) continue;
+      try {
+        onMessage(JSON.parse(line));
+      } catch {
+        // ignore
+      }
+    }
+  };
+}
+
+function writeJsonLine(socket, msg) {
+  socket.write(JSON.stringify(msg) + "\n");
+}
+
+function maybeStartBroker() {
+  try {
+    if (!fs.existsSync(BROKER_PATH)) return;
+    const child = spawn(process.execPath, [BROKER_PATH], { detached: true, stdio: "ignore" });
+    child.unref();
+  } catch {
+    // ignore
+  }
+}
+
+async function connectToBroker() {
+  return await new Promise((resolve, reject) => {
+    const socket = net.createConnection(SOCKET_PATH);
+    socket.once("connect", () => resolve(socket));
+    socket.once("error", (err) => reject(err));
+  });
+}
+
+async function ensureBroker() {
+  try {
+    return await connectToBroker();
+  } catch {
+    maybeStartBroker();
+    for (let i = 0; i < 50; i++) {
+      await new Promise((r) => setTimeout(r, 100));
+      try {
+        return await connectToBroker();
+      } catch {}
+    }
+    throw new Error("Could not connect to broker");
+  }
+}
+
+// --- Native messaging framing ---
+let stdinBuffer = Buffer.alloc(0);
+
+function writeNativeMessage(obj) {
+  try {
+    const payload = Buffer.from(JSON.stringify(obj), "utf8");
+    const header = Buffer.alloc(4);
+    header.writeUInt32LE(payload.length, 0);
+    process.stdout.write(Buffer.concat([header, payload]));
+  } catch (e) {
+    console.error("[native-host] write error", e);
+  }
+}
+
+function onStdinData(chunk, onMessage) {
+  stdinBuffer = Buffer.concat([stdinBuffer, chunk]);
+  while (stdinBuffer.length >= 4) {
+    const len = stdinBuffer.readUInt32LE(0);
+    if (stdinBuffer.length < 4 + len) return;
+    const body = stdinBuffer.slice(4, 4 + len);
+    stdinBuffer = stdinBuffer.slice(4 + len);
+    try {
+      onMessage(JSON.parse(body.toString("utf8")));
+    } catch {
+      // ignore
+    }
+  }
+}
+
+(async () => {
+  const broker = await ensureBroker();
+  broker.setNoDelay(true);
+  broker.on("data", createJsonLineParser((msg) => {
+    if (msg && msg.type === "to_extension" && msg.message) {
+      writeNativeMessage(msg.message);
+    }
+  }));
+
+  broker.on("close", () => {
+    process.exit(0);
+  });
+
+  broker.on("error", () => {
+    process.exit(1);
+  });
+
+  writeJsonLine(broker, { type: "hello", role: "native-host" });
+
+  process.stdin.on("data", (chunk) =>
+    onStdinData(chunk, (message) => {
+      // Forward extension-origin messages to broker.
+      writeJsonLine(broker, { type: "from_extension", message });
+    })
+  );
+
+  process.stdin.on("end", () => {
+    try {
+      broker.end();
+    } catch {}
+    process.exit(0);
+  });
+})();

package/extension/background.js

@@ -1,306 +1,351 @@
-const PLUGIN_URL = "ws://localhost:19222";
-const KEEPALIVE_ALARM = "keepalive";
+const NATIVE_HOST_NAME = "com.opencode.browser_automation"
+const KEEPALIVE_ALARM = "keepalive"
 
-let ws = null;
-let isConnected = false;
+let port = null
+let isConnected = false
+let connectionAttempts = 0
 
-chrome.alarms.create(KEEPALIVE_ALARM, { periodInMinutes: 0.25 });
+chrome.alarms.create(KEEPALIVE_ALARM, { periodInMinutes: 0.25 })
 
 chrome.alarms.onAlarm.addListener((alarm) => {
   if (alarm.name === KEEPALIVE_ALARM) {
-    if (!isConnected) {
-      console.log("[OpenCode] Alarm triggered reconnect");
-      connect();
-    }
+    if (!isConnected) connect()
   }
-});
+})
 
 function connect() {
-  if (ws && ws.readyState === WebSocket.OPEN) return;
-  if (ws) {
-    try { ws.close(); } catch {}
-    ws = null;
+  if (port) {
+    try { port.disconnect() } catch {}
+    port = null
   }
-  
+
   try {
-    ws = new WebSocket(PLUGIN_URL);
-    
-    ws.onopen = () => {
-      console.log("[OpenCode] Connected to plugin");
-      isConnected = true;
-      updateBadge(true);
-    };
-    
-    ws.onmessage = async (event) => {
-      try {
-        const message = JSON.parse(event.data);
-        await handleMessage(message);
-      } catch (e) {
-        console.error("[OpenCode] Parse error:", e);
+    port = chrome.runtime.connectNative(NATIVE_HOST_NAME)
+
+    port.onMessage.addListener((message) => {
+      handleMessage(message).catch((e) => {
+        console.error("[OpenCode] Message handler error:", e)
+      })
+    })
+
+    port.onDisconnect.addListener(() => {
+      isConnected = false
+      port = null
+      updateBadge(false)
+
+      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")
+        } else if (connectionAttempts % 20 === 0) {
+          console.log("[OpenCode] Still waiting for native host...")
+        }
       }
-    };
-    
-    ws.onclose = () => {
-      console.log("[OpenCode] Disconnected");
-      isConnected = false;
-      ws = null;
-      updateBadge(false);
-    };
-    
-    ws.onerror = (err) => {
-      console.error("[OpenCode] WebSocket error");
-      isConnected = false;
-      updateBadge(false);
-    };
+    })
+
+    isConnected = true
+    connectionAttempts = 0
+    updateBadge(true)
   } catch (e) {
-    console.error("[OpenCode] Connect failed:", e);
-    isConnected = false;
-    updateBadge(false);
+    isConnected = false
+    updateBadge(false)
+    console.error("[OpenCode] connectNative failed:", e)
   }
 }
 
 function updateBadge(connected) {
-  chrome.action.setBadgeText({ text: connected ? "ON" : "" });
-  chrome.action.setBadgeBackgroundColor({ color: connected ? "#22c55e" : "#ef4444" });
+  chrome.action.setBadgeText({ text: connected ? "ON" : "" })
+  chrome.action.setBadgeBackgroundColor({ color: connected ? "#22c55e" : "#ef4444" })
 }
 
 function send(message) {
-  if (ws && ws.readyState === WebSocket.OPEN) {
-    ws.send(JSON.stringify(message));
-    return true;
+  if (!port) return false
+  try {
+    port.postMessage(message)
+    return true
+  } catch {
+    return false
   }
-  return false;
 }
 
 async function handleMessage(message) {
+  if (!message || typeof message !== "object") return
+
   if (message.type === "tool_request") {
-    await handleToolRequest(message);
+    await handleToolRequest(message)
   } else if (message.type === "ping") {
-    send({ type: "pong" });
+    send({ type: "pong" })
   }
 }
 
 async function handleToolRequest(request) {
-  const { id, tool, args } = request;
-  
+  const { id, tool, args } = request
+
   try {
-    const result = await executeTool(tool, args || {});
-    send({ type: "tool_response", id, result: { content: result } });
+    const result = await executeTool(tool, args || {})
+    send({ type: "tool_response", id, result })
   } catch (error) {
-    send({ type: "tool_response", id, error: { content: error.message || String(error) } });
+    send({
+      type: "tool_response",
+      id,
+      error: { content: error?.message || String(error) },
+    })
   }
 }
 
 async function executeTool(toolName, args) {
   const tools = {
+    get_active_tab: toolGetActiveTab,
+    get_tabs: toolGetTabs,
     navigate: toolNavigate,
     click: toolClick,
     type: toolType,
     screenshot: toolScreenshot,
     snapshot: toolSnapshot,
-    get_tabs: toolGetTabs,
     execute_script: toolExecuteScript,
     scroll: toolScroll,
-    wait: toolWait
-  };
-  
-  const fn = tools[toolName];
-  if (!fn) throw new Error(`Unknown tool: ${toolName}`);
-  return await fn(args);
+    wait: toolWait,
+  }
+
+  const fn = tools[toolName]
+  if (!fn) throw new Error(`Unknown tool: ${toolName}`)
+  return await fn(args)
 }
 
 async function getActiveTab() {
-  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
-  if (!tab?.id) throw new Error("No active tab found");
-  return tab;
+  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true })
+  if (!tab?.id) throw new Error("No active tab found")
+  return tab
 }
 
 async function getTabById(tabId) {
-  return tabId ? await chrome.tabs.get(tabId) : await getActiveTab();
+  return tabId ? await chrome.tabs.get(tabId) : await getActiveTab()
+}
+
+async function toolGetActiveTab() {
+  const tab = await getActiveTab()
+  return { tabId: tab.id, content: { tabId: tab.id, url: tab.url, title: tab.title } }
 }
 
 async function toolNavigate({ url, tabId }) {
-  if (!url) throw new Error("URL is required");
-  const tab = await getTabById(tabId);
-  await chrome.tabs.update(tab.id, { url });
-  
+  if (!url) throw new Error("URL is required")
+  const tab = await getTabById(tabId)
+  await chrome.tabs.update(tab.id, { url })
+
   await new Promise((resolve) => {
     const listener = (updatedTabId, info) => {
       if (updatedTabId === tab.id && info.status === "complete") {
-        chrome.tabs.onUpdated.removeListener(listener);
-        resolve();
+        chrome.tabs.onUpdated.removeListener(listener)
+        resolve()
       }
-    };
-    chrome.tabs.onUpdated.addListener(listener);
-    setTimeout(() => { chrome.tabs.onUpdated.removeListener(listener); resolve(); }, 30000);
-  });
-  
-  return `Navigated to ${url}`;
+    }
+    chrome.tabs.onUpdated.addListener(listener)
+    setTimeout(() => {
+      chrome.tabs.onUpdated.removeListener(listener)
+      resolve()
+    }, 30000)
+  })
+
+  return { tabId: tab.id, content: `Navigated to ${url}` }
 }
 
 async function toolClick({ selector, tabId }) {
-  if (!selector) throw new Error("Selector is required");
-  const tab = await getTabById(tabId);
-  
+  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 };
+      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 `Clicked ${selector}`;
+    args: [selector],
+  })
+
+  if (!result[0]?.result?.success) throw new Error(result[0]?.result?.error || "Click failed")
+  return { tabId: tab.id, content: `Clicked ${selector}` }
 }
 
 async function toolType({ selector, text, tabId, clear = false }) {
-  if (!selector) throw new Error("Selector is required");
-  if (text === undefined) throw new Error("Text is required");
-  const tab = await getTabById(tabId);
-  
+  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.value = "";
+      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 }));
+        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);
+        document.execCommand("insertText", false, txt)
       }
-      return { success: true };
+      return { success: true }
     },
-    args: [selector, text, clear]
-  });
-  
-  if (!result[0]?.result?.success) throw new Error(result[0]?.result?.error || "Type failed");
-  return `Typed "${text}" into ${selector}`;
+    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}` }
 }
 
 async function toolScreenshot({ tabId }) {
-  const tab = await getTabById(tabId);
-  return await chrome.tabs.captureVisibleTab(tab.windowId, { format: "png" });
+  const tab = await getTabById(tabId)
+  const png = await chrome.tabs.captureVisibleTab(tab.windowId, { format: "png" })
+  return { tabId: tab.id, content: png }
 }
 
 async function toolSnapshot({ tabId }) {
-  const tab = await getTabById(tabId);
-  
+  const tab = await getTabById(tabId)
+
   const result = await chrome.scripting.executeScript({
     target: { tabId: tab.id },
     func: () => {
       function getName(el) {
-        return el.getAttribute("aria-label") || el.getAttribute("alt") || 
-               el.getAttribute("title") || el.getAttribute("placeholder") || 
-               el.innerText?.slice(0, 100) || "";
+        return (
+          el.getAttribute("aria-label") ||
+          el.getAttribute("alt") ||
+          el.getAttribute("title") ||
+          el.getAttribute("placeholder") ||
+          el.innerText?.slice(0, 100) ||
+          ""
+        )
       }
-      
+
       function build(el, depth = 0, uid = 0) {
-        if (depth > 10) return { nodes: [], nextUid: uid };
-        const nodes = [];
-        const style = window.getComputedStyle(el);
-        if (style.display === "none" || style.visibility === "hidden") 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 (depth > 10) return { nodes: [], nextUid: uid }
+        const nodes = []
+        const style = window.getComputedStyle(el)
+        if (style.display === "none" || style.visibility === "hidden") 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 node = { uid: `e${uid}`, role: el.getAttribute("role") || el.tagName.toLowerCase(), 
-                        name: getName(el).slice(0, 200), tag: el.tagName.toLowerCase() };
-          // Capture href for any element that has one (links, area, base, etc.)
-          if (el.href) node.href = el.href;
-          if (el.tagName === "INPUT") { node.type = el.type; node.value = el.value; }
-          if (el.id) node.selector = `#${el.id}`;
+          const node = {
+            uid: `e${uid}`,
+            role: el.getAttribute("role") || el.tagName.toLowerCase(),
+            name: getName(el).slice(0, 200),
+            tag: el.tagName.toLowerCase(),
+          }
+          if (el.href) node.href = el.href
+          if (el.tagName === "INPUT") {
+            node.type = el.type
+            node.value = el.value
+          }
+          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}`;
+            const cls = el.className.trim().split(/\s+/).slice(0, 2).join(".")
+            if (cls) node.selector = `${el.tagName.toLowerCase()}.${cls}`
           }
-          nodes.push(node);
-          uid++;
+          nodes.push(node)
+          uid++
         }
-        
+
         for (const child of el.children) {
-          const r = build(child, depth + 1, uid);
-          nodes.push(...r.nodes);
-          uid = r.nextUid;
+          const r = build(child, depth + 1, uid)
+          nodes.push(...r.nodes)
+          uid = r.nextUid
         }
-        return { nodes, nextUid: uid };
+        return { nodes, nextUid: uid }
       }
-      
-      // Collect all links on the page separately for easy access
+
       function getAllLinks() {
-        const links = [];
-        const seen = new Set();
-        document.querySelectorAll("a[href]").forEach(a => {
-          const href = a.href;
+        const links = []
+        const seen = new Set()
+        document.querySelectorAll("a[href]").forEach((a) => {
+          const href = a.href
           if (href && !seen.has(href) && !href.startsWith("javascript:")) {
-            seen.add(href);
-            const text = a.innerText?.trim().slice(0, 100) || a.getAttribute("aria-label") || "";
-            links.push({ href, text });
+            seen.add(href)
+            const text = a.innerText?.trim().slice(0, 100) || a.getAttribute("aria-label") || ""
+            links.push({ href, text })
           }
-        });
-        return links.slice(0, 100); // Limit to 100 links
+        })
+        return links.slice(0, 100)
       }
-      
-      return { 
-        url: location.href, 
-        title: document.title, 
+
+      return {
+        url: location.href,
+        title: document.title,
         nodes: build(document.body).nodes.slice(0, 500),
-        links: getAllLinks()
-      };
-    }
-  });
-  
-  return JSON.stringify(result[0]?.result, null, 2);
+        links: getAllLinks(),
+      }
+    },
+  })
+
+  return { tabId: tab.id, content: JSON.stringify(result[0]?.result, null, 2) }
 }
 
 async function toolGetTabs() {
-  const tabs = await chrome.tabs.query({});
-  return JSON.stringify(tabs.map(t => ({ id: t.id, url: t.url, title: t.title, active: t.active, windowId: t.windowId })), null, 2);
+  const tabs = await chrome.tabs.query({})
+  const out = tabs.map((t) => ({ id: t.id, url: t.url, title: t.title, active: t.active, windowId: t.windowId }))
+  return { content: JSON.stringify(out, null, 2) }
 }
 
 async function toolExecuteScript({ code, tabId }) {
-  if (!code) throw new Error("Code is required");
-  const tab = await getTabById(tabId);
-  const result = await chrome.scripting.executeScript({ target: { tabId: tab.id }, func: new Function(code) });
-  return JSON.stringify(result[0]?.result);
+  if (!code) throw new Error("Code is required")
+  const tab = await getTabById(tabId)
+  const result = await chrome.scripting.executeScript({
+    target: { tabId: tab.id },
+    func: new Function(code),
+  })
+  return { tabId: tab.id, content: JSON.stringify(result[0]?.result) }
 }
 
 async function toolScroll({ x = 0, y = 0, selector, tabId }) {
-  const tab = await getTabById(tabId);
-  const sel = selector || null;
-  
+  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);
+      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 `Scrolled ${sel ? `to ${sel}` : `by (${x}, ${y})`}`;
+    args: [x, y, sel],
+  })
+
+  return { tabId: tab.id, content: `Scrolled ${sel ? `to ${sel}` : `by (${x}, ${y})`}` }
 }
 
-async function toolWait({ ms = 1000 }) {
-  await new Promise(resolve => setTimeout(resolve, ms));
-  return `Waited ${ms}ms`;
+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` }
 }
 
-chrome.runtime.onInstalled.addListener(() => connect());
-chrome.runtime.onStartup.addListener(() => connect());
+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..." });
-});
+  connect()
+  chrome.notifications.create({
+    type: "basic",
+    iconUrl: "icons/icon128.png",
+    title: "OpenCode Browser",
+    message: isConnected ? "Connected" : "Reconnecting...",
+  })
+})
 
-connect();
+connect()