chrome-devtools-mcp-for-extension 0.8.9 → 0.9.0

package/build/src/tools/extensions.js

@@ -478,7 +478,29 @@ export const openExtensionPopup = defineTool({
                     response.appendResponseLine('💡 You can now use take_snapshot, click, evaluate_script, etc. on the popup');
                     return;
                 }
-                // If not on popup, try to find any open popup
+                // Check for iframe-embedded popup in current page
+                const iframePopups = await page.evaluate(() => {
+                    return Array.from(document.querySelectorAll('iframe'))
+                        .filter((iframe) => iframe.src.startsWith('chrome-extension://'))
+                        .map((iframe) => ({
+                        src: iframe.src,
+                        id: iframe.id,
+                        className: iframe.className,
+                    }));
+                });
+                if (iframePopups.length > 0) {
+                    response.appendResponseLine('✅ Extension popup found (embedded as iframe)');
+                    response.appendResponseLine(`📄 Popup URL: ${iframePopups[0].src}`);
+                    response.appendResponseLine('');
+                    response.appendResponseLine('💡 This popup is embedded in the current page as an iframe.');
+                    response.appendResponseLine('   You can interact with it using regular page tools:');
+                    response.appendResponseLine('   - take_snapshot (includes iframe content)');
+                    response.appendResponseLine('   - click on elements');
+                    response.appendResponseLine('   - fill forms');
+                    response.appendResponseLine('   - evaluate_script');
+                    return;
+                }
+                // If not on popup or iframe, try to find any open popup window
                 const pages = await browser.pages();
                 for (let i = 0; i < pages.length; i++) {
                     const p = pages[i];
@@ -549,6 +571,32 @@ export const openExtensionPopup = defineTool({
                     }
                 }
                 if (!popupPage) {
+                    // Check for iframe-embedded popup with this extension ID
+                    response.appendResponseLine('🔧 Checking for iframe-embedded popup...');
+                    // Go back to the original page to check for iframes
+                    await page.goBack();
+                    const iframePopups = await page.evaluate((extId) => {
+                        return Array.from(document.querySelectorAll('iframe'))
+                            .filter((iframe) => iframe.src.includes(extId))
+                            .map((iframe) => ({
+                            src: iframe.src,
+                            id: iframe.id,
+                            className: iframe.className,
+                        }));
+                    }, extensionInfo.id);
+                    if (iframePopups.length > 0) {
+                        response.appendResponseLine('');
+                        response.appendResponseLine(`✅ Extension popup found (embedded as iframe): ${extensionInfo.name}`);
+                        response.appendResponseLine(`📄 Popup URL: ${iframePopups[0].src}`);
+                        response.appendResponseLine('');
+                        response.appendResponseLine('💡 This popup is embedded in the current page as an iframe.');
+                        response.appendResponseLine('   You can interact with it using regular page tools:');
+                        response.appendResponseLine('   - take_snapshot (includes iframe content)');
+                        response.appendResponseLine('   - click on elements');
+                        response.appendResponseLine('   - fill forms');
+                        response.appendResponseLine('   - evaluate_script');
+                        return;
+                    }
                     response.appendResponseLine('❌ Popup window not found.');
                     response.appendResponseLine('💡 Please manually click the extension icon to open the popup first.');
                     return;
@@ -664,3 +712,120 @@ export const inspectServiceWorker = defineTool({
         });
     },
 });
