chrome-devtools-mcp-for-extension 0.10.0 → 0.10.1

package/build/src/tools/deep_research_chatgpt.js

@@ -259,56 +259,31 @@ async function detectDeepResearchMode(page) {
 async function enableDeepResearchMode(page, response) {
     try {
         response.appendResponseLine('DeepResearchモードを有効化中...');
-        // Step 1: Click "+" button (ファイルの追加など)
-        const plusButtonSelector = await page.evaluate(() => {
-            const buttons = Array.from(document.querySelectorAll('button'));
-            const plusButton = buttons.find((btn) => {
-                const aria = btn.getAttribute('aria-label') || '';
-                return aria.includes('ファイルの追加');
-            });
-            if (!plusButton)
-                return { success: false, error: '+ボタン（ファイルの追加など）が見つかりません' };
-            // Return selector info instead of clicking
-            const ariaLabel = plusButton.getAttribute('aria-label');
-            return { success: true, ariaLabel };
-        });
-        if (!plusButtonSelector.success) {
-            return { success: false, error: plusButtonSelector.error };
+        // Step 1: +ボタンをクリック（Puppeteer click）
+        const plusButton = await page.$('button[aria-label*="ファイルの追加"]');
+        if (!plusButton) {
+            return { success: false, error: '+ボタンが見つかりません' };
         }
-        // Use Puppeteer's click for reliable interaction
-        await page.click(`button[aria-label="${plusButtonSelector.ariaLabel}"]`);
-        response.appendResponseLine('✅ +ボタン（ファイルの追加など）をクリック');
-        // Wait for menu to appear
-        await page.waitForSelector('[role="menuitemradio"]', { visible: true, timeout: 5000 });
-        await new Promise((resolve) => setTimeout(resolve, 500));
-        // Step 2: Find and click "Deep Research" menuitemradio
-        const deepResearchResult = await page.evaluate(() => {
-            const menuItems = Array.from(document.querySelectorAll('[role="menuitemradio"]'));
-            const deepResearchItem = menuItems.find((item) => item.textContent?.includes('Deep Research') || item.textContent?.includes('リサーチ'));
-            if (!deepResearchItem) {
-                return {
-                    success: false,
-                    error: `DeepResearch menuitemradio が見つかりません (found: ${menuItems.length} items: ${menuItems.map(m => m.textContent?.trim()).join(', ')})`,
-                };
-            }
-            // Check if already checked
-            const isChecked = deepResearchItem.getAttribute('aria-checked') === 'true';
-            if (!isChecked) {
-                deepResearchItem.click();
+        await plusButton.click();
+        response.appendResponseLine('✅ +ボタンをクリック');
+        await page.waitForTimeout(500);
+        // Step 2: Deep Research menuitemradio をクリック（Puppeteer click）
+        const menuItems = await page.$$('[role="menuitemradio"]');
+        let deepResearchItem = null;
+        for (const item of menuItems) {
+            const text = await item.evaluate((el) => el.textContent);
+            if (text?.includes('Deep Research') || text?.includes('リサーチ')) {
+                deepResearchItem = item;
+                break;
             }
-            return { success: true, alreadyEnabled: isChecked };
-        });
-        if (!deepResearchResult.success) {
-            return { success: false, error: deepResearchResult.error };
-        }
-        if (deepResearchResult.alreadyEnabled) {
-            response.appendResponseLine('✅ DeepResearch は既に有効です');
         }
-        else {
-            response.appendResponseLine('✅ DeepResearch menuitemradio をクリック');
+        if (!deepResearchItem) {
+            return { success: false, error: 'Deep Research menuitemradio が見つかりません' };
         }
-        await new Promise((resolve) => setTimeout(resolve, 1000));
-        // Step 3: Verify mode was actually enabled (composer-pill detection)
+        await deepResearchItem.click();
+        response.appendResponseLine('✅ Deep Research menuitemradio をクリック');
+        await page.waitForTimeout(1000);
+        // Step 3: 検証（composer-pill確認）
         const verification = await detectDeepResearchMode(page);
         if (!verification.isEnabled) {
             return {

package/build/src/tools/deepresearch-steps.js

@@ -0,0 +1,146 @@
+/**
+ * DeepResearch ON/OFF切り替え手順記録システム
+ *
+ * 目的: 毎回要素を探す必要をなくし、記録された手順で確実に切り替え
+ */
+import fs from 'node:fs';
+import path from 'node:path';
+const PROCEDURE_FILE = path.join(process.cwd(), 'docs/deepresearch-procedure.json');
+/**
+ * デフォルトの手順定義
+ */
+const DEFAULT_PROCEDURE = {
+    version: '1.0.0',
+    lastUpdated: new Date().toISOString(),
+    steps: {
+        enable: [
+            {
+                action: 'click',
+                selector: 'button[aria-label*="ファイルの追加"]',
+                description: '+ボタンをクリックしてメニューを開く'
+            },
+            {
+                action: 'wait',
+                waitMs: 500,
+                description: 'メニューが表示されるまで待機'
+            },
+            {
+                action: 'click',
+                selector: '[role="menuitemradio"]',
+                textContent: 'Deep Research',
+                description: 'Deep Research menuitemradio をクリック'
+            },
+            {
+                action: 'wait',
+                waitMs: 1000,
+                description: 'DeepResearch有効化完了を待機'
+            }
+        ],
+        disable: [
+            {
+                action: 'click',
+                selector: 'button[aria-label*="リサーチ：クリックして削除"]',
+                description: 'リサーチpillボタンをクリックして無効化'
+            }
+        ],
+        verify: [
+            {
+                action: 'verify',
+                selector: 'button.__composer-pill[aria-label*="リサーチ"]',
+                description: 'リサーチpillボタンの存在確認'
+            }
+        ]
+    }
+};
+/**
+ * 手順をファイルから読み込み
+ */
+export async function loadProcedure() {
+    try {
+        if (fs.existsSync(PROCEDURE_FILE)) {
+            const data = await fs.promises.readFile(PROCEDURE_FILE, 'utf-8');
+            return JSON.parse(data);
+        }
+    }
+    catch (error) {
+        console.error(`手順ファイルの読み込みエラー: ${error}`);
+    }
+    return DEFAULT_PROCEDURE;
+}
+/**
+ * 手順をファイルに保存
+ */
+export async function saveProcedure(procedure) {
+    try {
+        const dir = path.dirname(PROCEDURE_FILE);
+        await fs.promises.mkdir(dir, { recursive: true });
+        await fs.promises.writeFile(PROCEDURE_FILE, JSON.stringify(procedure, null, 2), 'utf-8');
+    }
+    catch (error) {
+        console.error(`手順ファイルの保存エラー: ${error}`);
+    }
+}
+/**
+ * 手順を実行
+ */
+export async function executeProcedure(page, steps) {
+    for (const step of steps) {
+        try {
+            if (step.action === 'click') {
+                const element = await page.$(step.selector);
+                if (!element) {
+                    return { success: false, error: `要素が見つかりません: ${step.selector}` };
+                }
+                // textContent指定がある場合は検証
+                if (step.textContent) {
+                    const text = await page.evaluate((el) => el.textContent, element);
+                    if (!text?.includes(step.textContent)) {
+                        return { success: false, error: `テキスト不一致: 期待="${step.textContent}", 実際="${text}"` };
+                    }
+                }
+                await element.click();
+            }
+            else if (step.action === 'wait') {
+                await page.waitForTimeout(step.waitMs || 500);
+            }
+            else if (step.action === 'verify') {
+                const element = await page.$(step.selector);
+                if (!element) {
+                    return { success: false, error: `検証失敗: ${step.selector} が見つかりません` };
+                }
+            }
+        }
+        catch (error) {
+            return {
+                success: false,
+                error: `ステップ実行エラー: ${step.description} - ${error}`
+            };
+        }
+    }
+    return { success: true };
+}
+/**
+ * DeepResearchを有効化
+ */
+export async function enableDeepResearch(page) {
+    const procedure = await loadProcedure();
+    return await executeProcedure(page, procedure.steps.enable);
+}
+/**
+ * DeepResearchを無効化
+ */
+export async function disableDeepResearch(page) {
+    const procedure = await loadProcedure();
+    return await executeProcedure(page, procedure.steps.disable);
+}
+/**
+ * DeepResearch状態を確認
+ */
+export async function verifyDeepResearch(page) {
+    const procedure = await loadProcedure();
+    const result = await executeProcedure(page, procedure.steps.verify);
+    if (!result.success) {
+        return { enabled: false, error: result.error };
+    }
+    return { enabled: true };
+}

package/build/src/tools/deepresearch-toggle.js

@@ -0,0 +1,82 @@
+/**
+ * DeepResearch ON/OFF 切り替えツール（簡潔版）
+ *
+ * 目的: 最小限のコードで確実にDeepResearchを切り替え
+ */
+/**
+ * DeepResearch有効化（シンプル実装）
+ */
+export async function enableDeepResearch(page) {
+    try {
+        // Step 1: +ボタンをクリック
+        const plusButton = await page.$('button[aria-label*="ファイルの追加"]');
+        if (!plusButton) {
+            return { success: false, error: '+ボタンが見つかりません' };
+        }
+        await plusButton.click();
+        await page.waitForTimeout(500);
+        // Step 2: Deep Research menuitemradio をクリック
+        const menuItems = await page.$$('[role="menuitemradio"]');
+        let deepResearchItem = null;
+        for (const item of menuItems) {
+            const text = await item.evaluate((el) => el.textContent);
+            if (text?.includes('Deep Research') || text?.includes('リサーチ')) {
+                deepResearchItem = item;
+                break;
+            }
+        }
+        if (!deepResearchItem) {
+            return { success: false, error: 'Deep Research menuitemradio が見つかりません' };
+        }
+        await deepResearchItem.click();
+        await page.waitForTimeout(1000);
+        // Step 3: 検証（composer-pill確認）
+        const pill = await page.$('button.__composer-pill[aria-label*="リサーチ"]');
+        if (!pill) {
+            return { success: false, error: 'DeepResearch pill が表示されませんでした' };
+        }
+        return { success: true };
+    }
+    catch (error) {
+        return { success: false, error: `エラー: ${error}` };
+    }
+}
+/**
+ * DeepResearch無効化（シンプル実装）
+ */
+export async function disableDeepResearch(page) {
+    try {
+        // リサーチpillボタンをクリック
+        const pill = await page.$('button[aria-label*="リサーチ：クリックして削除"]');
+        if (!pill) {
+            return { success: false, error: 'リサーチpillボタンが見つかりません（既にOFFの可能性）' };
+        }
+        await pill.click();
+        await page.waitForTimeout(500);
+        // 検証: pillが消えたことを確認
+        const stillExists = await page.$('button[aria-label*="リサーチ：クリックして削除"]');
+        if (stillExists) {
+            return { success: false, error: 'DeepResearch無効化に失敗しました' };
+        }
+        return { success: true };
+    }
+    catch (error) {
+        return { success: false, error: `エラー: ${error}` };
+    }
+}
+/**
+ * DeepResearch状態確認（シンプル実装）
+ */
+export async function checkDeepResearch(page) {
+    try {
+        const pill = await page.$('button.__composer-pill[aria-label*="リサーチ"]');
+        if (pill) {
+            const text = await pill.evaluate((el) => el.textContent?.trim());
+            return { enabled: true, indicator: `composer-pill: "${text}"` };
+        }
+        return { enabled: false };
+    }
+    catch (error) {
+        return { enabled: false };
+    }
+}

package/package.json

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