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

package/build/src/tools/extensions.js

@@ -712,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,121 @@
+// 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');
+    await cdp.send('Runtime.enable');
+    await cdp.send('DOM.enable');
+    // Strategy: Find iframe in DOM, then match Frame ID
+    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;
+                    }
+                }
+            }
+        }
+        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 { 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.10",
+  "version": "0.9.1",
   "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",