+// Import iframe popup tools
+import * as iframePopupTools from './iframe-popup-tools.js';
+export const inspectIframePopup = defineTool({
+    name: 'inspect_iframe_popup',
+    description: `Inspect an iframe-embedded extension popup using CDP. This tool can access iframe content that normal Puppeteer cannot reach. Returns the full HTML of the iframe popup.`,
+    annotations: {
+        category: ToolCategories.EXTENSION_DEVELOPMENT,
+        readOnlyHint: true,
+    },
+    schema: {
+        urlPattern: z
+            .string()
+            .describe('Regular expression pattern to match the iframe URL (e.g., "chrome-extension://[^/]+/popup\\.html$")'),
+        waitMs: z
+            .number()
+            .optional()
+            .describe('Maximum time to wait for iframe (default: 5000ms)'),
+    },
+    handler: async (request, response, context) => {
+        const page = context.getSelectedPage();
+        const { urlPattern, waitMs } = request.params;
+        await context.waitForEventsAfterAction(async () => {
+            try {
+                const cdp = await page.createCDPSession();
+                const pattern = new RegExp(urlPattern);
+                const result = await iframePopupTools.inspectIframe(cdp, pattern, waitMs ?? 5000);
+                response.appendResponseLine('✅ Successfully inspected iframe popup');
+                response.appendResponseLine('');
+                response.appendResponseLine(`📄 Frame URL: ${result.frameUrl}`);
+                response.appendResponseLine(`🆔 Frame ID: ${result.frameId}`);
+                response.appendResponseLine('');
+                response.appendResponseLine('📝 HTML Content:');
+                response.appendResponseLine('```html');
+                response.appendResponseLine(result.html.length > 2000
+                    ? result.html.substring(0, 2000) + '\n... (truncated)'
+                    : result.html);
+                response.appendResponseLine('```');
+                await cdp.detach();
+            }
+            catch (error) {
+                response.appendResponseLine(`❌ Error: ${error instanceof Error ? error.message : String(error)}`);
+            }
+        });
+    },
+});
+export const patchIframePopup = defineTool({
+    name: 'patch_iframe_popup',
+    description: `Patch local extension source files and reload the extension. This allows live editing of iframe-embedded popups. The extension must be loaded from a local directory.`,
+    annotations: {
+        category: ToolCategories.EXTENSION_DEVELOPMENT,
+        readOnlyHint: false,
+    },
+    schema: {
+        extensionPath: z
+            .string()
+            .describe('Absolute path to the extension directory'),
+        patches: z
+            .array(z.object({
+            file: z
+                .string()
+                .describe('Relative path to file within extension (e.g., "popup.html")'),
+            find: z
+                .string()
+                .describe('Regular expression pattern to find'),
+            replace: z.string().describe('Replacement string'),
+        }))
+            .describe('Array of patches to apply'),
+    },
+    handler: async (request, response, context) => {
+        const page = context.getSelectedPage();
+        const { extensionPath, patches } = request.params;
+        await context.waitForEventsAfterAction(async () => {
+            try {
+                const cdp = await page.createCDPSession();
+                response.appendResponseLine(`🔧 Applying ${patches.length} patch(es) to extension...`);
+                await iframePopupTools.patchAndReload(cdp, extensionPath, patches);
+                response.appendResponseLine('');
+                response.appendResponseLine('✅ Patches applied successfully');
+                response.appendResponseLine('🔄 Extension reloaded');
+                response.appendResponseLine('');
+                response.appendResponseLine('Applied patches:');
+                for (const p of patches) {
+                    response.appendResponseLine(`  • ${p.file}: "${p.find}" → "${p.replace}"`);
+                }
+                await cdp.detach();
+            }
+            catch (error) {
+                response.appendResponseLine(`❌ Error: ${error instanceof Error ? error.message : String(error)}`);
+            }
+        });
+    },
+});
+export const reloadIframeExtension = defineTool({
+    name: 'reload_iframe_extension',
+    description: `Reload the extension via its service worker using chrome.runtime.reload(). Useful after manually editing extension files.`,
+    annotations: {
+        category: ToolCategories.EXTENSION_DEVELOPMENT,
+        readOnlyHint: false,
+    },
+    schema: {},
+    handler: async (request, response, context) => {
+        const page = context.getSelectedPage();
+        await context.waitForEventsAfterAction(async () => {
+            try {
+                const cdp = await page.createCDPSession();
+                response.appendResponseLine('🔄 Reloading extension...');
+                await iframePopupTools.reloadExtension(cdp);
+                response.appendResponseLine('');
+                response.appendResponseLine('✅ Extension reloaded successfully');
+                await cdp.detach();
+            }
+            catch (error) {
+                response.appendResponseLine(`❌ Error: ${error instanceof Error ? error.message : String(error)}`);
+            }
+        });
+    },
+});

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

@@ -0,0 +1,103 @@
+// 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.
+import fs from 'node:fs/promises';
+import path from 'node:path';
+export async function findExtensionIdViaTargets(cdp) {
+    const { targetInfos } = await cdp.send('Target.getTargets');
+    const ext = targetInfos.find((t) => t.type === 'service_worker' && t.url.startsWith('chrome-extension://'));
+    if (!ext)
+        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');
+    // First quick scan
+    const tree = await cdp.send('Page.getFrameTree');
+    const hit = scanTree(tree.frameTree, pattern);
+    if (hit)
+        return hit;
+    // Then wait for navigation events
+    const start = Date.now();
+    return await new Promise((resolve, reject) => {
+        function onNav(ev) {
+            const { frame } = ev;
+            if (frame?.url && pattern.test(frame.url)) {
+                cleanup();
+                resolve({ frameId: frame.id, frameUrl: frame.url });
+            }
+        }
+        function onTimeout() {
+            cleanup();
+            reject(new Error(`Timeout waiting for frame by url match: ${pattern}`));
+        }
+        function cleanup() {
+            cdp.off('Page.frameNavigated', onNav);
+        }
+        cdp.on('Page.frameNavigated', onNav);
+        const left = Math.max(0, timeoutMs - (Date.now() - start));
+        setTimeout(onTimeout, left);
+    });
+    function scanTree(node, rx) {
+        if (node?.frame?.url && rx.test(node.frame.url)) {
+            return { frameId: node.frame.id, frameUrl: node.frame.url };
+        }
+        for (const c of node.childFrames ?? []) {
+            const r = scanTree(c, rx);
+            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 { result } = await cdp.send('Runtime.evaluate', {
+        contextId: executionContextId,
+        expression: 'document.documentElement.outerHTML',
+        returnByValue: true,
+    });
+    return {
+        frameId,
+        frameUrl,
+        html: String(result.value ?? ''),
+    };
+}
+export async function patchAndReload(cdp, extensionPath, patches) {
+    for (const p of patches) {
+        const abs = path.join(extensionPath, p.file);
+        const src = await fs.readFile(abs, 'utf8');
+        const rx = new RegExp(p.find, 'g');
+        const out = src.replace(rx, p.replace);
+        if (out != src)
+            await fs.writeFile(abs, out, 'utf8');
+    }
+    await reloadExtension(cdp);
+}
+export async function reloadExtension(cdp) {
+    const { targetInfos } = await cdp.send('Target.getTargets');
+    const sw = targetInfos.find((t) => t.type === 'service_worker' && t.url.startsWith('chrome-extension://'));
+    if (!sw)
+        throw new Error('Extension service worker not found for reload');
+    // Attach to the service worker and execute chrome.runtime.reload()
+    const { sessionId } = await cdp.send('Target.attachToTarget', {
+        targetId: sw.targetId,
+        flatten: true,
+    });
+    await cdp.send('Target.sendMessageToTarget', {
+        sessionId,
+        message: JSON.stringify({
+            id: 1,
+            method: 'Runtime.evaluate',
+            params: { expression: 'chrome.runtime.reload()' },
+        }),
+    });
+}

package/package.json

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