opendevbrowser 0.0.12 → 0.0.15

package/extension/dist/services/TargetSessionMap.js

@@ -0,0 +1,146 @@
+export class TargetSessionMap {
+    tabTargets = new Map();
+    sessionsById = new Map();
+    sessionByTarget = new Map();
+    rootWaiters = new Map();
+    registerRootTab(tabId, targetInfo, sessionId) {
+        const record = { tabId, targetInfo, rootSessionId: sessionId };
+        this.tabTargets.set(tabId, record);
+        const session = {
+            kind: "root",
+            sessionId,
+            tabId,
+            targetId: targetInfo.targetId,
+            debuggerSession: { tabId },
+            targetInfo
+        };
+        this.sessionsById.set(sessionId, session);
+        this.sessionByTarget.set(targetInfo.targetId, sessionId);
+        this.resolveRootWaiters(tabId, session);
+        return session;
+    }
+    registerChildSession(tabId, targetInfo, sessionId) {
+        const session = {
+            kind: "child",
+            sessionId,
+            tabId,
+            targetId: targetInfo.targetId,
+            debuggerSession: { tabId, sessionId },
+            targetInfo
+        };
+        this.sessionsById.set(sessionId, session);
+        this.sessionByTarget.set(targetInfo.targetId, sessionId);
+        return session;
+    }
+    getBySessionId(sessionId) {
+        return this.sessionsById.get(sessionId) ?? null;
+    }
+    hasSession(sessionId) {
+        return this.sessionsById.has(sessionId);
+    }
+    getByTargetId(targetId) {
+        const sessionId = this.sessionByTarget.get(targetId);
+        if (!sessionId) {
+            return null;
+        }
+        return this.sessionsById.get(sessionId) ?? null;
+    }
+    getByTabId(tabId) {
+        return this.tabTargets.get(tabId) ?? null;
+    }
+    async waitForRootSession(tabId, timeoutMs = 2000) {
+        const existing = this.getByTabId(tabId);
+        if (existing) {
+            const session = this.sessionsById.get(existing.rootSessionId);
+            if (session) {
+                return session;
+            }
+        }
+        return await new Promise((resolve, reject) => {
+            const timeoutId = setTimeout(() => {
+                this.rejectRootWaiter(tabId, timeoutId);
+                reject(new Error("Target attach timeout"));
+            }, timeoutMs);
+            const entry = { resolve, reject, timeoutId };
+            const waiters = this.rootWaiters.get(tabId) ?? [];
+            waiters.push(entry);
+            this.rootWaiters.set(tabId, waiters);
+        });
+    }
+    listTargetInfos() {
+        const rootTargets = Array.from(this.tabTargets.values()).map((record) => record.targetInfo);
+        const childTargets = Array.from(this.sessionsById.values())
+            .filter((session) => session.kind === "child" && session.targetInfo)
+            .map((session) => session.targetInfo);
+        return [...rootTargets, ...childTargets];
+    }
+    listTabIds() {
+        return Array.from(this.tabTargets.keys());
+    }
+    listSessionIds() {
+        return Array.from(this.sessionsById.keys());
+    }
+    removeByTabId(tabId) {
+        const record = this.tabTargets.get(tabId) ?? null;
+        if (!record) {
+            return null;
+        }
+        for (const [sessionId, session] of this.sessionsById.entries()) {
+            if (session.tabId === tabId) {
+                this.sessionsById.delete(sessionId);
+            }
+        }
+        for (const [targetId, sessionId] of this.sessionByTarget.entries()) {
+            const session = this.sessionsById.get(sessionId);
+            if (!session || session.tabId === tabId) {
+                this.sessionByTarget.delete(targetId);
+            }
+        }
+        this.tabTargets.delete(tabId);
+        return record;
+    }
+    removeBySessionId(sessionId) {
+        const session = this.sessionsById.get(sessionId) ?? null;
+        if (!session) {
+            return null;
+        }
+        if (session.kind === "root") {
+            this.removeByTabId(session.tabId);
+            return session;
+        }
+        this.sessionsById.delete(sessionId);
+        this.sessionByTarget.delete(session.targetId);
+        return session;
+    }
+    removeByTargetId(targetId) {
+        const sessionId = this.sessionByTarget.get(targetId);
+        if (!sessionId) {
+            return null;
+        }
+        return this.removeBySessionId(sessionId);
+    }
+    resolveRootWaiters(tabId, session) {
+        const waiters = this.rootWaiters.get(tabId);
+        if (!waiters || waiters.length === 0) {
+            return;
+        }
+        this.rootWaiters.delete(tabId);
+        for (const waiter of waiters) {
+            clearTimeout(waiter.timeoutId);
+            waiter.resolve(session);
+        }
+    }
+    rejectRootWaiter(tabId, timeoutId) {
+        const waiters = this.rootWaiters.get(tabId);
+        if (!waiters || waiters.length === 0) {
+            return;
+        }
+        const remaining = waiters.filter((waiter) => waiter.timeoutId !== timeoutId);
+        if (remaining.length === 0) {
+            this.rootWaiters.delete(tabId);
+        }
+        else {
+            this.rootWaiters.set(tabId, remaining);
+        }
+    }
+}

