chrome-devtools-mcp-for-extension 0.9.2 → 0.9.4

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,58 +11,135 @@ 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: Use Page.getFrameTree and match by pattern
+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 {
-            const tree = await cdp.send('Page.getFrameTree');
-            const hit = findFrameByPattern(tree.frameTree, pattern);
-            if (hit)
-                return hit;
-        }
-        catch (e) {
-            // Frame tree may not be ready yet, continue waiting
-        }
-        // Wait a bit before retry
-        await new Promise(resolve => setTimeout(resolve, 100));
+    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,
+                });
+            }
+        };
+        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)));
+    });
+}
+export async function inspectIframe(cdp, urlPattern, waitMs = 8000) {
+    // Try OOPIF detection first
+    try {
+        await enableOopifAutoAttach(cdp);
+        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: child.targetId,
+            frameUrl: child.url,
+            html,
+        };
     }
-    throw new Error(`Timeout waiting for iframe by url match: ${pattern}`);
-    function findFrameByPattern(node, rx) {
-        if (node?.frame?.url && rx.test(node.frame.url)) {
-            return { frameId: node.frame.id, frameUrl: node.frame.url };
+    catch (oopifError) {
+        // Fallback: Try regular iframe via Page.getFrameTree
+        await cdp.send('Page.enable');
+        const { frameTree } = await cdp.send('Page.getFrameTree');
+        const findFrame = (node) => {
+            if (urlPattern.test(node.frame.url)) {
+                return node.frame;
+            }
+            if (node.childFrames) {
+                for (const child of node.childFrames) {
+                    const found = findFrame(child);
+                    if (found)
+                        return found;
+                }
+            }
+            return null;
+        };
+        const frame = findFrame(frameTree);
+        if (!frame) {
+            throw new Error(`Iframe not found (tried both OOPIF and regular iframe): ${urlPattern}`);
         }
-        for (const c of node.childFrames ?? []) {
-            const r = findFrameByPattern(c, rx);
-            if (r)
-                return r;
-        }
-        return null;
+        // Execute in the frame context
+        await cdp.send('Runtime.enable');
+        const htmlResult = await cdp.send('Runtime.evaluate', {
+            expression: 'document.documentElement.outerHTML',
+            returnByValue: true,
+            contextId: frame.id,
+        });
+        const html = String(htmlResult?.result?.value ?? '');
+        return {
+            frameId: frame.id,
+            frameUrl: frame.url,
+            html,
+        };
     }
 }
-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 { result } = await cdp.send('Runtime.evaluate', {
-        contextId: executionContextId,
-        expression: 'document.documentElement.outerHTML',
-        returnByValue: true,
+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);
     });
-    return {
-        frameId,
-        frameUrl,
-        html: String(result.value ?? ''),
-    };
 }
 export async function patchAndReload(cdp, extensionPath, patches) {
     for (const p of patches) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chrome-devtools-mcp-for-extension",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "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",