opendevbrowser 0.0.10

package/extension/dist/services/ConnectionManager.js

@@ -0,0 +1,301 @@
+import { DEFAULT_PAIRING_ENABLED, DEFAULT_PAIRING_TOKEN, DEFAULT_RELAY_PORT } from "../relay-settings.js";
+import { RelayClient } from "./RelayClient.js";
+import { CDPRouter } from "./CDPRouter.js";
+import { TabManager } from "./TabManager.js";
+export class ConnectionManager {
+    status = "disconnected";
+    listeners = new Set();
+    relay = null;
+    cdp = new CDPRouter();
+    tabs = new TabManager();
+    trackedTab = null;
+    disconnecting = false;
+    shouldReconnect = false;
+    reconnectTimer = null;
+    reconnectAttempts = 0;
+    reconnectDelayMs = 500;
+    pairingToken = DEFAULT_PAIRING_TOKEN;
+    pairingEnabled = DEFAULT_PAIRING_ENABLED;
+    relayPort = DEFAULT_RELAY_PORT;
+    maxReconnectAttempts = 5;
+    maxReconnectDelayMs = 5000;
+    constructor() {
+        this.loadSettings().catch(() => { });
+        chrome.storage.onChanged.addListener(this.handleStorageChange);
+        chrome.tabs.onRemoved.addListener(this.handleTabRemoved);
+        chrome.tabs.onUpdated.addListener(this.handleTabUpdated);
+    }
+    getStatus() {
+        return this.status;
+    }
+    async connect() {
+        if (this.status === "connected") {
+            return;
+        }
+        try {
+            this.shouldReconnect = true;
+            this.reconnectAttempts = 0;
+            await this.loadSettings();
+            await this.attachToActiveTab();
+            await this.connectRelay();
+        }
+        catch {
+            await this.disconnect();
+        }
+    }
+    async disconnect() {
+        if (this.disconnecting)
+            return;
+        this.disconnecting = true;
+        this.shouldReconnect = false;
+        this.clearReconnectTimer();
+        try {
+            if (this.relay) {
+                this.relay.disconnect();
+                this.relay = null;
+            }
+            if (this.trackedTab !== null) {
+                await this.cdp.detach();
+                this.trackedTab = null;
+            }
+        }
+        finally {
+            this.disconnecting = false;
+            this.setStatus("disconnected");
+        }
+    }
+    onStatus(listener) {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+    }
+    setStatus(status) {
+        this.status = status;
+        for (const listener of this.listeners) {
+            listener(status);
+        }
+    }
+    async attachToActiveTab() {
+        const tab = await this.tabs.getActiveTab();
+        if (!tab || typeof tab.id !== "number") {
+            this.trackedTab = null;
+            this.setStatus("disconnected");
+            throw new Error("No active tab available");
+        }
+        await this.cdp.attach(tab.id);
+        this.trackedTab = {
+            id: tab.id,
+            url: tab.url ?? undefined,
+            title: tab.title ?? undefined,
+            groupId: typeof tab.groupId === "number" ? tab.groupId : undefined
+        };
+    }
+    async connectRelay() {
+        if (!this.trackedTab) {
+            throw new Error("No tracked tab for relay connection");
+        }
+        const relay = new RelayClient(this.buildRelayUrl(), {
+            onCommand: (command) => {
+                this.cdp.handleCommand(command).catch(() => {
+                    this.disconnect().catch(() => { });
+                });
+            },
+            onClose: () => {
+                this.handleRelayClose();
+            }
+        });
+        this.relay = relay;
+        this.cdp.setCallbacks({
+            onEvent: (event) => this.relay?.sendEvent(event),
+            onResponse: (response) => this.relay?.sendResponse(response),
+            onDetach: () => {
+                this.disconnect().catch(() => { });
+            }
+        });
+        try {
+            await relay.connect(this.buildHandshake());
+            this.setStatus("connected");
+            this.reconnectAttempts = 0;
+            this.reconnectDelayMs = 500;
+        }
+        catch (error) {
+            if (this.relay === relay) {
+                this.relay = null;
+            }
+            throw error;
+        }
+    }
+    handleRelayClose() {
+        this.relay = null;
+        if (!this.shouldReconnect || !this.trackedTab) {
+            return;
+        }
+        this.setStatus("disconnected");
+        this.scheduleReconnect();
+    }
+    scheduleReconnect() {
+        if (this.reconnectTimer !== null) {
+            return;
+        }
+        if (this.reconnectAttempts >= this.maxReconnectAttempts) {
+            this.disconnect().catch(() => { });
+            return;
+        }
+        this.reconnectTimer = setTimeout(() => {
+            this.reconnectTimer = null;
+            this.reconnectAttempts += 1;
+            this.reconnectDelayMs = Math.min(this.reconnectDelayMs * 2, this.maxReconnectDelayMs);
+            this.reconnectRelay().catch(() => {
+                this.scheduleReconnect();
+            });
+        }, this.reconnectDelayMs);
+    }
+    async reconnectRelay() {
+        if (!this.trackedTab || !this.shouldReconnect) {
+            return;
+        }
+        const attachedId = this.cdp.getAttachedTabId();
+        if (attachedId !== this.trackedTab.id) {
+            this.disconnect().catch(() => { });
+            return;
+        }
+        const tab = await this.tabs.getTab(this.trackedTab.id);
+        if (!tab) {
+            this.disconnect().catch(() => { });
+            return;
+        }
+        this.trackedTab = {
+            id: tab.id ?? this.trackedTab.id,
+            url: tab.url ?? this.trackedTab.url,
+            title: tab.title ?? this.trackedTab.title,
+            groupId: typeof tab.groupId === "number" ? tab.groupId : this.trackedTab.groupId
+        };
+        await this.connectRelay();
+    }
+    buildHandshake() {
+        if (!this.trackedTab) {
+            throw new Error("No tracked tab for handshake");
+        }
+        const payload = {
+            tabId: this.trackedTab.id,
+            url: this.trackedTab.url,
+            title: this.trackedTab.title,
+            groupId: this.trackedTab.groupId
+        };
+        if (this.pairingEnabled && this.pairingToken) {
+            payload.pairingToken = this.pairingToken;
+        }
+        return {
+            type: "handshake",
+            payload
+        };
+    }
+    handleStorageChange = (changes, area) => {
+        if (area !== "local") {
+            return;
+        }
+        if (changes.pairingToken) {
+            this.updatePairingToken(changes.pairingToken.newValue);
+            this.refreshHandshake();
+        }
+        if (changes.pairingEnabled) {
+            this.updatePairingEnabled(changes.pairingEnabled.newValue);
+            this.ensurePairingTokenDefault();
+            this.refreshHandshake();
+        }
+        if (changes.relayPort) {
+            this.updateRelayPort(changes.relayPort.newValue);
+            this.refreshRelay().catch(() => { });
+        }
+    };
+    handleTabRemoved = (tabId) => {
+        if (this.trackedTab && this.trackedTab.id === tabId) {
+            this.disconnect().catch(() => { });
+        }
+    };
+    handleTabUpdated = (_tabId, _changeInfo, tab) => {
+        if (!this.trackedTab || tab.id !== this.trackedTab.id) {
+            return;
+        }
+        this.trackedTab = {
+            id: tab.id,
+            url: tab.url ?? this.trackedTab.url,
+            title: tab.title ?? this.trackedTab.title,
+            groupId: typeof tab.groupId === "number" ? tab.groupId : this.trackedTab.groupId
+        };
+        if (this.relay?.isConnected()) {
+            this.relay.sendHandshake(this.buildHandshake());
+        }
+    };
+    async loadSettings() {
+        const data = await new Promise((resolve) => {
+            chrome.storage.local.get(["pairingToken", "pairingEnabled", "relayPort"], (items) => {
+                resolve(items);
+            });
+        });
+        this.updatePairingEnabled(data.pairingEnabled);
+        this.updatePairingToken(data.pairingToken);
+        this.updateRelayPort(data.relayPort);
+        this.ensurePairingTokenDefault();
+    }
+    updatePairingToken(value) {
+        if (typeof value === "string" && value.trim().length > 0) {
+            this.pairingToken = value.trim();
+            return;
+        }
+        this.pairingToken = null;
+    }
+    updatePairingEnabled(value) {
+        if (typeof value === "boolean") {
+            this.pairingEnabled = value;
+            return;
+        }
+        this.pairingEnabled = DEFAULT_PAIRING_ENABLED;
+    }
+    ensurePairingTokenDefault() {
+        if (!this.pairingEnabled || this.pairingToken) {
+            return;
+        }
+        this.pairingToken = DEFAULT_PAIRING_TOKEN;
+        chrome.storage.local.set({ pairingToken: DEFAULT_PAIRING_TOKEN });
+    }
+    updateRelayPort(value) {
+        if (typeof value === "number" && Number.isInteger(value) && value > 0 && value <= 65535) {
+            this.relayPort = value;
+            return;
+        }
+        if (typeof value === "string" && value.trim()) {
+            const parsed = Number(value);
+            if (Number.isInteger(parsed) && parsed > 0 && parsed <= 65535) {
+                this.relayPort = parsed;
+                return;
+            }
+        }
+        this.relayPort = DEFAULT_RELAY_PORT;
+    }
+    /**
+     * Chrome automatically sends Origin: chrome-extension://EXTENSION_ID
+     * for WebSocket connections from extensions. The relay server validates
+     * this to prevent CSWSH attacks from web pages.
+     */
+    buildRelayUrl() {
+        return `ws://127.0.0.1:${this.relayPort}/extension`;
+    }
+    async refreshRelay() {
+        if (this.status !== "connected")
+            return;
+        await this.disconnect();
+        await this.connect();
+    }
+    clearReconnectTimer() {
+        if (this.reconnectTimer !== null) {
+            clearTimeout(this.reconnectTimer);
+            this.reconnectTimer = null;
+        }
+    }
+    refreshHandshake() {
+        if (!this.trackedTab || !this.relay?.isConnected()) {
+            return;
+        }
+        this.relay.sendHandshake(this.buildHandshake());
+    }
+}

