@jackwener/opencli 0.9.8 → 1.0.0

package/extension/src/background.ts

@@ -0,0 +1,293 @@
+/**
+ * opencli Browser Bridge — Service Worker (background script).
+ *
+ * Connects to the opencli daemon via WebSocket, receives commands,
+ * dispatches them to Chrome APIs (debugger/tabs/cookies), returns results.
+ */
+
+import type { Command, Result } from './protocol';
+import { DAEMON_WS_URL, WS_RECONNECT_BASE_DELAY, WS_RECONNECT_MAX_DELAY } from './protocol';
+import * as cdp from './cdp';
+
+let ws: WebSocket | null = null;
+let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+let reconnectAttempts = 0;
+
+// ─── Console log forwarding ──────────────────────────────────────────
+// Hook console.log/warn/error to forward logs to daemon via WebSocket.
+
+const _origLog = console.log.bind(console);
+const _origWarn = console.warn.bind(console);
+const _origError = console.error.bind(console);
+
+function forwardLog(level: 'info' | 'warn' | 'error', args: unknown[]): void {
+  if (!ws || ws.readyState !== WebSocket.OPEN) return;
+  try {
+    const msg = args.map(a => typeof a === 'string' ? a : JSON.stringify(a)).join(' ');
+    ws.send(JSON.stringify({ type: 'log', level, msg, ts: Date.now() }));
+  } catch { /* don't recurse */ }
+}
+
+console.log = (...args: unknown[]) => { _origLog(...args); forwardLog('info', args); };
+console.warn = (...args: unknown[]) => { _origWarn(...args); forwardLog('warn', args); };
+console.error = (...args: unknown[]) => { _origError(...args); forwardLog('error', args); };
+
+// ─── WebSocket connection ────────────────────────────────────────────
+
+function connect(): void {
+  if (ws?.readyState === WebSocket.OPEN || ws?.readyState === WebSocket.CONNECTING) return;
+
+  try {
+    ws = new WebSocket(DAEMON_WS_URL);
+  } catch {
+    scheduleReconnect();
+    return;
+  }
+
+  ws.onopen = () => {
+    console.log('[opencli] Connected to daemon');
+    reconnectAttempts = 0; // Reset on successful connection
+    if (reconnectTimer) {
+      clearTimeout(reconnectTimer);
+      reconnectTimer = null;
+    }
+  };
+
+  ws.onmessage = async (event) => {
+    try {
+      const command = JSON.parse(event.data as string) as Command;
+      const result = await handleCommand(command);
+      ws?.send(JSON.stringify(result));
+    } catch (err) {
+      console.error('[opencli] Message handling error:', err);
+    }
+  };
+
+  ws.onclose = () => {
+    console.log('[opencli] Disconnected from daemon');
+    ws = null;
+    scheduleReconnect();
+  };
+
+  ws.onerror = () => {
+    ws?.close();
+  };
+}
+
+function scheduleReconnect(): void {
+  if (reconnectTimer) return;
+  reconnectAttempts++;
+  // Exponential backoff: 2s, 4s, 8s, 16s, ..., capped at 60s
+  const delay = Math.min(WS_RECONNECT_BASE_DELAY * Math.pow(2, reconnectAttempts - 1), WS_RECONNECT_MAX_DELAY);
+  reconnectTimer = setTimeout(() => {
+    reconnectTimer = null;
+    connect();
+  }, delay);
+}
+
+// ─── Lifecycle events ────────────────────────────────────────────────
+
+let initialized = false;
+
+function initialize(): void {
+  if (initialized) return;
+  initialized = true;
+  chrome.alarms.create('keepalive', { periodInMinutes: 0.4 }); // ~24 seconds
+  cdp.registerListeners();
+  connect();
+  console.log('[opencli] Browser Bridge extension initialized');
+}
+
+chrome.runtime.onInstalled.addListener(() => {
+  initialize();
+});
+
+chrome.runtime.onStartup.addListener(() => {
+  initialize();
+});
+
+chrome.alarms.onAlarm.addListener((alarm) => {
+  if (alarm.name === 'keepalive') connect();
+});
+
+// ─── Command dispatcher ─────────────────────────────────────────────
+
+async function handleCommand(cmd: Command): Promise<Result> {
+  try {
+    switch (cmd.action) {
+      case 'exec':
+        return await handleExec(cmd);
+      case 'navigate':
+        return await handleNavigate(cmd);
+      case 'tabs':
+        return await handleTabs(cmd);
+      case 'cookies':
+        return await handleCookies(cmd);
+      case 'screenshot':
+        return await handleScreenshot(cmd);
+      default:
+        return { id: cmd.id, ok: false, error: `Unknown action: ${cmd.action}` };
+    }
+  } catch (err) {
+    return {
+      id: cmd.id,
+      ok: false,
+      error: err instanceof Error ? err.message : String(err),
+    };
+  }
+}
+
+// ─── Action handlers ─────────────────────────────────────────────────
+
+/** Check if a URL is a debuggable web page (not chrome:// or extension page) */
+function isWebUrl(url?: string): boolean {
+  if (!url) return false;
+  return !url.startsWith('chrome://') && !url.startsWith('chrome-extension://');
+}
+
+/** Resolve target tab: use specified tabId or fall back to active web page tab */
+async function resolveTabId(tabId?: number): Promise<number> {
+  if (tabId !== undefined) return tabId;
+
+  // Try the active tab first
+  const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true });
+  if (activeTab?.id && isWebUrl(activeTab.url)) {
+    return activeTab.id;
+  }
+
+  // Active tab is not debuggable — try to find any open web page tab
+  const allTabs = await chrome.tabs.query({ currentWindow: true });
+  const webTab = allTabs.find(t => t.id && isWebUrl(t.url));
+  if (webTab?.id) {
+    await chrome.tabs.update(webTab.id, { active: true });
+    return webTab.id;
+  }
+
+  // No web tabs at all — create one
+  const newTab = await chrome.tabs.create({ url: 'about:blank', active: true });
+  if (!newTab.id) throw new Error('Failed to create new tab');
+  return newTab.id;
+}
+
+async function handleExec(cmd: Command): Promise<Result> {
+  if (!cmd.code) return { id: cmd.id, ok: false, error: 'Missing code' };
+  const tabId = await resolveTabId(cmd.tabId);
+  try {
+    const data = await cdp.evaluateAsync(tabId, cmd.code);
+    return { id: cmd.id, ok: true, data };
+  } catch (err) {
+    return { id: cmd.id, ok: false, error: err instanceof Error ? err.message : String(err) };
+  }
+}
+
+async function handleNavigate(cmd: Command): Promise<Result> {
+  if (!cmd.url) return { id: cmd.id, ok: false, error: 'Missing url' };
+  const tabId = await resolveTabId(cmd.tabId);
+  await chrome.tabs.update(tabId, { url: cmd.url });
+
+  // Wait for page to finish loading, checking current status first to avoid race
+  await new Promise<void>((resolve) => {
+    // Check if already complete (e.g. cached pages)
+    chrome.tabs.get(tabId).then(tab => {
+      if (tab.status === 'complete') { resolve(); return; }
+
+      const listener = (id: number, info: chrome.tabs.TabChangeInfo) => {
+        if (id === tabId && info.status === 'complete') {
+          chrome.tabs.onUpdated.removeListener(listener);
+          resolve();
+        }
+      };
+      chrome.tabs.onUpdated.addListener(listener);
+      // Timeout fallback
+      setTimeout(() => {
+        chrome.tabs.onUpdated.removeListener(listener);
+        resolve();
+      }, 15000);
+    });
+  });
+
+  const tab = await chrome.tabs.get(tabId);
+  return { id: cmd.id, ok: true, data: { title: tab.title, url: tab.url, tabId } };
+}
+
+async function handleTabs(cmd: Command): Promise<Result> {
+  switch (cmd.op) {
+    case 'list': {
+      const tabs = await chrome.tabs.query({});
+      const data = tabs
+        .filter((t) => isWebUrl(t.url))
+        .map((t, i) => ({
+          index: i,
+          tabId: t.id,
+          url: t.url,
+          title: t.title,
+          active: t.active,
+        }));
+      return { id: cmd.id, ok: true, data };
+    }
+    case 'new': {
+      const tab = await chrome.tabs.create({ url: cmd.url, active: true });
+      return { id: cmd.id, ok: true, data: { tabId: tab.id, url: tab.url } };
+    }
+    case 'close': {
+      if (cmd.index !== undefined) {
+        const tabs = await chrome.tabs.query({});
+        const target = tabs[cmd.index];
+        if (!target?.id) return { id: cmd.id, ok: false, error: `Tab index ${cmd.index} not found` };
+        await chrome.tabs.remove(target.id);
+        cdp.detach(target.id);
+        return { id: cmd.id, ok: true, data: { closed: target.id } };
+      }
+      const tabId = await resolveTabId(cmd.tabId);
+      await chrome.tabs.remove(tabId);
+      cdp.detach(tabId);
+      return { id: cmd.id, ok: true, data: { closed: tabId } };
+    }
+    case 'select': {
+      if (cmd.index === undefined && cmd.tabId === undefined)
+        return { id: cmd.id, ok: false, error: 'Missing index or tabId' };
+      if (cmd.tabId !== undefined) {
+        await chrome.tabs.update(cmd.tabId, { active: true });
+        return { id: cmd.id, ok: true, data: { selected: cmd.tabId } };
+      }
+      const tabs = await chrome.tabs.query({});
+      const target = tabs[cmd.index!];
+      if (!target?.id) return { id: cmd.id, ok: false, error: `Tab index ${cmd.index} not found` };
+      await chrome.tabs.update(target.id, { active: true });
+      return { id: cmd.id, ok: true, data: { selected: target.id } };
+    }
+    default:
+      return { id: cmd.id, ok: false, error: `Unknown tabs op: ${cmd.op}` };
+  }
+}
+
+async function handleCookies(cmd: Command): Promise<Result> {
+  const details: chrome.cookies.GetAllDetails = {};
+  if (cmd.domain) details.domain = cmd.domain;
+  if (cmd.url) details.url = cmd.url;
+  const cookies = await chrome.cookies.getAll(details);
+  const data = cookies.map((c) => ({
+    name: c.name,
+    value: c.value,
+    domain: c.domain,
+    path: c.path,
+    secure: c.secure,
+    httpOnly: c.httpOnly,
+    expirationDate: c.expirationDate,
+  }));
+  return { id: cmd.id, ok: true, data };
+}
+
+async function handleScreenshot(cmd: Command): Promise<Result> {
+  const tabId = await resolveTabId(cmd.tabId);
+  try {
+    const data = await cdp.screenshot(tabId, {
+      format: cmd.format,
+      quality: cmd.quality,
+      fullPage: cmd.fullPage,
+    });
+    return { id: cmd.id, ok: true, data };
+  } catch (err) {
+    return { id: cmd.id, ok: false, error: err instanceof Error ? err.message : String(err) };
+  }
+}