package/extension/dist/services/cdp-router-commands.js

@@ -0,0 +1,203 @@
+export async function handleSetDiscoverTargets(ctx, commandId, params) {
+    const discover = params.discover === true;
+    const shouldEmit = discover && !ctx.discoverTargets;
+    ctx.setDiscoverTargets(discover);
+    if (shouldEmit) {
+        for (const targetInfo of ctx.sessions.listTargetInfos()) {
+            ctx.emitTargetCreated(targetInfo);
+        }
+    }
+    ctx.respond(commandId, {});
+}
+export async function handleSetAutoAttach(ctx, commandId, params, sessionId) {
+    if (params.flatten === false) {
+        ctx.respondError(commandId, ctx.flatSessionError, sessionId);
+        return;
+    }
+    if (sessionId) {
+        ctx.respond(commandId, {}, sessionId);
+        return;
+    }
+    const autoAttach = params.autoAttach === true;
+    const waitForDebuggerOnStart = params.waitForDebuggerOnStart === true;
+    ctx.setAutoAttachOptions({ autoAttach, waitForDebuggerOnStart, flatten: true, filter: params.filter });
+    if (autoAttach && !sessionId) {
+        ctx.resetRootAttached();
+    }
+    try {
+        for (const debuggee of ctx.debuggees.values()) {
+            await ctx.applyAutoAttach(debuggee);
+        }
+    }
+    catch (error) {
+        ctx.respondError(commandId, getErrorMessage(error));
+        return;
+    }
+    if (!autoAttach) {
+        ctx.emitRootDetached();
+    }
+    else {
+        for (const targetInfo of ctx.sessions.listTargetInfos()) {
+            ctx.emitRootAttached(targetInfo);
+        }
+    }
+    ctx.respond(commandId, {});
+}
+export async function handleCreateTarget(ctx, commandId, params) {
+    const url = typeof params.url === "string" ? params.url : undefined;
+    const background = params.background === true;
+    let createdTabId = null;
+    try {
+        const tab = await ctx.tabManager.createTab(url, !background);
+        if (typeof tab.id !== "number") {
+            throw new Error("Target.createTarget did not yield a tab id");
+        }
+        createdTabId = tab.id;
+        await ctx.tabManager.waitForTabComplete(tab.id);
+        await ctx.attach(tab.id);
+        await ctx.sessions.waitForRootSession(tab.id);
+        await ctx.sendCommand({ tabId: tab.id }, "Target.getTargets", {});
+        const targetInfo = await ctx.registerRootTab(tab.id);
+        if (ctx.discoverTargets) {
+            ctx.emitTargetCreated(targetInfo);
+        }
+        if (ctx.autoAttachOptions.autoAttach) {
+            ctx.emitRootAttached(targetInfo);
+        }
+        if (!background) {
+            ctx.updatePrimaryTab(tab.id);
+        }
+        ctx.respond(commandId, { targetId: targetInfo.targetId });
+    }
+    catch (error) {
+        if (createdTabId !== null) {
+            const debuggee = ctx.debuggees.get(createdTabId) ?? null;
+            ctx.detachTabState(createdTabId);
+            if (debuggee) {
+                await ctx.safeDetach(debuggee);
+            }
+            try {
+                await ctx.tabManager.closeTab(createdTabId);
+            }
+            catch {
+                // Best-effort cleanup for partially created targets.
+            }
+        }
+        ctx.respondError(commandId, getErrorMessage(error));
+    }
+}
+export async function handleCloseTarget(ctx, commandId, params) {
+    const targetId = typeof params.targetId === "string" ? params.targetId : null;
+    if (!targetId) {
+        ctx.respondError(commandId, "Missing targetId");
+        return;
+    }
+    const session = ctx.sessions.getByTargetId(targetId);
+    if (!session || session.kind !== "root") {
+        ctx.respondError(commandId, "Target not found");
+        return;
+    }
+    try {
+        const debuggee = ctx.debuggees.get(session.tabId) ?? null;
+        ctx.detachTabState(session.tabId);
+        if (debuggee) {
+            await ctx.safeDetach(debuggee);
+        }
+        await ctx.tabManager.closeTab(session.tabId);
+        ctx.respond(commandId, { success: true });
+    }
+    catch (error) {
+        ctx.respondError(commandId, getErrorMessage(error));
+    }
+}
+export async function handleActivateTarget(ctx, commandId, params) {
+    const targetId = typeof params.targetId === "string" ? params.targetId : null;
+    if (!targetId) {
+        ctx.respondError(commandId, "Missing targetId");
+        return;
+    }
+    const session = ctx.sessions.getByTargetId(targetId);
+    if (!session || session.kind !== "root") {
+        ctx.respondError(commandId, "Target not found");
+        return;
+    }
+    try {
+        await ctx.tabManager.activateTab(session.tabId);
+        ctx.updatePrimaryTab(session.tabId);
+        ctx.respond(commandId, {});
+    }
+    catch (error) {
+        ctx.respondError(commandId, getErrorMessage(error));
+    }
+}
+export async function handleAttachToTarget(ctx, commandId, params, sessionId) {
+    const targetId = typeof params.targetId === "string" ? params.targetId : null;
+    if (!targetId) {
+        ctx.respondError(commandId, "Missing targetId", sessionId);
+        return;
+    }
+    if (params.flatten === false) {
+        ctx.respondError(commandId, ctx.flatSessionError, sessionId);
+        return;
+    }
+    const targetSession = ctx.sessions.getByTargetId(targetId);
+    if (targetSession && targetSession.kind === "root") {
+        ctx.respond(commandId, { sessionId: targetSession.sessionId }, sessionId);
+        return;
+    }
+    const session = sessionId ? ctx.sessions.getBySessionId(sessionId) : null;
+    if (sessionId && !session) {
+        ctx.respondError(commandId, `Unknown sessionId: ${sessionId}`, sessionId);
+        return;
+    }
+    const debuggee = session?.debuggerSession ?? ctx.getPrimaryDebuggee();
+    if (!debuggee) {
+        ctx.respondError(commandId, "No tab attached", sessionId);
+        return;
+    }
+    try {
+        const result = await ctx.sendCommand(debuggee, "Target.attachToTarget", { targetId, flatten: true });
+        const record = isRecord(result) ? result : {};
+        const childSessionId = typeof record.sessionId === "string" ? record.sessionId : null;
+        if (childSessionId) {
+            const targetInfo = {
+                targetId,
+                type: "page",
+                browserContextId: "default"
+            };
+            ctx.sessions.registerChildSession(debuggee.tabId, targetInfo, childSessionId);
+        }
+        ctx.respond(commandId, result);
+    }
+    catch (error) {
+        ctx.respondError(commandId, getErrorMessage(error), sessionId);
+    }
+}
+export async function handleRoutedCommand(ctx, commandId, method, params, sessionId) {
+    const session = sessionId ? ctx.sessions.getBySessionId(sessionId) : null;
+    if (sessionId && !session) {
+        ctx.respondError(commandId, `Unknown sessionId: ${sessionId}`, sessionId);
+        return;
+    }
+    const debuggee = session?.debuggerSession ?? ctx.getPrimaryDebuggee();
+    if (!debuggee) {
+        ctx.respondError(commandId, "No tab attached", sessionId);
+        return;
+    }
+    try {
+        const result = await ctx.sendCommand(debuggee, method, params);
+        ctx.respond(commandId, result, sessionId);
+    }
+    catch (error) {
+        ctx.respondError(commandId, getErrorMessage(error), sessionId);
+    }
+}
+const isRecord = (value) => {
+    return typeof value === "object" && value !== null;
+};
+const getErrorMessage = (error) => {
+    if (error instanceof Error) {
+        return error.message;
+    }
+    return "Unknown error";
+};