package/extension/dist/services/RelayClient.js

@@ -0,0 +1,73 @@
+export class RelayClient {
+    url;
+    handlers;
+    socket = null;
+    constructor(url, handlers) {
+        this.url = url;
+        this.handlers = handlers;
+    }
+    async connect(handshake) {
+        if (this.socket && this.socket.readyState === WebSocket.OPEN) {
+            return;
+        }
+        this.socket = new WebSocket(this.url);
+        await new Promise((resolve, reject) => {
+            if (!this.socket) {
+                reject(new Error("Relay socket not created"));
+                return;
+            }
+            this.socket.addEventListener("open", () => resolve(), { once: true });
+            this.socket.addEventListener("error", () => reject(new Error("Relay socket error")), {
+                once: true
+            });
+        });
+        this.socket.addEventListener("message", (event) => {
+            const message = parseJson(event.data);
+            if (!message || typeof message !== "object")
+                return;
+            const record = message;
+            if (record.method === "forwardCDPCommand") {
+                this.handlers.onCommand(record);
+            }
+        });
+        this.socket.addEventListener("close", () => {
+            this.handlers.onClose();
+        });
+        this.send(handshake);
+    }
+    disconnect() {
+        if (!this.socket)
+            return;
+        if (this.socket.readyState === WebSocket.OPEN || this.socket.readyState === WebSocket.CONNECTING) {
+            this.socket.close(1000, "Relay disconnect");
+        }
+        this.socket = null;
+    }
+    sendResponse(response) {
+        this.send(response);
+    }
+    sendEvent(event) {
+        this.send(event);
+    }
+    sendHandshake(handshake) {
+        this.send(handshake);
+    }
+    isConnected() {
+        return Boolean(this.socket && this.socket.readyState === WebSocket.OPEN);
+    }
+    send(payload) {
+        if (!this.socket || this.socket.readyState !== WebSocket.OPEN)
+            return;
+        this.socket.send(JSON.stringify(payload));
+    }
+}
+const parseJson = (data) => {
+    if (typeof data !== "string")
+        return null;
+    try {
+        return JSON.parse(data);
+    }
+    catch {
+        return null;
+    }
+};

