chrome-devtools-mcp-for-extension 0.9.7 → 0.9.9

package/build/src/browser.js

@@ -346,6 +346,7 @@ export async function launch(options) {
             headless,
             args,
             ignoreDefaultArgs: ['--disable-extensions', '--enable-automation'],
+            enableExtensions: extensionPaths.length > 0 ? extensionPaths : undefined,
         });
         // Log actual spawn args for debugging
         const spawnArgs = browser.process()?.spawnargs;

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

@@ -49,76 +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: Access iframe content through parent page's DOM
-        await cdp.send('Runtime.enable');
-        const iframeAccessScript = `
-      (function() {
-        const pattern = ${urlPattern};
-        const iframes = Array.from(document.querySelectorAll('iframe'));
-
-        for (const iframe of iframes) {
-          if (pattern.test(iframe.src)) {
-            try {
-              // Try to access contentDocument/contentWindow
-              const doc = iframe.contentDocument || iframe.contentWindow?.document;
-              if (doc) {
-                return {
-                  success: true,
-                  src: iframe.src,
-                  html: doc.documentElement.outerHTML
-                };
-              }
-            } catch (securityError) {
-              // If blocked by same-origin policy, return error details
-              return {
-                success: false,
-                src: iframe.src,
-                error: 'SecurityError: ' + securityError.message
-              };
-            }
-          }
+    catch (error) {
+        // If DOMSnapshot fails or iframe not found, provide clear explanation
+        if (error.message?.includes('EXTENSION_FRAME_UNREADABLE')) {
+            throw error;
         }
-
-        return {
-          success: false,
-          error: 'Iframe not found matching pattern: ' + pattern.toString()
-        };
-      })()
-    `;
-        const evalResult = await cdp.send('Runtime.evaluate', {
-            expression: iframeAccessScript,
-            returnByValue: true,
-        });
-        const data = evalResult?.result?.value;
-        if (!data?.success) {
-            throw new Error(`Iframe access failed: ${data?.error || 'Unknown 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 };
+        }
+    }
+    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}>`;
         }
-        return {
-            frameId: null,
-            frameUrl: data.src || '',
-            html: data.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.7",
+  "version": "0.9.9",
   "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",
@@ -52,7 +52,7 @@
     "@modelcontextprotocol/sdk": "1.18.1",
     "archiver": "^7.0.1",
     "debug": "4.4.3",
-    "puppeteer-core": "24.22.3",
+    "puppeteer": "24.22.3",
     "yargs": "18.0.0"
   },
   "devDependencies": {
@@ -72,7 +72,6 @@
     "eslint-import-resolver-typescript": "^4.4.4",
     "globals": "^16.4.0",
     "prettier": "^3.6.2",
-    "puppeteer": "24.22.3",
     "sinon": "^21.0.0",
     "typescript-eslint": "^8.43.0",
     "typescript": "^5.9.2"