package/extension/dist/services/url-restrictions.js

@@ -0,0 +1,41 @@
+const RESTRICTED_PROTOCOLS = new Set([
+    "chrome:",
+    "chrome-extension:",
+    "chrome-search:",
+    "chrome-untrusted:",
+    "devtools:",
+    "chrome-devtools:",
+    "edge:",
+    "brave:"
+]);
+const isWebStoreUrl = (url) => {
+    if (url.hostname === "chromewebstore.google.com") {
+        return true;
+    }
+    if (url.hostname === "chrome.google.com" && url.pathname.startsWith("/webstore")) {
+        return true;
+    }
+    return false;
+};
+export const getRestrictionMessage = (url) => {
+    if (RESTRICTED_PROTOCOLS.has(url.protocol)) {
+        return "Active tab uses a restricted URL scheme. Focus a normal http(s) tab and retry.";
+    }
+    if (isWebStoreUrl(url)) {
+        return "Chrome Web Store tabs cannot be debugged. Open a normal tab and retry.";
+    }
+    return null;
+};
+export const isRestrictedUrl = (rawUrl) => {
+    try {
+        const url = new URL(rawUrl);
+        const message = getRestrictionMessage(url);
+        if (message) {
+            return { restricted: true, message };
+        }
+        return { restricted: false };
+    }
+    catch {
+        return { restricted: true, message: "Unable to parse tab URL." };
+    }
+};