package/extension/dist/services/TabManager.js

@@ -0,0 +1,18 @@
+export class TabManager {
+    async getTab(tabId) {
+        try {
+            return await chrome.tabs.get(tabId);
+        }
+        catch {
+            return null;
+        }
+    }
+    async getActiveTab() {
+        const tabs = await chrome.tabs.query({ active: true, lastFocusedWindow: true });
+        return tabs[0] ?? null;
+    }
+    async getActiveTabId() {
+        const tab = await this.getActiveTab();
+        return tab?.id ?? null;
+    }
+}

package/extension/dist/types.js

@@ -0,0 +1 @@
+export {};

package/extension/manifest.json

@@ -0,0 +1,34 @@
+{
+  "manifest_version": 3,
+  "name": "OpenDevBrowser Relay",
+  "version": "0.0.10",
+  "description": "Optional bridge to reuse existing Chrome tabs with OpenDevBrowser.",
+  "permissions": [
+    "debugger",
+    "tabs",
+    "storage"
+  ],
+  "host_permissions": [
+    "http://127.0.0.1/*",
+    "http://localhost/*"
+  ],
+  "icons": {
+    "16": "icons/icon16.png",
+    "32": "icons/icon32.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  },
+  "action": {
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16": "icons/icon16.png",
+      "32": "icons/icon32.png",
+      "48": "icons/icon48.png",
+      "128": "icons/icon128.png"
+    }
+  },
+  "background": {
+    "service_worker": "dist/background.js",
+    "type": "module"
+  }
+}