package/extension/src/cdp.ts

@@ -0,0 +1,125 @@
+/**
+ * CDP execution via chrome.debugger API.
+ *
+ * chrome.debugger only needs the "debugger" permission — no host_permissions.
+ * It can attach to any http/https tab. Avoid chrome:// and chrome-extension://
+ * tabs (resolveTabId in background.ts filters them).
+ */
+
+const attached = new Set<number>();
+
+async function ensureAttached(tabId: number): Promise<void> {
+  if (attached.has(tabId)) return;
+
+  try {
+    await chrome.debugger.attach({ tabId }, '1.3');
+  } catch (e: unknown) {
+    const msg = e instanceof Error ? e.message : String(e);
+    if (msg.includes('Another debugger is already attached')) {
+      try { await chrome.debugger.detach({ tabId }); } catch { /* ignore */ }
+      try {
+        await chrome.debugger.attach({ tabId }, '1.3');
+      } catch {
+        throw new Error(`attach failed: ${msg}`);
+      }
+    } else {
+      throw new Error(`attach failed: ${msg}`);
+    }
+  }
+  attached.add(tabId);
+
+  try {
+    await chrome.debugger.sendCommand({ tabId }, 'Runtime.enable');
+  } catch {
+    // Some pages may not need explicit enable
+  }
+}
+
+export async function evaluate(tabId: number, expression: string): Promise<unknown> {
+  await ensureAttached(tabId);
+
+  const result = await chrome.debugger.sendCommand({ tabId }, 'Runtime.evaluate', {
+    expression,
+    returnByValue: true,
+    awaitPromise: true,
+  }) as {
+    result?: { type: string; value?: unknown; description?: string; subtype?: string };
+    exceptionDetails?: { exception?: { description?: string }; text?: string };
+  };
+
+  if (result.exceptionDetails) {
+    const errMsg = result.exceptionDetails.exception?.description
+      || result.exceptionDetails.text
+      || 'Eval error';
+    throw new Error(errMsg);
+  }
+
+  return result.result?.value;
+}
+
+export const evaluateAsync = evaluate;
+
+/**
+ * Capture a screenshot via CDP Page.captureScreenshot.
+ * Returns base64-encoded image data.
+ */
+export async function screenshot(
+  tabId: number,
+  options: { format?: 'png' | 'jpeg'; quality?: number; fullPage?: boolean } = {},
+): Promise<string> {
+  await ensureAttached(tabId);
+
+  const format = options.format ?? 'png';
+
+  // For full-page screenshots, get the full page dimensions first
+  if (options.fullPage) {
+    // Get full page metrics
+    const metrics = await chrome.debugger.sendCommand({ tabId }, 'Page.getLayoutMetrics') as {
+      contentSize?: { width: number; height: number };
+      cssContentSize?: { width: number; height: number };
+    };
+    const size = metrics.cssContentSize || metrics.contentSize;
+    if (size) {
+      // Set device metrics to full page size
+      await chrome.debugger.sendCommand({ tabId }, 'Emulation.setDeviceMetricsOverride', {
+        mobile: false,
+        width: Math.ceil(size.width),
+        height: Math.ceil(size.height),
+        deviceScaleFactor: 1,
+      });
+    }
+  }
+
+  try {
+    const params: Record<string, unknown> = { format };
+    if (format === 'jpeg' && options.quality !== undefined) {
+      params.quality = Math.max(0, Math.min(100, options.quality));
+    }
+
+    const result = await chrome.debugger.sendCommand({ tabId }, 'Page.captureScreenshot', params) as {
+      data: string; // base64-encoded
+    };
+
+    return result.data;
+  } finally {
+    // Reset device metrics if we changed them for full-page
+    if (options.fullPage) {
+      await chrome.debugger.sendCommand({ tabId }, 'Emulation.clearDeviceMetricsOverride').catch(() => {});
+    }
+  }
+}
+
+export function detach(tabId: number): void {
+  if (!attached.has(tabId)) return;
+  attached.delete(tabId);
+  try { chrome.debugger.detach({ tabId }); } catch { /* ignore */ }
+}
+
+export function registerListeners(): void {
+  chrome.tabs.onRemoved.addListener((tabId) => {
+    attached.delete(tabId);
+  });
+  chrome.debugger.onDetach.addListener((source) => {
+    if (source.tabId) attached.delete(source.tabId);
+  });
+}

