chrome-devtools-mcp-for-extension 0.9.1 → 0.9.3

package/build/src/tools/iframe-popup-tools.js

@@ -1,6 +1,7 @@
 // src/tools/iframe-popup-tools.ts
 // Tools for inspecting & editing in-page iframe popups via CDP.
 // These tools enable direct access to iframe-embedded extension popups.
+// Uses OOPIF (Out-Of-Process iFrame) detection via Target.setAutoAttach.
 import fs from 'node:fs/promises';
 import path from 'node:path';
 export async function findExtensionIdViaTargets(cdp) {
@@ -10,85 +11,100 @@ export async function findExtensionIdViaTargets(cdp) {
         throw new Error('Extension service worker not found');
     return new URL(ext.url).host;
 }
-export async function waitForFrameByUrlMatch(cdp, pattern, timeoutMs = 5000) {
-    await cdp.send('Page.enable');
-    await cdp.send('Runtime.enable');
-    await cdp.send('DOM.enable');
-    // Strategy: Find iframe in DOM, then match Frame ID
+export async function enableOopifAutoAttach(cdp) {
+    await cdp.send('Target.setDiscoverTargets', { discover: true });
+    await cdp.send('Target.setAutoAttach', {
+        autoAttach: true,
+        waitForDebuggerOnStart: false,
+        flatten: true, // Essential for OOPIF detection
+    });
+}
+export async function waitForExtensionChildTarget(cdp, pattern, timeoutMs = 8000) {
     const start = Date.now();
-    while (Date.now() - start < timeoutMs) {
-        try {
-            // Get document root
-            const { root } = await cdp.send('DOM.getDocument', { depth: -1 });
-            // Query all iframes
-            const { nodeIds } = await cdp.send('DOM.querySelectorAll', {
-                nodeId: root.nodeId,
-                selector: 'iframe',
-            });
-            // Check each iframe's src
-            for (const nodeId of nodeIds) {
-                const attrs = await cdp.send('DOM.getAttributes', { nodeId });
-                const srcIndex = attrs.attributes.indexOf('src');
-                if (srcIndex >= 0 && srcIndex + 1 < attrs.attributes.length) {
-                    const src = attrs.attributes[srcIndex + 1];
-                    if (pattern.test(src)) {
-                        // Get contentDocument frame ID
-                        const { node } = await cdp.send('DOM.describeNode', { nodeId });
-                        if (node.contentDocument) {
-                            const frameId = node.contentDocument.frameId || node.frameId;
-                            if (frameId) {
-                                return { frameId, frameUrl: src };
-                            }
-                        }
-                        // Fallback: try Frame Tree match
-                        const tree = await cdp.send('Page.getFrameTree');
-                        const hit = findFrameByUrl(tree.frameTree, src);
-                        if (hit)
-                            return hit;
-                    }
-                }
+    return await new Promise((resolve, reject) => {
+        let resolved = false;
+        const onAttach = (e) => {
+            const url = e?.targetInfo?.url || '';
+            if (pattern.test(url)) {
+                resolved = true;
+                cleanup();
+                resolve({
+                    sessionId: e.sessionId,
+                    targetId: e.targetInfo.targetId,
+                    url,
+                });
             }
-        }
-        catch (e) {
-            // DOM may not be ready yet, continue waiting
-        }
-        // Wait a bit before retry
-        await new Promise(resolve => setTimeout(resolve, 100));
-    }
-    throw new Error(`Timeout waiting for iframe by url match: ${pattern}`);
-    function findFrameByUrl(node, url) {
-        if (node?.frame?.url === url) {
-            return { frameId: node.frame.id, frameUrl: node.frame.url };
-        }
-        for (const c of node.childFrames ?? []) {
-            const r = findFrameByUrl(c, url);
-            if (r)
-                return r;
-        }
-        return null;
-    }
-}
-export async function inspectIframe(cdp, urlPattern, waitMs = 5000) {
-    await cdp.send('Runtime.enable');
-    await cdp.send('DOM.enable');
-    await cdp.send('Log.enable');
-    const { frameId, frameUrl } = await waitForFrameByUrlMatch(cdp, urlPattern, waitMs);
-    const { executionContextId } = await cdp.send('Page.createIsolatedWorld', {
-        frameId,
-        worldName: 'mcp',
-        // grantUniveralAccess is a known CDP option in some builds. It's optional here.
+        };
+        const onTimeout = () => {
+            if (!resolved) {
+                cleanup();
+                reject(new Error(`Timeout: extension popup child target not found (pattern: ${pattern})`));
+            }
+        };
+        const cleanup = () => {
+            cdp.off('Target.attachedToTarget', onAttach);
+        };
+        cdp.on('Target.attachedToTarget', onAttach);
+        setTimeout(onTimeout, Math.max(0, timeoutMs - (Date.now() - start)));
     });
-    const { result } = await cdp.send('Runtime.evaluate', {
-        contextId: executionContextId,
+}
+export async function inspectIframe(cdp, urlPattern, waitMs = 8000) {
+    // Enable OOPIF auto-attach
+    await enableOopifAutoAttach(cdp);
+    // Wait for child target (extension iframe)
+    const child = await waitForExtensionChildTarget(cdp, urlPattern, waitMs);
+    // Enable Page/Runtime in child session
+    await sendToChildSession(cdp, child.sessionId, 'Page.enable', {});
+    await sendToChildSession(cdp, child.sessionId, 'Runtime.enable', {});
+    // Evaluate outerHTML in child session
+    const htmlResult = await sendToChildSession(cdp, child.sessionId, 'Runtime.evaluate', {
         expression: 'document.documentElement.outerHTML',
         returnByValue: true,
     });
+    const html = String(htmlResult?.result?.value ?? '');
     return {
-        frameId,
-        frameUrl,
-        html: String(result.value ?? ''),
+        frameId: child.targetId, // Use targetId as frameId for OOPIF
+        frameUrl: child.url,
+        html,
     };
 }
+async function sendToChildSession(cdp, sessionId, method, params) {
+    const id = Math.floor(Math.random() * 1000000);
+    const message = JSON.stringify({ id, method, params });
+    // Send message to child target
+    await cdp.send('Target.sendMessageToTarget', { sessionId, message });
+    // Wait for response from child target
+    return await new Promise((resolve, reject) => {
+        const timeout = setTimeout(() => {
+            cleanup();
+            reject(new Error(`Timeout waiting for response from child session: ${method}`));
+        }, 5000);
+        const onMessage = (e) => {
+            if (e.sessionId === sessionId) {
+                try {
+                    const response = JSON.parse(e.message);
+                    if (response.id === id) {
+                        cleanup();
+                        if (response.error) {
+                            reject(new Error(`CDP error: ${JSON.stringify(response.error)}`));
+                        }
+                        else {
+                            resolve(response.result);
+                        }
+                    }
+                }
+                catch (err) {
+                    // Ignore parse errors for other messages
+                }
+            }
+        };
+        const cleanup = () => {
+            clearTimeout(timeout);
+            cdp.off('Target.receivedMessageFromTarget', onMessage);
+        };
+        cdp.on('Target.receivedMessageFromTarget', onMessage);
+    });
+}
 export async function patchAndReload(cdp, extensionPath, patches) {
     for (const p of patches) {
         const abs = path.join(extensionPath, p.file);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chrome-devtools-mcp-for-extension",
-  "version": "0.9.1",
+  "version": "0.9.3",
   "description": "MCP server for Chrome extension development with Web Store automation. Fork of chrome-devtools-mcp with extension-specific tools.",
   "type": "module",
   "bin": "./build/src/index.js",