package/extension/dist/types.js

@@ -1 +1,3 @@
-export {};
+export const OPS_PROTOCOL_VERSION = "1";
+export const MAX_OPS_PAYLOAD_BYTES = 12 * 1024 * 1024;
+export const MAX_SNAPSHOT_BYTES = 2 * 1024 * 1024;

package/extension/manifest.json

@@ -1,16 +1,21 @@
 {
   "manifest_version": 3,
   "name": "OpenDevBrowser Relay",
-  "version": "0.0.12",
+  "version": "0.0.15",
   "description": "Optional bridge to reuse existing Chrome tabs with OpenDevBrowser.",
   "permissions": [
     "debugger",
+    "alarms",
     "tabs",
-    "storage"
+    "storage",
+    "scripting",
+    "activeTab",
+    "nativeMessaging"
   ],
   "host_permissions": [
     "http://127.0.0.1/*",
-    "http://localhost/*"
+    "http://localhost/*",
+    "<all_urls>"
   ],
   "icons": {
     "16": "icons/icon16.png",
@@ -30,5 +35,14 @@
   "background": {
     "service_worker": "dist/background.js",
     "type": "module"
+  },
+  "commands": {
+    "toggle-annotation": {
+      "suggested_key": {
+        "default": "Ctrl+Shift+P",
+        "mac": "Command+Shift+P"
+      },
+      "description": "Toggle annotation UI"
+    }
   }
 }

package/extension/popup.html

@@ -285,12 +285,97 @@
         transform: translateY(0);
       }
 
+      .secondary {
+        width: 100%;
+        padding: 9px 10px;
+        border-radius: 12px;
+        border: 1px solid var(--stroke);
+        background: var(--panel-strong);
+        color: var(--text);
+        font-size: 11px;
+        font-weight: 600;
+        letter-spacing: 0.02em;
+        cursor: pointer;
+        transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+      }
+
+      .secondary:hover {
+        transform: translateY(-1px);
+        border-color: rgba(32, 213, 198, 0.4);
+        box-shadow: 0 10px 22px rgba(32, 213, 198, 0.12);
+      }
+
+      .secondary:active {
+        transform: translateY(0);
+      }
+
+      .secondary:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+        box-shadow: none;
+        transform: none;
+      }
+
       .field-note {
         font-size: 10px;
         color: var(--muted);
         margin-top: 6px;
       }
 