package/extension/src/protocol.ts

@@ -0,0 +1,57 @@
+/**
+ * opencli browser protocol — shared types between daemon, extension, and CLI.
+ *
+ * 5 actions: exec, navigate, tabs, cookies, screenshot.
+ * Everything else is just JS code sent via 'exec'.
+ */
+
+export type Action = 'exec' | 'navigate' | 'tabs' | 'cookies' | 'screenshot';
+
+export interface Command {
+  /** Unique request ID */
+  id: string;
+  /** Action type */
+  action: Action;
+  /** Target tab ID (omit for active tab) */
+  tabId?: number;
+  /** JS code to evaluate in page context (exec action) */
+  code?: string;
+  /** URL to navigate to (navigate action) */
+  url?: string;
+  /** Sub-operation for tabs: list, new, close, select */
+  op?: 'list' | 'new' | 'close' | 'select';
+  /** Tab index for tabs select/close */
+  index?: number;
+  /** Cookie domain filter */
+  domain?: string;
+  /** Screenshot format: png (default) or jpeg */
+  format?: 'png' | 'jpeg';
+  /** JPEG quality (0-100), only for jpeg format */
+  quality?: number;
+  /** Whether to capture full page (not just viewport) */
+  fullPage?: boolean;
+}
+
+export interface Result {
+  /** Matching request ID */
+  id: string;
+  /** Whether the command succeeded */
+  ok: boolean;
+  /** Result data on success */
+  data?: unknown;
+  /** Error message on failure */
+  error?: string;
+}
+
+/** Default daemon port */
+export const DAEMON_PORT = 19825;
+export const DAEMON_HOST = 'localhost';
+export const DAEMON_WS_URL = `ws://${DAEMON_HOST}:${DAEMON_PORT}/ext`;
+export const DAEMON_HTTP_URL = `http://${DAEMON_HOST}:${DAEMON_PORT}`;
+
+/** Base reconnect delay for extension WebSocket (ms) */
+export const WS_RECONNECT_BASE_DELAY = 2000;
+/** Max reconnect delay (ms) */
+export const WS_RECONNECT_MAX_DELAY = 60000;
+/** Idle timeout before daemon auto-exits (ms) */
+export const DAEMON_IDLE_TIMEOUT = 5 * 60 * 1000;

