chrome-devtools-mcp-for-extension 0.9.6 → 0.9.8

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

@@ -49,67 +49,86 @@ export async function waitForExtensionChildTarget(cdp, pattern, timeoutMs = 8000
     });
 }
 export async function inspectIframe(cdp, urlPattern, waitMs = 8000) {
-    // Try OOPIF detection first
+    // Strategy: Use DOMSnapshot.captureSnapshot to get iframe-inclusive DOM structure
+    // Note: chrome-extension:// iframes may not be included due to SOP/extension isolation
+    await cdp.send('DOMSnapshot.enable');
     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,
+        // Capture full DOM snapshot including iframes
+        const snapshot = await cdp.send('DOMSnapshot.captureSnapshot', {
+            computedStyles: [],
+            includeDOMRects: false,
+            includePaintOrder: false,
         });
-        const html = String(htmlResult?.result?.value ?? '');
-        return {
-            frameId: child.targetId,
-            frameUrl: child.url,
-            html,
-        };
+        // Search for matching iframe in the snapshot
+        const result = findIframeInSnapshot(snapshot, urlPattern);
+        if (result) {
+            return {
+                frameId: null,
+                frameUrl: result.url,
+                html: result.html,
+            };
+        }
+        // Extension iframe not found in snapshot - this is expected behavior
+        // due to Same-Origin Policy and Chrome extension isolation
+        throw new Error('EXTENSION_FRAME_UNREADABLE: Chrome extension iframes are isolated by ' +
+            'Same-Origin Policy and extension security model. The iframe exists but ' +
+            'cannot be read from the page context. This is expected Chrome behavior.');
     }
-    catch (oopifError) {
-        // Fallback: Try regular iframe via DOM.querySelectorAll
-        await cdp.send('DOM.enable');
-        const { root } = await cdp.send('DOM.getDocument', { depth: -1 });
-        // Query all iframes
-        const { nodeIds } = await cdp.send('DOM.querySelectorAll', {
-            nodeId: root.nodeId,
-            selector: 'iframe',
-        });
-        // Find the iframe matching the pattern
-        let targetFrameId = null;
-        let targetFrameUrl = null;
-        for (const nodeId of nodeIds) {
-            const { node } = await cdp.send('DOM.describeNode', { nodeId });
-            const src = node.attributes?.find((attr, i, arr) => attr === 'src' && arr[i + 1]);
-            const srcValue = src ? node.attributes[node.attributes.indexOf(src) + 1] : '';
-            if (urlPattern.test(srcValue)) {
-                targetFrameId = node.frameId || null;
-                targetFrameUrl = srcValue;
-                break;
-            }
+    catch (error) {
+        // If DOMSnapshot fails or iframe not found, provide clear explanation
+        if (error.message?.includes('EXTENSION_FRAME_UNREADABLE')) {
+            throw error;
+        }
+        throw new Error(`Failed to capture DOM snapshot: ${error.message}. ` +
+            'Note: Chrome extension iframes are typically unreadable due to security policies.');
+    }
+    finally {
+        await cdp.send('DOMSnapshot.disable');
+    }
+}
+function findIframeInSnapshot(snapshot, urlPattern) {
+    // DOMSnapshot structure:
+    // - documents: array of document snapshots
+    // - strings: string table for deduplication
+    const documents = snapshot.documents || [];
+    for (const doc of documents) {
+        const baseURL = doc.baseURL;
+        // Check if this document matches the pattern
+        if (baseURL && urlPattern.test(baseURL)) {
+            // Reconstruct HTML from snapshot
+            const html = reconstructHTMLFromSnapshot(doc, snapshot.strings || []);
+            return { url: baseURL, html };
         }
-        if (!targetFrameId || !targetFrameUrl) {
-            throw new Error(`Iframe not found (tried both OOPIF and regular iframe): ${urlPattern}`);
+    }
+    return null;
+}
+function reconstructHTMLFromSnapshot(doc, strings) {
+    // Simple reconstruction - get text content from nodes
+    // Note: DOMSnapshot doesn't provide perfect HTML reconstruction
+    // but gives us the essential content
+    const nodes = doc.nodes || {};
+    const nodeNames = nodes.nodeName || [];
+    const nodeValues = nodes.nodeValue || [];
+    const textValues = nodes.textValue || {};
+    // Build a simple HTML representation
+    let html = '<html>';
+    // Try to find body content
+    for (let i = 0; i < nodeNames.length; i++) {
+        const nameIdx = nodeNames[i];
+        const name = strings[nameIdx] || '';
+        const valueIdx = nodeValues[i];
+        const value = valueIdx >= 0 ? strings[valueIdx] : '';
+        if (name === '#document' || name === 'HTML')
+            continue;
+        if (name === '#text' && value) {
+            html += value;
+        }
+        else if (name) {
+            html += `<${name}>`;
         }
-        // Execute in the frame context using Page.createIsolatedWorld
-        const { executionContextId } = await cdp.send('Page.createIsolatedWorld', {
-            frameId: targetFrameId,
-        });
-        await cdp.send('Runtime.enable');
-        const htmlResult = await cdp.send('Runtime.evaluate', {
-            expression: 'document.documentElement.outerHTML',
-            returnByValue: true,
-            contextId: executionContextId,
-        });
-        const html = String(htmlResult?.result?.value ?? '');
-        return {
-            frameId: targetFrameId,
-            frameUrl: targetFrameUrl,
-            html,
-        };
     }
+    html += '</html>';
+    return html;
 }
 async function sendToChildSession(cdp, sessionId, method, params) {
     const id = Math.floor(Math.random() * 1000000);

package/package.json

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