chrome-devtools-mcp-for-extension 0.11.1 → 0.12.0

package/build/src/main.js

@@ -15,10 +15,12 @@ import { logger, saveLogsToFile } from './logger.js';
 import { McpContext } from './McpContext.js';
 import { McpResponse } from './McpResponse.js';
 import { Mutex } from './Mutex.js';
+import { runStartupCheck } from './startup-check.js';
 import * as bookmarkTools from './tools/bookmarks.js';
 import * as chatgptWebTools from './tools/chatgpt-web.js';
 import * as deepResearchChatGPTTools from './tools/deep_research_chatgpt.js';
 import * as consoleTools from './tools/console.js';
+import * as diagnoseUiTools from './tools/diagnose-ui.js';
 import * as emulationTools from './tools/emulation.js';
 import * as extensionTools from './tools/extensions.js';
 import * as inputTools from './tools/input.js';
@@ -56,6 +58,7 @@ server.server.setRequestHandler(SetLevelRequestSchema, () => {
     return {};
 });
 let context;
+let uiHealthCheckRun = false; // Track if UI health check has been run
 async function getContext() {
     const browser = await resolveBrowser({
         browserUrl: args.browserUrl,
@@ -74,6 +77,14 @@ async function getContext() {
     // Always recreate context if browser reference changed or context doesn't exist
     if (!context || context.browser !== browser) {
         context = await McpContext.from(browser, logger);
+        // Run UI health check only once per browser instance
+        if (!uiHealthCheckRun) {
+            uiHealthCheckRun = true;
+            // Run in background to avoid blocking startup
+            runStartupCheck(browser).catch(err => {
+                logger(`Startup check failed: ${err}`);
+            });
+        }
     }
     return context;
 }
@@ -138,6 +149,7 @@ const tools = [
     ...Object.values(chatgptWebTools),
     ...Object.values(deepResearchChatGPTTools),
     ...Object.values(consoleTools),
+    ...Object.values(diagnoseUiTools),
     ...Object.values(emulationTools),
     ...Object.values(extensionTools),
     ...Object.values(inputTools),

package/build/src/selectors/chatgpt.json

@@ -0,0 +1,85 @@
+{
+  "version": "2025-10",
+  "lastUpdated": "2025-10-03",
+  "description": "ChatGPT Web UI selectors for browser automation",
+  "elements": {
+    "newChatLink": {
+      "css": "a[href='/']",
+      "description": "新しいチャット作成リンク"
+    },
+    "tempChatToggle": {
+      "ax": {
+        "role": "button",
+        "nameContains": "一時チャットをオフにする"
+      },
+      "description": "一時チャットON/OFFトグルボタン"
+    },
+    "addFileButton": {
+      "ax": {
+        "role": "button",
+        "ariaLabel": "ファイルの追加"
+      },
+      "description": "ファイル追加（ツールメニューを開く）ボタン"
+    },
+    "deepResearchMenuItem": {
+      "css": "[role='menuitemradio']",
+      "text": "Deep Research",
+      "description": "DeepResearchモード切り替えメニュー項目"
+    },
+    "deepResearchDeleteButton": {
+      "text": "リサーチ：クリックして削除",
+      "description": "DeepResearch削除ボタン（モード確認用）"
+    },
+    "deepResearchSourcesButton": {
+      "text": "情報源",
+      "description": "情報源ボタン（モード確認用）"
+    },
+    "composerTextarea": {
+      "css": "textarea[placeholder]",
+      "description": "メッセージ入力テキストエリア"
+    },
+    "prosemirrorEditor": {
+      "css": ".ProseMirror[contenteditable='true']",
+      "description": "ProseMirrorエディタ"
+    },
+    "sendButton": {
+      "css": "button[data-testid='send-button']",
+      "description": "送信ボタン"
+    },
+    "userMessage": {
+      "css": "[data-message-author-role='user']",
+      "description": "ユーザーメッセージ"
+    },
+    "assistantMessage": {
+      "css": "[data-message-author-role='assistant']",
+      "description": "アシスタントメッセージ"
+    },
+    "stopButton": {
+      "text": [
+        "停止",
+        "リサーチを停止",
+        "ストリーミングの停止"
+      ],
+      "ax": {
+        "ariaLabel": [
+          "停止",
+          "ストリーミングの停止"
+        ]
+      },
+      "description": "ストリーミング停止ボタン"
+    },
+    "thinkingTimeButton": {
+      "ax": {
+        "ariaLabelContains": "思考時間"
+      },
+      "description": "思考時間表示ボタン"
+    }
+  },
+  "placeholders": {
+    "normalMode": "Message ChatGPT",
+    "deepResearchMode": [
+      "詳細なレポート",
+      "リサーチ"
+    ]
+  }
+}

package/build/src/selectors/loader.js

@@ -0,0 +1,102 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import { fileURLToPath } from 'node:url';
+let cachedSelectors = null;
+/**
+ * Load ChatGPT selectors from JSON file
+ */
+export function loadSelectors() {
+    if (cachedSelectors) {
+        return cachedSelectors;
+    }
+    const __filename = fileURLToPath(import.meta.url);
+    const __dirname = path.dirname(__filename);
+    const selectorsPath = path.join(__dirname, 'chatgpt.json');
+    try {
+        const data = fs.readFileSync(selectorsPath, 'utf-8');
+        cachedSelectors = JSON.parse(data);
+        return cachedSelectors;
+    }
+    catch (error) {
+        throw new Error(`Failed to load selectors from ${selectorsPath}: ${error}`);
+    }
+}
+/**
+ * Get a specific selector definition
+ */
+export function getSelector(elementName) {
+    const selectors = loadSelectors();
+    const selector = selectors.elements[elementName];
+    if (!selector) {
+        throw new Error(`Selector not found: ${elementName}`);
+    }
+    return selector;
+}
+/**
+ * Generate page.evaluate() compatible selector function for text matching
+ */
+export function generateTextMatcher(selector, tagName = 'button') {
+    const textPatterns = Array.isArray(selector.text)
+        ? selector.text
+        : [selector.text];
+    return `
+    Array.from(document.querySelectorAll('${tagName}')).find(el => {
+      const text = el.textContent || '';
+      return ${textPatterns.map((t) => `text.includes('${t}')`).join(' || ')};
+    })
+  `;
+}
+/**
+ * Generate page.evaluate() compatible selector function for accessibility matching
+ */
+export function generateAxMatcher(selector, tagName = 'button') {
+    if (!selector.ax) {
+        throw new Error('Accessibility selector not defined');
+    }
+    const conditions = [];
+    if (selector.ax.ariaLabel) {
+        const labels = Array.isArray(selector.ax.ariaLabel)
+            ? selector.ax.ariaLabel
+            : [selector.ax.ariaLabel];
+        conditions.push(labels.map((label) => `aria.includes('${label}')`).join(' || '));
+    }
+    if (selector.ax.ariaLabelContains) {
+        conditions.push(`aria.includes('${selector.ax.ariaLabelContains}')`);
+    }
+    if (selector.ax.nameContains) {
+        conditions.push(`aria.includes('${selector.ax.nameContains}')`);
+    }
+    return `
+    Array.from(document.querySelectorAll('${tagName}')).find(el => {
+      const aria = el.getAttribute('aria-label') || '';
+      return ${conditions.join(' || ')};
+    })
+  `;
+}
+/**
+ * Check if placeholder matches expected patterns
+ */
+export function checkPlaceholder(placeholder, mode) {
+    const selectors = loadSelectors();
+    if (mode === 'normal' && selectors.placeholders?.normalMode) {
+        return placeholder.includes(selectors.placeholders.normalMode);
+    }
+    if (mode === 'deepResearch' && selectors.placeholders?.deepResearchMode) {
+        const patterns = Array.isArray(selectors.placeholders.deepResearchMode)
+            ? selectors.placeholders.deepResearchMode
+            : [selectors.placeholders.deepResearchMode];
+        return patterns.some((pattern) => placeholder.includes(pattern));
+    }
+    return false;
+}
+/**
+ * Clear cached selectors (useful for testing or hot-reload)
+ */
+export function clearCache() {
+    cachedSelectors = null;
+}

package/build/src/startup-check.js

@@ -0,0 +1,142 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * UI elements to check during health verification
+ */
+const UI_ELEMENTS = [
+    {
+        name: 'Deep Research Toggle',
+        selector: '[role="menuitemradio"]', // Deep Research menu item
+    },
+    {
+        name: 'Composer Textarea',
+        selector: 'textarea, .ProseMirror[contenteditable="true"]', // ChatGPT input area
+    },
+    {
+        name: 'Send Button',
+        selector: 'button[data-testid="send-button"]', // Send message button
+    },
+];
+/**
+ * Check if UI element exists using accessibility tree
+ */
+async function checkElementExists(page, element) {
+    try {
+        // First try direct DOM query
+        const domCheck = await page.evaluate((selector) => {
+            return document.querySelector(selector) !== null;
+        }, element.selector);
+        if (domCheck) {
+            return true;
+        }
+        // Fallback: Check accessibility tree
+        const axTree = await page.accessibility.snapshot();
+        if (!axTree) {
+            return false;
+        }
+        // Search for element by name in AX tree
+        function searchAxTree(node) {
+            if (node.name?.includes(element.name)) {
+                return true;
+            }
+            if (node.children) {
+                for (const child of node.children) {
+                    if (searchAxTree(child)) {
+                        return true;
+                    }
+                }
+            }
+            return false;
+        }
+        return searchAxTree(axTree);
+    }
+    catch (error) {
+        console.error(`Error checking ${element.name}:`, error);
+        return false;
+    }
+}
+/**
+ * Verify ChatGPT UI health on startup
+ */
+export async function verifyUIHealth(browser) {
+    console.error('\n🔍 UI Health Check: Starting...');
+    let page;
+    try {
+        // Get or create a page
+        const pages = await browser.pages();
+        page = pages[0] || (await browser.newPage());
+        // Navigate to ChatGPT with short timeout
+        console.error('   Navigating to ChatGPT...');
+        await page.goto('https://chatgpt.com/', {
+            waitUntil: 'networkidle2',
+            timeout: 30000,
+        });
+        // Wait for page to be ready
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+        // Check login status
+        const currentUrl = page.url();
+        if (currentUrl.includes('auth') || currentUrl.includes('login')) {
+            console.error('⚠️  Not logged in to ChatGPT - skipping UI verification');
+            console.error('   Please log in manually for full functionality');
+            return;
+        }
+        // Check each UI element
+        const results = [];
+        for (const element of UI_ELEMENTS) {
+            const found = await checkElementExists(page, element);
+            results.push({ element, found });
+            if (found) {
+                console.error(`✅ ${element.name}: Found`);
+            }
+            else {
+                const status = element.optional ? '⚠️' : '❌';
+                console.error(`${status} ${element.name}: NOT FOUND`);
+            }
+        }
+        // Summary
+        const missingElements = results.filter((r) => !r.found && !r.element.optional);
+        if (missingElements.length > 0) {
+            console.error('\n⚠️  UI Health Check Warning:');
+            console.error('   Some UI elements were not found. ChatGPT UI may have changed.');
+            console.error('   Missing elements:');
+            missingElements.forEach((r) => {
+                console.error(`     - ${r.element.name}`);
+            });
+            console.error('\n💡 Suggestion: Run diagnostics to investigate:');
+            console.error('   npm run diagnose:ui');
+        }
+        else {
+            console.error('\n✅ UI Health Check: All elements found');
+        }
+    }
+    catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        console.error(`\n❌ UI Health Check Failed: ${errorMessage}`);
+        console.error('   This is a warning only - MCP server will continue to start');
+        console.error('   ChatGPT functionality may be limited');
+    }
+    finally {
+        // Don't close the page - let the server reuse it
+        console.error('');
+    }
+}
+/**
+ * Run UI health check with timeout protection
+ */
+export async function runStartupCheck(browser) {
+    const timeoutMs = 35000; // 35 seconds total timeout
+    try {
+        await Promise.race([
+            verifyUIHealth(browser),
+            new Promise((_, reject) => setTimeout(() => reject(new Error('UI health check timeout')), timeoutMs)),
+        ]);
+    }
+    catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        console.error(`⚠️  Startup check timeout or error: ${errorMessage}`);
+        console.error('   Continuing with server startup...');
+    }
+}

package/build/src/tools/chatgpt-web.js

@@ -8,6 +8,7 @@ import path from 'node:path';
 import z from 'zod';
 import { ToolCategories } from './categories.js';
 import { defineTool } from './ToolDefinition.js';
+import { loadSelectors, getSelector } from '../selectors/loader.js';
 /**
  * Path to store chat session data
  */
@@ -281,21 +282,26 @@ export const askChatGPTWeb = defineTool({
                         response.appendResponseLine('✅ DeepResearchモード有効化完了');
                         await new Promise((resolve) => setTimeout(resolve, 1000));
                         // Verify mode was actually enabled (check for new UI indicators)
-                        const verification = await page.evaluate(() => {
+                        const selectors = loadSelectors();
+                        const verification = await page.evaluate((deleteText, sourcesText, deepResearchPlaceholders) => {
                             // Check placeholder text
                             const textarea = document.querySelector('textarea');
                             const placeholder = textarea?.getAttribute('placeholder') || '';
-                            // Check for delete button
-                            const deleteButton = Array.from(document.querySelectorAll('button')).find(btn => btn.textContent?.includes('リサーチ：クリックして削除'));
-                            // Check for sources button
-                            const sourcesButton = Array.from(document.querySelectorAll('button')).find(btn => btn.textContent?.includes('情報源'));
+                            // Check for delete button (using JSON selector)
+                            const deleteButton = Array.from(document.querySelectorAll('button')).find(btn => btn.textContent?.includes(deleteText));
+                            // Check for sources button (using JSON selector)
+                            const sourcesButton = Array.from(document.querySelectorAll('button')).find(btn => btn.textContent?.includes(sourcesText));
+                            // Check placeholder against expected patterns
+                            const hasCorrectPlaceholder = deepResearchPlaceholders.some((pattern) => placeholder.includes(pattern));
                             return {
-                                hasCorrectPlaceholder: placeholder.includes('詳細なレポート') || placeholder.includes('リサーチ'),
+                                hasCorrectPlaceholder,
                                 hasDeleteButton: !!deleteButton,
                                 hasSourcesButton: !!sourcesButton,
                                 placeholder: placeholder
                             };
-                        });
+                        }, getSelector('deepResearchDeleteButton').text, getSelector('deepResearchSourcesButton').text, Array.isArray(selectors.placeholders?.deepResearchMode)
+                            ? selectors.placeholders.deepResearchMode
+                            : [selectors.placeholders?.deepResearchMode || '']);
                         if (verification.hasCorrectPlaceholder || verification.hasDeleteButton) {
                             response.appendResponseLine('✅ モード確認完了: DeepResearch有効');
                         }
@@ -310,17 +316,22 @@ export const askChatGPTWeb = defineTool({
             }
             // Step 4: Send question (with final mode verification)
             if (useDeepResearch) {
-                const finalCheck = await page.evaluate(() => {
+                const selectorsForCheck = loadSelectors();
+                const finalCheck = await page.evaluate((deleteText, deepResearchPlaceholders) => {
                     // Check placeholder text
                     const textarea = document.querySelector('textarea');
                     const placeholder = textarea?.getAttribute('placeholder') || '';
-                    // Check for delete button
-                    const deleteButton = Array.from(document.querySelectorAll('button')).find(btn => btn.textContent?.includes('リサーチ：クリックして削除'));
+                    // Check for delete button (using JSON selector)
+                    const deleteButton = Array.from(document.querySelectorAll('button')).find(btn => btn.textContent?.includes(deleteText));
+                    // Check if placeholder matches DeepResearch patterns
+                    const placeholderMatches = deepResearchPlaceholders.some((pattern) => placeholder.includes(pattern));
                     return {
-                        isEnabled: placeholder.includes('詳細なレポート') || placeholder.includes('リサーチ') || !!deleteButton,
+                        isEnabled: placeholderMatches || !!deleteButton,
                         placeholder: placeholder
                     };
-                });
+                }, getSelector('deepResearchDeleteButton').text, Array.isArray(selectorsForCheck.placeholders?.deepResearchMode)
+                    ? selectorsForCheck.placeholders.deepResearchMode
+                    : [selectorsForCheck.placeholders?.deepResearchMode || '']);
                 if (!finalCheck.isEnabled) {
                     response.appendResponseLine(`❌ エラー: DeepResearchモードが無効です。送信を中止します。（placeholder: ${finalCheck.placeholder}）`);
                     return;

package/build/src/tools/diagnose-ui.js

@@ -0,0 +1,310 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import fs from 'node:fs';
+import path from 'node:path';
+import z from 'zod';
+import { ToolCategories } from './categories.js';
+import { defineTool } from './ToolDefinition.js';
+/**
+ * Known important elements in ChatGPT UI
+ */
+const KNOWN_ELEMENTS = [
+    {
+        name: 'Deep Research Toggle',
+        checks: [
+            { type: 'css', selector: '[role="menuitemradio"][aria-label*="Deep"]' },
+            { type: 'xpath', selector: '//div[@role="menuitemradio" and contains(text(), "Deep research")]' },
+            { type: 'text', contains: 'Deep research' },
+        ],
+    },
+    {
+        name: 'Composer Textarea',
+        checks: [
+            { type: 'css', selector: 'textarea[placeholder*="Message"]' },
+            { type: 'css', selector: '[contenteditable="true"]' },
+            { type: 'css', selector: '#prompt-textarea' },
+        ],
+    },
+    {
+        name: 'Send Button',
+        checks: [
+            { type: 'css', selector: 'button[data-testid="send-button"]' },
+            { type: 'css', selector: 'button[aria-label*="Send"]' },
+            { type: 'xpath', selector: '//button[contains(@aria-label, "Send")]' },
+        ],
+    },
+    {
+        name: 'Model Selector',
+        checks: [
+            { type: 'css', selector: 'button[aria-label*="model"]' },
+            { type: 'css', selector: '[role="combobox"]' },
+            { type: 'text', contains: 'ChatGPT' },
+        ],
+    },
+];
+/**
+ * Ensure snapshot directory exists
+ */
+async function ensureSnapshotDir() {
+    const snapshotDir = path.join(process.cwd(), 'docs/ui-snapshots');
+    await fs.promises.mkdir(snapshotDir, { recursive: true });
+    return snapshotDir;
+}
+/**
+ * Generate timestamp-based filename
+ */
+function generateFilename(extension) {
+    const now = new Date();
+    const timestamp = now.toISOString()
+        .replace(/:/g, '')
+        .replace(/\..+/, '')
+        .replace('T', '-')
+        .slice(2); // Remove first 2 digits of year (20YY -> YY)
+    return `chatgpt-${timestamp}.${extension}`;
+}
+/**
+ * Detect element using multiple strategies
+ */
+async function detectElement(page, elementDef) {
+    const result = {
+        name: elementDef.name,
+        status: 'not_found',
+        selectors: {},
+    };
+    try {
+        // Try CSS selectors
+        for (const check of elementDef.checks.filter(c => c.type === 'css')) {
+            try {
+                const element = await page.$(check.selector);
+                if (element) {
+                    result.status = 'found';
+                    result.selectors.css = check.selector;
+                    break;
+                }
+            }
+            catch {
+                // Continue to next selector
+            }
+        }
+        // Try XPath selectors
+        for (const check of elementDef.checks.filter(c => c.type === 'xpath')) {
+            try {
+                const elements = await page.$x(check.selector);
+                if (elements.length > 0) {
+                    if (result.status !== 'found') {
+                        result.status = 'found';
+                    }
+                    result.selectors.xpath = check.selector;
+                    break;
+                }
+            }
+            catch {
+                // Continue to next selector
+            }
+        }
+        // Try text-based detection
+        for (const check of elementDef.checks.filter(c => c.type === 'text')) {
+            try {
+                const hasText = await page.evaluate((text) => {
+                    return document.body.innerText.includes(text);
+                }, check.contains);
+                if (hasText) {
+                    if (result.status !== 'found') {
+                        result.status = 'found';
+                    }
+                    result.selectors.accessibility = `Text contains: "${check.contains}"`;
+                    break;
+                }
+            }
+            catch {
+                // Continue to next check
+            }
+        }
+        // If we found some selectors but not all expected ones, mark as structure_changed
+        if (result.status === 'found' && Object.keys(result.selectors).length < elementDef.checks.length) {
+            result.status = 'structure_changed';
+            result.details = 'Some selectors work, but structure may have changed';
+        }
+    }
+    catch (error) {
+        result.details = `Error during detection: ${error instanceof Error ? error.message : String(error)}`;
+    }
+    return result;
+}
+/**
+ * Generate diagnostic report in Markdown format
+ */
+function generateReport(result) {
+    const lines = [];
+    lines.push('# ChatGPT UI Diagnosis Report');
+    lines.push('');
+    lines.push(`**Date**: ${result.timestamp}`);
+    lines.push(`**URL**: ${result.url}`);
+    lines.push('');
+    lines.push('## Element Detection Results');
+    lines.push('');
+    for (const element of result.elements) {
+        const statusEmoji = element.status === 'found' ? '✅' :
+            element.status === 'structure_changed' ? '⚠️' :
+                '❌';
+        lines.push(`### ${statusEmoji} ${element.name}`);
+        lines.push(`- **Status**: ${element.status.replace(/_/g, ' ')}`);
+        if (element.selectors && Object.keys(element.selectors).length > 0) {
+            lines.push('- **Current Selectors**:');
+            if (element.selectors.css) {
+                lines.push(`  - CSS: \`${element.selectors.css}\``);
+            }
+            if (element.selectors.xpath) {
+                lines.push(`  - XPath: \`${element.selectors.xpath}\``);
+            }
+            if (element.selectors.accessibility) {
+                lines.push(`  - Accessibility: \`${element.selectors.accessibility}\``);
+            }
+        }
+        if (element.details) {
+            lines.push(`- **Details**: ${element.details}`);
+        }
+        if (element.suggestion) {
+            lines.push(`- **Suggestion**: ${element.suggestion}`);
+        }
+        lines.push('');
+    }
+    lines.push('## Files Generated');
+    lines.push('');
+    lines.push(`- **HTML**: ${result.filesGenerated.html}`);
+    lines.push(`- **Screenshot**: ${result.filesGenerated.screenshot}`);
+    lines.push(`- **AX Tree**: ${result.filesGenerated.axTree}`);
+    lines.push(`- **Report**: ${result.filesGenerated.report}`);
+    lines.push('');
+    lines.push('## Next Steps');
+    lines.push('');
+    lines.push('1. Review the HTML snapshot to understand current DOM structure');
+    lines.push('2. Check the screenshot to see visual layout changes');
+    lines.push('3. Analyze the AX tree JSON for accessibility structure changes');
+    lines.push('4. Update selectors in relevant tool files based on findings');
+    lines.push('');
+    return lines.join('\n');
+}
+export const diagnoseChatgptUi = defineTool({
+    name: 'diagnose_chatgpt_ui',
+    description: 'Diagnose ChatGPT UI structure for debugging. ' +
+        'Captures full AX tree, HTML snapshot, screenshot, and generates a diagnostic report. ' +
+        'Use this when ChatGPT UI detection is failing or after ChatGPT updates.',
+    annotations: {
+        title: 'Diagnose ChatGPT UI',
+        category: ToolCategories.DEBUGGING,
+        readOnlyHint: true,
+    },
+    schema: {
+        url: z.string()
+            .default('https://chatgpt.com/')
+            .describe('ChatGPT URL to diagnose (default: https://chatgpt.com/)'),
+        waitForLoad: z.number()
+            .default(5000)
+            .describe('Time to wait for page to load in milliseconds (default: 5000)'),
+    },
+    handler: async (request, response, context) => {
+        const { url, waitForLoad } = request.params;
+        const page = context.getSelectedPage();
+        try {
+            response.appendResponseLine('🔍 Starting ChatGPT UI diagnosis...');
+            response.appendResponseLine('');
+            // Navigate to ChatGPT
+            response.appendResponseLine(`📡 Navigating to ${url}...`);
+            await page.goto(url, { waitUntil: 'networkidle0', timeout: 30000 });
+            // Wait for page to stabilize
+            response.appendResponseLine(`⏳ Waiting ${waitForLoad}ms for page to stabilize...`);
+            await new Promise(resolve => setTimeout(resolve, waitForLoad));
+            // Ensure snapshot directory exists
+            const snapshotDir = await ensureSnapshotDir();
+            const timestamp = new Date().toISOString();
+            // Generate filenames
+            const htmlFilename = generateFilename('html');
+            const screenshotFilename = generateFilename('png');
+            const axFilename = generateFilename('ax.json');
+            const reportFilename = generateFilename('report.md');
+            // Capture HTML
+            response.appendResponseLine('📄 Capturing HTML snapshot...');
+            const htmlContent = await page.content();
+            const htmlPath = path.join(snapshotDir, htmlFilename);
+            await fs.promises.writeFile(htmlPath, htmlContent, 'utf-8');
+            response.appendResponseLine(`✅ HTML saved: ${htmlFilename}`);
+            // Take screenshot
+            response.appendResponseLine('📸 Taking screenshot...');
+            const screenshotBuffer = await page.screenshot({
+                fullPage: true,
+                type: 'png',
+            });
+            const screenshotPath = path.join(snapshotDir, screenshotFilename);
+            await fs.promises.writeFile(screenshotPath, screenshotBuffer);
+            response.appendResponseLine(`✅ Screenshot saved: ${screenshotFilename}`);
+            // Capture full AX tree
+            response.appendResponseLine('🌳 Capturing accessibility tree...');
+            const snapshot = await page.accessibility.snapshot({ interestingOnly: false });
+            const axPath = path.join(snapshotDir, axFilename);
+            await fs.promises.writeFile(axPath, JSON.stringify(snapshot, null, 2), 'utf-8');
+            response.appendResponseLine(`✅ AX tree saved: ${axFilename}`);
+            // Detect known elements
+            response.appendResponseLine('');
+            response.appendResponseLine('🔎 Detecting important UI elements...');
+            const elementResults = [];
+            for (const elementDef of KNOWN_ELEMENTS) {
+                const result = await detectElement(page, elementDef);
+                elementResults.push(result);
+                const emoji = result.status === 'found' ? '✅' :
+                    result.status === 'structure_changed' ? '⚠️' :
+                        '❌';
+                response.appendResponseLine(`${emoji} ${result.name}: ${result.status}`);
+            }
+            // Generate diagnostic result
+            const diagnosticResult = {
+                timestamp,
+                url: page.url(),
+                elements: elementResults,
+                filesGenerated: {
+                    html: htmlFilename,
+                    screenshot: screenshotFilename,
+                    axTree: axFilename,
+                    report: reportFilename,
+                },
+            };
+            // Generate and save report
+            response.appendResponseLine('');
+            response.appendResponseLine('📝 Generating diagnostic report...');
+            const reportContent = generateReport(diagnosticResult);
+            const reportPath = path.join(snapshotDir, reportFilename);
+            await fs.promises.writeFile(reportPath, reportContent, 'utf-8');
+            response.appendResponseLine(`✅ Report saved: ${reportFilename}`);
+            // Output summary
+            response.appendResponseLine('');
+            response.appendResponseLine('✅ Diagnosis complete!');
+            response.appendResponseLine('');
+            response.appendResponseLine('📁 All files saved to: docs/ui-snapshots/');
+            response.appendResponseLine('');
+            response.appendResponseLine('Summary:');
+            const foundCount = elementResults.filter(e => e.status === 'found').length;
+            const changedCount = elementResults.filter(e => e.status === 'structure_changed').length;
+            const notFoundCount = elementResults.filter(e => e.status === 'not_found').length;
+            response.appendResponseLine(`- ✅ Found: ${foundCount}`);
+            response.appendResponseLine(`- ⚠️  Changed: ${changedCount}`);
+            response.appendResponseLine(`- ❌ Not Found: ${notFoundCount}`);
+            // Attach screenshot to response
+            response.attachImage({
+                data: Buffer.from(screenshotBuffer).toString('base64'),
+                mimeType: 'image/png',
+            });
+        }
+        catch (error) {
+            response.appendResponseLine('❌ Diagnosis failed:');
+            response.appendResponseLine(error instanceof Error ? error.message : String(error));
+            if (error instanceof Error && error.stack) {
+                response.appendResponseLine('');
+                response.appendResponseLine('Stack trace:');
+                response.appendResponseLine(error.stack);
+            }
+        }
+    },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chrome-devtools-mcp-for-extension",
-  "version": "0.11.1",
+  "version": "0.12.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",
@@ -14,6 +14,7 @@
     "docs:generate": "node --experimental-strip-types scripts/generate-docs.ts",
     "start": "npm run build && node build/src/index.js",
     "start-debug": "DEBUG=mcp:* DEBUG_COLORS=false npm run build && node build/src/index.js",
+    "diagnose:ui": "echo 'Use diagnose_chatgpt_ui tool via MCP client (Claude Code)'",
     "test": "npm run build && node --require ./build/tests/setup.js --no-warnings=ExperimentalWarning --test-reporter spec --test-force-exit --test \"build/tests/**/*.test.js\"",
     "test:only": "npm run build && node --require ./build/tests/setup.js --no-warnings=ExperimentalWarning --test-reporter spec --test-force-exit --test --test-only \"build/tests/**/*.test.js\"",
     "test:only:no-build": "node --require ./build/tests/setup.js --no-warnings=ExperimentalWarning --test-reporter spec --test-force-exit --test --test-only \"build/tests/**/*.test.js\"",