package/extension/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "declaration": false,
+    "types": ["chrome"]
+  },
+  "include": ["src"]
+}

package/extension/vite.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+
+export default defineConfig({
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+    rollupOptions: {
+      input: resolve(__dirname, 'src/background.ts'),
+      output: {
+        entryFileNames: 'background.js',
+        format: 'es',
+      },
+    },
+    target: 'esnext',
+    minify: false,
+  },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jackwener/opencli",
-  "version": "0.9.8",
+  "version": "1.0.0",
   "publishConfig": {
     "access": "public"
   },
@@ -32,8 +32,7 @@
     "cli",
     "browser",
     "web",
-    "ai",
-    "playwright"
+    "ai"
   ],
   "author": "jackwener",
   "license": "Apache-2.0",
@@ -45,11 +44,12 @@
     "chalk": "^5.3.0",
     "cli-table3": "^0.6.5",
     "commander": "^14.0.3",
-    "js-yaml": "^4.1.0"
+    "js-yaml": "^4.1.0",
+    "ws": "^8.18.0"
   },
   "devDependencies": {
-    "@playwright/mcp": "^0.0.68",
     "@types/js-yaml": "^4.0.9",
+    "@types/ws": "^8.5.13",
     "@types/node": "^22.13.10",
     "tsx": "^4.19.3",
     "typescript": "^5.8.2",

package/src/browser/daemon-client.ts

@@ -0,0 +1,113 @@
+/**
+ * HTTP client for communicating with the opencli daemon.
+ *
+ * Provides a typed send() function that posts a Command and returns a Result.
+ */
+
+const DAEMON_PORT = parseInt(process.env.OPENCLI_DAEMON_PORT ?? '19825', 10);
+const DAEMON_URL = `http://127.0.0.1:${DAEMON_PORT}`;
+
+let _idCounter = 0;
+
+function generateId(): string {
+  return `cmd_${Date.now()}_${++_idCounter}`;
+}
+
+export interface DaemonCommand {
+  id: string;
+  action: 'exec' | 'navigate' | 'tabs' | 'cookies' | 'screenshot';
+  tabId?: number;
+  code?: string;
+  url?: string;
+  op?: string;
+  index?: number;
+  domain?: string;
+  format?: 'png' | 'jpeg';
+  quality?: number;
+  fullPage?: boolean;
+}
+
+export interface DaemonResult {
+  id: string;
+  ok: boolean;
+  data?: unknown;
+  error?: string;
+}
+
+/**
+ * Check if daemon is running.
+ */
+export async function isDaemonRunning(): Promise<boolean> {
+  try {
+    const controller = new AbortController();
+    const timer = setTimeout(() => controller.abort(), 2000);
+    const res = await fetch(`${DAEMON_URL}/status`, { signal: controller.signal });
+    clearTimeout(timer);
+    return res.ok;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Check if daemon is running AND the extension is connected.
+ */
+export async function isExtensionConnected(): Promise<boolean> {
+  try {
+    const controller = new AbortController();
+    const timer = setTimeout(() => controller.abort(), 2000);
+    const res = await fetch(`${DAEMON_URL}/status`, { signal: controller.signal });
+    clearTimeout(timer);
+    if (!res.ok) return false;
+    const data = await res.json() as { extensionConnected?: boolean };
+    return !!data.extensionConnected;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Send a command to the daemon and wait for a result.
+ * Retries up to 3 times with 500ms delay for transient failures.
+ */
+export async function sendCommand(
+  action: DaemonCommand['action'],
+  params: Omit<DaemonCommand, 'id' | 'action'> = {},
+): Promise<unknown> {
+  const id = generateId();
+  const command: DaemonCommand = { id, action, ...params };
+  const maxRetries = 3;
+
+  for (let attempt = 1; attempt <= maxRetries; attempt++) {
+    try {
+      const controller = new AbortController();
+      const timer = setTimeout(() => controller.abort(), 30000);
+
+      const res = await fetch(`${DAEMON_URL}/command`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(command),
+        signal: controller.signal,
+      });
+      clearTimeout(timer);
+
+      const result = (await res.json()) as DaemonResult;
+
+      if (!result.ok) {
+        throw new Error(result.error ?? 'Daemon command failed');
+      }
+
+      return result.data;
+    } catch (err) {
+      const isRetryable = err instanceof TypeError  // fetch network error
+        || (err instanceof Error && err.name === 'AbortError');
+      if (isRetryable && attempt < maxRetries) {
+        await new Promise(r => setTimeout(r, 500));
+        continue;
+      }
+      throw err;
+    }
+  }
+  // Unreachable — the loop always returns or throws
+  throw new Error('sendCommand: max retries exhausted');
+}