package/extension/popup.html

@@ -0,0 +1,108 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>OpenDevBrowser</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        margin: 0;
+        padding: 12px;
+        min-width: 280px;
+      }
+      h1 {
+        font-size: 14px;
+        margin: 0 0 8px;
+      }
+      .status-container {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 12px;
+      }
+      .status-indicator {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background-color: #dc3545;
+        transition: background-color 0.3s ease;
+      }
+      .status-indicator.connected {
+        background-color: #28a745;
+      }
+      #status {
+        font-size: 12px;
+      }
+      label {
+        font-size: 11px;
+        display: block;
+        margin-bottom: 4px;
+      }
+      label.toggle {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin-bottom: 10px;
+      }
+      input {
+        width: 100%;
+        padding: 6px;
+        margin-bottom: 10px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        box-sizing: border-box;
+      }
+      input[type="checkbox"] {
+        width: auto;
+        margin: 0;
+        padding: 0;
+      }
+      input:disabled {
+        background-color: #f5f5f5;
+        color: #999;
+      }
+      button {
+        width: 100%;
+        padding: 8px;
+        border: 1px solid #222;
+        background: #111;
+        color: #fff;
+        cursor: pointer;
+        border-radius: 4px;
+        transition: background-color 0.2s ease;
+      }
+      button:hover {
+        background: #333;
+      }
+      .auto-pair-note {
+        font-size: 10px;
+        color: #666;
+        margin-top: -6px;
+        margin-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>OpenDevBrowser</h1>
+    <div class="status-container">
+      <div id="statusIndicator" class="status-indicator"></div>
+      <div id="status">Disconnected</div>
+    </div>
+    <label for="relayPort">Relay port</label>
+    <input id="relayPort" type="number" min="1" max="65535" />
+    <label class="toggle" for="autoPair">
+      <input id="autoPair" type="checkbox" />
+      Auto-Pair (fetch token from plugin)
+    </label>
+    <div class="auto-pair-note">When enabled, token is fetched automatically from running plugin</div>
+    <label class="toggle" for="pairingEnabled">
+      <input id="pairingEnabled" type="checkbox" />
+      Require pairing token
+    </label>
+    <label for="pairingToken">Pairing token</label>
+    <input id="pairingToken" type="text" placeholder="Enter token or enable Auto-Pair" />
+    <button id="toggle">Connect</button>
+    <script type="module" src="dist/popup.js"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "opendevbrowser",
+  "version": "0.0.10",
+  "description": "OpenCode plugin for browser automation via CDP with snapshot-refs-actions workflow",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "bin": {
+    "opendevbrowser": "dist/cli/index.js"
+  },
+  "files": [
+    "dist",
+    "skills",
+    "extension/manifest.json",
+    "extension/popup.html",
+    "extension/dist",
+    "extension/icons"
+  ],
+  "keywords": [
+    "opencode",
+    "plugin",
+    "browser",
+    "automation",
+    "cdp",
+    "playwright",
+    "testing",
+    "web-scraping",
+    "chrome"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/freshtechbro/opendevbrowser.git"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts src/cli/index.ts --format esm --dts --clean --sourcemap && node --input-type=module -e \"import { copyFileSync, existsSync } from 'node:fs';\nimport { resolve } from 'node:path';\nconst dist = resolve('dist');\nconst pairs = [\n  ['index.js', 'opendevbrowser.js'],\n  ['index.js.map', 'opendevbrowser.js.map'],\n  ['index.d.ts', 'opendevbrowser.d.ts'],\n  ['index.d.ts.map', 'opendevbrowser.d.ts.map'],\n];\nfor (const [src, dst] of pairs) {\n  const from = resolve(dist, src);\n  const to = resolve(dist, dst);\n  if (existsSync(from)) copyFileSync(from, to);\n}\"",
+    "dev": "tsup src/index.ts src/cli/index.ts --format esm --dts --watch",
+    "lint": "eslint \"{src,tests}/**/*.ts\"",
+    "test": "vitest run --coverage",
+    "extension:sync": "node scripts/sync-extension-version.mjs",
+    "extension:build": "npm run extension:sync && tsc -p extension/tsconfig.json",
+    "extension:pack": "cd extension && zip -r ../opendevbrowser-extension.zip manifest.json popup.html dist/ icons/",
+    "version:check": "node scripts/verify-versions.mjs",
+    "prepack": "npm run build && npm run extension:build"
+  },
+  "dependencies": {
+    "@opencode-ai/plugin": "^1.0.203",
+    "@puppeteer/browsers": "^2.2.0",
+    "async-mutex": "^0.5.0",
+    "jsonc-parser": "^3.2.0",
+    "playwright-core": "^1.49.1",
+    "ws": "^8.17.1",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@types/chrome": "^0.0.270",
+    "@types/node": "^20.19.27",
+    "@types/ws": "^8.18.1",
+    "@typescript-eslint/eslint-plugin": "^8.9.0",
+    "@typescript-eslint/parser": "^8.9.0",
+    "@vitest/coverage-v8": "^4.0.16",
+    "eslint": "^9.12.0",
+    "happy-dom": "^20.0.11",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.16"
+  }
+}