+      .panel-title {
+        font-size: 10px;
+        text-transform: uppercase;
+        letter-spacing: 0.24em;
+        color: var(--muted);
+      }
+
+      .health-grid {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 8px;
+      }
+
+      .health-item {
+        padding: 8px 10px;
+        border-radius: 10px;
+        border: 1px solid var(--stroke);
+        background: var(--panel-strong);
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+
+      .health-label {
+        font-size: 9px;
+        text-transform: uppercase;
+        letter-spacing: 0.2em;
+        color: var(--muted);
+      }
+
+      .health-value {
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--text);
+      }
+
+      .health-value[data-tone="ok"] {
+        color: var(--accent);
+      }
+
+      .health-value[data-tone="warn"] {
+        color: #f6c56f;
+      }
+
+      .health-value[data-tone="off"] {
+        color: var(--muted);
+      }
+
+      .button-row {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 10px;
+      }
+
       @media (prefers-reduced-motion: reduce) {
         * {
           transition: none !important;
@@ -332,6 +417,17 @@
           </label>
         </div>
 
+        <div class="row">
+          <div>
+            <div class="row-title">Native fallback (experimental)</div>
+            <div class="row-subtitle">Use native messaging host when relay is down</div>
+          </div>
+          <label class="switch">
+            <input id="nativeEnabled" type="checkbox" />
+            <span class="slider"></span>
+          </label>
+        </div>
+
         <div class="row">
           <div>
             <div class="row-title">Auto-pair</div>
@@ -361,6 +457,54 @@
         </div>
       </section>
 
+      <section class="panel">
+        <div class="panel-title">Diagnostics</div>
+        <div class="health-grid">
+          <div class="health-item">
+            <div class="health-label">Relay</div>
+            <div id="healthRelay" class="health-value" data-tone="off">Unknown</div>
+          </div>
+          <div class="health-item">
+            <div class="health-label">Handshake</div>
+            <div id="healthHandshake" class="health-value" data-tone="off">Unknown</div>
+          </div>
+          <div class="health-item">
+            <div class="health-label">Annotate</div>
+            <div id="healthAnnotation" class="health-value" data-tone="off">Unknown</div>
+          </div>
+          <div class="health-item">
+            <div class="health-label">Injected</div>
+            <div id="healthInjected" class="health-value" data-tone="off">Unknown</div>
+          </div>
+          <div class="health-item">
+            <div class="health-label">CDP</div>
+            <div id="healthCdp" class="health-value" data-tone="off">Unknown</div>
+          </div>
+          <div class="health-item">
+            <div class="health-label">Pairing</div>
+            <div id="healthPairing" class="health-value" data-tone="off">Unknown</div>
+          </div>
+          <div class="health-item">
+            <div class="health-label">Native</div>
+            <div id="healthNative" class="health-value" data-tone="off">Unknown</div>
+          </div>
+        </div>
+        <div id="healthNote" class="field-note">Health check pending.</div>
+      </section>
+
+      <section class="panel">
+        <div class="panel-title">Annotation</div>
+        <div class="field">
+          <label for="annotationContext">Request</label>
+          <input id="annotationContext" type="text" placeholder="Optional context for this review" />
+          <div id="annotationNote" class="field-note">No annotations captured yet.</div>
+        </div>
+        <div class="button-row">
+          <button id="annotationStart" class="secondary">Annotate</button>
+          <button id="annotationCopy" class="secondary" disabled>Copy payload</button>
+        </div>
+      </section>
+
       <button id="toggle" class="primary">Connect</button>
     </div>
     <script type="module" src="dist/popup.js"></script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opendevbrowser",
-  "version": "0.0.12",
+  "version": "0.0.15",
   "description": "OpenCode plugin for browser automation via CDP with snapshot-refs-actions workflow",
   "type": "module",
   "main": "dist/index.js",
@@ -41,7 +41,7 @@
     "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:build": "npm run extension:sync && tsc -p extension/tsconfig.json && node scripts/copy-extension-assets.mjs",
     "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 version:check && npm run build && npm run extension:build"