package/skills/AGENTS.md

@@ -0,0 +1,80 @@
+# Local AGENTS.md (skills/)
+
+Applies to `skills/` and subdirectories. Extends root `AGENTS.md`.
+
+## Skill Pack Architecture
+- Each skill pack lives in its own folder with `SKILL.md` as the entry point.
+- `opendevbrowser-best-practices` is the canonical prompting guide source.
+- OpenCode-native discovery is primary:
+  - Project-local: `.opencode/skill/*/SKILL.md`
+  - Global: `~/.config/opencode/skill/*/SKILL.md`
+- Compatibility-only paths: `.claude/skills/*/SKILL.md`, `~/.claude/skills/*/SKILL.md`
+- `opendevbrowser_skill_list/load` are compatibility wrappers; OpenCode `skill` is primary.
+
+## Skill Pack Rules
+- `skills/opendevbrowser-best-practices/SKILL.md` is the source for prompting guide output.
+- Keep guidance short, script-first, and snapshot-first.
+- Keep examples aligned with `opendevbrowser_*` tool names.
+- Do not include secrets or captured page data in skill content.
+
+## Skill Format Specification
+
+### Naming Conventions (OpenCode alignment)
+- Skill names: lowercase, hyphens only, 1-64 characters
+- Directory name must match skill name in frontmatter
+- Examples: `login-automation`, `form-testing`, `data-extraction`
+
+### SKILL.md Structure
+```markdown
+---
+name: skill-name
+description: Brief description (1-1024 chars)
+version: 1.0.0
+---
+
+# Skill Title
+
+## Section Heading
+Content organized by topic for filtering.
+```
+
+### Required Frontmatter
+| Field | Required | Description |
+|-------|----------|-------------|
+| `name` | Yes | Skill identifier (lowercase, hyphens) |
+| `description` | Yes | Brief description for listing |
+| `version` | No | Semantic version (defaults to 1.0.0) |
+
+## Available Skills
+
+| Skill | Purpose |
+|-------|---------|
+| `opendevbrowser-best-practices` | Core prompting guide for browser automation |
+| `opendevbrowser-continuity-ledger` | Continuity ledger guidance for long-running tasks |
+| `login-automation` | Authentication and credential handling |
+| `form-testing` | Form validation and submission testing |
+| `data-extraction` | Table extraction and pagination handling |
+
+## Custom Skill Paths
+Advanced: users can add custom search paths via `skillPaths` in `opendevbrowser.jsonc`:
+```jsonc
+{
+  "skillPaths": ["~/.config/opencode/opendevbrowser-skills"]
+}
+```
+
+## Folder Structure
+```
+skills/
+|-- opendevbrowser-best-practices/
+|   `-- SKILL.md
+|-- opendevbrowser-continuity-ledger/
+|   `-- SKILL.md
+|-- login-automation/
+|   `-- SKILL.md
+|-- form-testing/
+|   `-- SKILL.md
+|-- data-extraction/
+|   `-- SKILL.md
+`-- AGENTS.md
+```