chrome-devtools-mcp-for-extension 0.7.1 → 0.8.0

package/README.md

@@ -2,9 +2,9 @@
 
 [![npm chrome-devtools-mcp-for-extension package](https://img.shields.io/npm/v/chrome-devtools-mcp-for-extension.svg)](https://npmjs.org/package/chrome-devtools-mcp-for-extension)
 
-**Zero-config Chrome extension testing with your real browser environment**
+**AI-powered Chrome extension development with automated testing, debugging, and Web Store submission**
 
-AI-powered Chrome extension development with automated testing, debugging, and Web Store submission.
+System extensions auto-load, development extensions easy to configure.
 
 **Built for:** Claude Code, Cursor, VS Code Copilot, Cline, and other MCP-compatible AI tools
 
@@ -18,46 +18,75 @@ AI-powered Chrome extension development with automated testing, debugging, and W
 - **Extension Development**: Can't test in real user environments
 
 ### The Solution
-- ✅ **Zero setup**: Uses your system Chrome profile automatically
+- ✅ **System extensions auto-load**: Your installed Chrome extensions work automatically
+- ✅ **Easy dev extension setup**: Simple `--loadExtensionsDir` configuration for development
 - ✅ **Real environment**: Tests with your actual extensions and settings
-- ✅ **No copying**: Direct profile access, instant sync
-- ✅ **Always enabled**: Extensions work automatically, no configuration needed
+- ✅ **Independent instance**: Runs alongside your regular Chrome without conflicts
 
 ---
 
 ## 🚀 Quick Start
 
-### 1. Install (30 seconds)
+### 1. Add Configuration
 
-**Claude Code users (recommended):**
-```bash
-claude mcp add --scope user chrome-devtools-extension npx chrome-devtools-mcp-for-extension@latest
+Add the following to `~/.claude.json`:
+
+```json
+{
+  "mcpServers": {
+    "chrome-devtools-extension": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["chrome-devtools-mcp-for-extension@latest"],
+      "env": {}
+    }
+  }
+}
+```
+
+> **Note**: For other MCP clients (Cursor, VS Code Copilot, Cline), add to your client's global configuration file.
+
+### 2. Restart Your AI Client
+
+### 3. Test It
+
+Ask your AI:
+```
+"List all my Chrome extensions"
 ```
 
-<summary>Other MCP clients (Cursor, VS Code Copilot, Cline)</summary>
+✅ You should see your installed Chrome extensions
+
+---
+
+## 🔧 Load Development Extensions (Optional)
 
-Add to your MCP configuration file:
+To test your own extensions under development, add `--loadExtensionsDir`:
 
 ```json
 {
   "mcpServers": {
     "chrome-devtools-extension": {
       "command": "npx",
-      "args": ["chrome-devtools-mcp-for-extension@latest"]
+      "args": [
+        "chrome-devtools-mcp-for-extension@latest",
+        "--loadExtensionsDir=/path/to/your/extensions"
+      ]
     }
   }
 }
 ```
 
+**Directory structure example:**
+```
+/path/to/your/extensions/
+├── my-extension-1/
+│   └── manifest.json
+├── my-extension-2/
+│   └── manifest.json
+```
 
-### 2. Restart your AI client
-
-### 3. Verify installation
-Ask your AI: **"List all my Chrome extensions"**
-✅ You should see your installed extensions listed
-
-### 4. Start developing
-See [Common Workflows](#-common-workflows) below for typical use cases
+**More options**: See [MCP Configuration Guide](docs/mcp-configuration-guide.md)
 
 ---
 
@@ -159,15 +188,20 @@ Quick reference for the 3 core extension tools:
 <summary>⚙️ Advanced Configuration</summary>
 
 ## Auto-load Development Extension
+
+Add to `~/.claude.json`:
+
 ```json
 {
   "mcpServers": {
     "chrome-devtools-extension": {
+      "type": "stdio",
       "command": "npx",
       "args": [
         "chrome-devtools-mcp-for-extension@latest",
         "--loadExtension=/path/to/your/extension"
-      ]
+      ],
+      "env": {}
     }
   }
 }
@@ -176,10 +210,14 @@ Quick reference for the 3 core extension tools:
 ⚠️ **Note**: `--loadExtension` flag may be deprecated in Chrome 137+. Using system profile (default) is recommended.
 
 ## Debug Mode
+
+Add to `~/.claude.json`:
+
 ```json
 {
   "mcpServers": {
     "chrome-devtools-extension": {
+      "type": "stdio",
       "command": "npx",
       "args": ["chrome-devtools-mcp-for-extension@latest"],
       "env": {
@@ -191,15 +229,20 @@ Quick reference for the 3 core extension tools:
 ```
 
 ## Custom Chrome Channel
+
+Add to `~/.claude.json`:
+
 ```json
 {
   "mcpServers": {
     "chrome-devtools-extension": {
+      "type": "stdio",
       "command": "npx",
       "args": [
         "chrome-devtools-mcp-for-extension@latest",
         "--channel=canary"
-      ]
+      ],
+      "env": {}
     }
   }
 }
@@ -208,15 +251,20 @@ Quick reference for the 3 core extension tools:
 Options: `stable` (default), `beta`, `dev`, `canary`
 
 ## Isolated Profile Mode
+
+Add to `~/.claude.json`:
+
 ```json
 {
   "mcpServers": {
     "chrome-devtools-extension": {
+      "type": "stdio",
       "command": "npx",
       "args": [
         "chrome-devtools-mcp-for-extension@latest",
         "--isolated"
-      ]
+      ],
+      "env": {}
     }
   }
 }
@@ -408,9 +456,22 @@ interface ManifestValidation {
 - Not: `/your-extension/dist/manifest.json`
 
 **Solution:**
+
+Update `~/.claude.json`:
 ```json
-// Use --loadExtension with correct path
-"args": ["chrome-devtools-mcp-for-extension@latest", "--loadExtension=/correct/path"]
+{
+  "mcpServers": {
+    "chrome-devtools-extension": {
+      "type": "stdio",
+      "command": "npx",
+      "args": [
+        "chrome-devtools-mcp-for-extension@latest",
+        "--loadExtension=/correct/path"
+      ],
+      "env": {}
+    }
+  }
+}
 ```
 
 ## Service Worker Not Inspecting
@@ -493,34 +554,66 @@ npx chrome-devtools-mcp-for-extension@latest --isolated
 
 **Chrome拡張機能開発用のAI支援MCPサーバー**
 
-ゼロコンフィグで実環境テストが可能なChrome拡張機能開発ツール
+システム拡張機能を自動ロード、開発用拡張機能も簡単設定
 
-## インストール
+## クイックスタート
 
-**Claude Code ユーザー:**
-```bash
-claude mcp add --scope user chrome-devtools-extension npx chrome-devtools-mcp-for-extension@latest
+### 1. 設定を追加
+
+`~/.claude.json` に以下を追加:
+
+```json
+{
+  "mcpServers": {
+    "chrome-devtools-extension": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["chrome-devtools-mcp-for-extension@latest"],
+      "env": {}
+    }
+  }
+}
+```
+
+### 2. AIクライアントを再起動
+
+### 3. 動作確認
+
+AIに質問:
+```
+「Chrome拡張機能を一覧表示して」
 ```
 
-**その他のMCPクライアント:**
+✅ インストール済みの拡張機能が表示されます
+
+---
+
+## 開発用拡張機能のロード（--loadExtensionsDirあり）
+
+開発中の拡張機能をテストする場合:
+
 ```json
 {
   "mcpServers": {
     "chrome-devtools-extension": {
       "command": "npx",
-      "args": ["chrome-devtools-mcp-for-extension@latest"]
+      "args": [
+        "chrome-devtools-mcp-for-extension@latest",
+        "--loadExtensionsDir=/path/to/your/extensions"
+      ]
     }
   }
 }
 ```
 
+---
+
 ## 主な機能
 
 - 🧩 **拡張機能の開発・デバッグ・リロード**: ライブ開発環境
 - 🏪 **Chrome Web Store への自動申請**: スクリーンショット生成付き
 - 🔧 **実環境でのブラウザテスト**: 既存の拡張機能と共存
 - 🐛 **高度なデバッグ**: サービスワーカー検査、コンソール監視
-- 📸 **ストア用画像の自動生成**: 複数サイズ対応
 
 ## 使用例
 
@@ -531,14 +624,7 @@ claude mcp add --scope user chrome-devtools-extension npx chrome-devtools-mcp-fo
 「Web Storeに申請して」
 ```
 
-## なぜこのツールか？
-
-- ✅ **設定不要**: システムのChromeプロファイルを自動使用
-- ✅ **実環境テスト**: 実際の拡張機能・設定でテスト可能
-- ✅ **コピー不要**: プロファイルの直接アクセス、即座に同期
-- ✅ **常時有効**: 拡張機能が自動的に有効化
-
-詳細は英語セクションを参照してください。
+その他の詳細は英語セクションを参照してください。
 
 ---
 

package/build/src/McpResponse.js

@@ -1,6 +1,8 @@
 import { formatConsoleEvent } from './formatters/consoleFormatter.js';
 import { getFormattedHeaderValue, getShortDescriptionForRequest, getStatusFromRequest, } from './formatters/networkFormatter.js';
 import { formatA11ySnapshot } from './formatters/snapshotFormatter.js';
+import { formatExtensionsPage } from './formatters/extensionsPageFormatter.js';
+import { getDevelopmentExtensionPaths } from './browser.js';
 import { paginate } from './utils/pagination.js';
 export class McpResponse {
     #includePages = false;
@@ -120,9 +122,21 @@ Call browser_handle_dialog to handle it before continuing.`);
         if (this.#includeSnapshot) {
             const snapshot = context.getTextSnapshot();
             if (snapshot) {
-                const formattedSnapshot = formatA11ySnapshot(snapshot.root);
-                response.push('## Page content');
-                response.push(formattedSnapshot);
+                const pageUrl = context.getSelectedPage().url();
+                const isExtensionsPage = pageUrl.startsWith('chrome://extensions');
+                let formattedSnapshot;
+                if (isExtensionsPage) {
+                    // Use structured extensions page formatter
+                    const developmentPaths = getDevelopmentExtensionPaths();
+                    formattedSnapshot = formatExtensionsPage(snapshot.root, developmentPaths);
+                    response.push(formattedSnapshot);
+                }
+                else {
+                    // Use standard accessibility tree formatter
+                    formattedSnapshot = formatA11ySnapshot(snapshot.root);
+                    response.push('## Page content');
+                    response.push(formattedSnapshot);
+                }
             }
         }
         response.push(...this.#getIncludeNetworkRequestsData(context));

package/build/src/browser.js

@@ -225,8 +225,15 @@ function discoverSystemExtensions(channel) {
     }
     return extensionPaths;
 }
+// Store development extension paths globally for later retrieval
+let developmentExtensionPaths = [];
+export function getDevelopmentExtensionPaths() {
+    return developmentExtensionPaths;
+}
 export async function launch(options) {
     const { channel, executablePath, customDevTools, headless, isolated, loadExtension, loadExtensionsDir, loadSystemExtensions, } = options;
+    // Reset development extension paths
+    developmentExtensionPaths = [];
     const profileDirName = channel && channel !== 'stable'
         ? `chrome-profile-${channel}`
         : 'chrome-profile';
@@ -260,6 +267,7 @@ export async function launch(options) {
                     const manifest = JSON.parse(manifestContent);
                     if (manifest.manifest_version) {
                         extensionPaths.push(loadExtension);
+                        developmentExtensionPaths.push(loadExtension); // Track as development extension
                         console.error(`✅ Single extension validated: ${loadExtension}`);
                     }
                     else {
@@ -281,6 +289,7 @@ export async function launch(options) {
     if (loadExtensionsDir) {
         const scannedExtensions = scanExtensionsDirectory(loadExtensionsDir);
         extensionPaths.push(...scannedExtensions);
+        developmentExtensionPaths.push(...scannedExtensions); // Track as development extensions
     }
     // System extension discovery (default: true unless isolated flag is set)
     const shouldLoadSystemExtensions = loadSystemExtensions ?? !isolated;

package/build/src/formatters/extensionsPageFormatter.js

@@ -0,0 +1,184 @@
+/**
+ * Format chrome://extensions page with structured output
+ */
+export function formatExtensionsPage(root, developmentExtensionPaths) {
+    const groups = groupExtensions(root, developmentExtensionPaths);
+    let result = '# Chrome Extensions Page\n\n';
+    // Developer mode section
+    const devModeSwitch = findDeveloperModeSwitch(root);
+    if (devModeSwitch) {
+        const isChecked = devModeSwitch.checked === true;
+        result += `## Developer Mode: ${isChecked ? 'ON ✓' : 'OFF ✗'}\n`;
+        result += `  uid=${devModeSwitch.id} switch "${devModeSwitch.name || devModeSwitch.description || 'Developer mode'}" ${isChecked ? '[checked]' : '[unchecked]'}\n\n`;
+    }
+    // Development extensions first
+    const devGroups = groups.filter(g => g.isDevelopment);
+    const systemGroups = groups.filter(g => !g.isDevelopment);
+    if (devGroups.length > 0) {
+        result += `## 🔧 Development Extensions (Your Project)\n\n`;
+        for (const group of devGroups) {
+            result += formatExtensionGroup(group);
+        }
+    }
+    if (systemGroups.length > 0) {
+        result += `## 📦 System Extensions\n\n`;
+        for (const group of systemGroups) {
+            result += formatExtensionGroup(group);
+        }
+    }
+    return result;
+}
+function formatExtensionGroup(group) {
+    let result = '';
+    // Header with status indicators
+    const statusIcon = group.enabled ? '✓' : '✗';
+    const errorIcon = group.errors.length > 0 ? ' ⚠️ HAS ERRORS' : '';
+    const devIcon = group.isDevelopment ? ' ⭐' : '';
+    result += `### Extension: "${group.name}" v${group.version} [${group.enabled ? 'ENABLED' : 'DISABLED'}]${statusIcon}${devIcon}${errorIcon}\n`;
+    if (group.location) {
+        result += `  Location: ${group.location}\n`;
+    }
+    // Find and label key buttons
+    const buttons = {
+        details: findButton(group.nodes, ['Details', 'View', 'Show details']),
+        remove: findButton(group.nodes, ['Remove', 'Delete', 'Uninstall']),
+        reload: findButton(group.nodes, ['Reload', 'Refresh']),
+        errors: findButton(group.nodes, ['Errors', 'Error', 'View errors']),
+        enabled: findSwitch(group.nodes, ['Enabled', 'Enable']),
+    };
+    // Display buttons with clear labels
+    if (buttons.details) {
+        result += `  uid=${buttons.details.id} button "Details"\n`;
+    }
+    if (buttons.remove) {
+        result += `  uid=${buttons.remove.id} button "Remove"\n`;
+    }
+    if (buttons.reload) {
+        result += `  uid=${buttons.reload.id} button "Reload" ${group.isDevelopment ? '← USE THIS TO RELOAD YOUR EXTENSION' : ''}\n`;
+    }
+    if (buttons.errors) {
+        result += `  uid=${buttons.errors.id} button "Errors" [clickable]\n`;
+    }
+    if (buttons.enabled) {
+        const isChecked = buttons.enabled.checked === true;
+        result += `  uid=${buttons.enabled.id} switch "Enabled" ${isChecked ? '[checked]' : '[unchecked]'}\n`;
+    }
+    // Display errors if any
+    if (group.errors.length > 0) {
+        result += `\n  ⚠️ Errors:\n`;
+        for (const error of group.errors) {
+            result += `    - ${error}\n`;
+        }
+    }
+    result += '\n';
+    return result;
+}
+function groupExtensions(root, developmentPaths) {
+    const groups = [];
+    // Find extension cards (typically have role="article" or contain extension name as heading)
+    const findExtensionCards = (node) => {
+        // Look for extension name patterns
+        if (node.role === 'heading' &&
+            node.level === 3 &&
+            node.name &&
+            !node.name.includes('Chrome Web Store')) {
+            // This is likely an extension name
+            const extensionName = node.name;
+            // Find sibling nodes that belong to this extension
+            const siblings = [];
+            let version = '';
+            let enabled = true;
+            let location = '';
+            const errors = [];
+            // Collect related nodes (buttons, switches, text)
+            const collectNodes = (n, depth = 0) => {
+                if (depth > 5)
+                    return; // Limit depth
+                siblings.push(n);
+                // Extract version
+                if (n.role === 'text' && n.name && /^v?\d+\.\d+/.test(n.name)) {
+                    version = n.name;
+                }
+                // Extract location for development extensions
+                if (n.role === 'text' &&
+                    n.name &&
+                    (n.name.includes('/') || n.name.includes('\\'))) {
+                    location = n.name;
+                }
+                // Extract errors
+                if ((n.role === 'text' || n.role === 'paragraph') &&
+                    n.name &&
+                    (n.name.toLowerCase().includes('error') ||
+                        n.name.toLowerCase().includes('failed') ||
+                        n.name.toLowerCase().includes('warning'))) {
+                    errors.push(n.name);
+                }
+                for (const child of n.children) {
+                    collectNodes(child, depth + 1);
+                }
+            };
+            // Collect from parent's children
+            collectNodes(node);
+            // Determine if it's a development extension
+            const isDevelopment = developmentPaths.some(path => location.includes(path) ||
+                extensionName.toLowerCase().includes('development'));
+            groups.push({
+                name: extensionName,
+                version: version || '0.0.0',
+                enabled,
+                isDevelopment,
+                location: location || undefined,
+                nodes: siblings,
+                errors,
+            });
+        }
+        for (const child of node.children) {
+            findExtensionCards(child);
+        }
+    };
+    findExtensionCards(root);
+    return groups;
+}
+function findButton(nodes, keywords) {
+    for (const node of nodes) {
+        if (node.role === 'button') {
+            const text = node.name || node.description || node.roledescription || '';
+            for (const keyword of keywords) {
+                if (text.toLowerCase().includes(keyword.toLowerCase())) {
+                    return node;
+                }
+            }
+        }
+    }
+    return null;
+}
+function findSwitch(nodes, keywords) {
+    for (const node of nodes) {
+        if (node.role === 'switch') {
+            const text = node.name || node.description || node.roledescription || '';
+            for (const keyword of keywords) {
+                if (text.toLowerCase().includes(keyword.toLowerCase())) {
+                    return node;
+                }
+            }
+        }
+    }
+    return null;
+}
+function findDeveloperModeSwitch(root) {
+    const search = (node) => {
+        if (node.role === 'switch') {
+            const text = node.name || node.description || node.roledescription || '';
+            if (text.toLowerCase().includes('developer')) {
+                return node;
+            }
+        }
+        for (const child of node.children) {
+            const found = search(child);
+            if (found)
+                return found;
+        }
+        return null;
+    };
+    return search(root);
+}

package/build/src/formatters/snapshotFormatter.js

@@ -9,10 +9,15 @@ export function formatA11ySnapshot(serializedAXNodeRoot, depth = 0) {
     return result;
 }
 function getAttributes(serializedAXNodeRoot) {
+    // Prefer description for buttons/switches with empty names
+    const displayLabel = serializedAXNodeRoot.name ||
+        serializedAXNodeRoot.description ||
+        serializedAXNodeRoot.roledescription ||
+        '';
     const attributes = [
         `uid=${serializedAXNodeRoot.id}`,
         serializedAXNodeRoot.role,
-        `"${serializedAXNodeRoot.name || ''}"`, // Corrected: Added quotes around name
+        `"${displayLabel}"`,
     ];
     // Value properties
     const valueProperties = [

package/build/src/tools/extensions.js

@@ -71,9 +71,114 @@ export const listExtensions = defineTool({
         });
     },
 });
+export const getExtensionInfo = defineTool({
+    name: 'get_extension_info',
+    description: `Get detailed information about a specific Chrome extension including its current state, version, and any errors.`,
+    annotations: {
+        category: ToolCategories.EXTENSION_DEVELOPMENT,
+        readOnlyHint: true,
+    },
+    schema: {
+        extensionName: z
+            .string()
+            .describe('The name or partial name of the extension to get info about'),
+    },
+    handler: async (request, response, context) => {
+        const page = context.getSelectedPage();
+        const { extensionName } = request.params;
+        await context.waitForEventsAfterAction(async () => {
+            await page.goto('chrome://extensions/', { waitUntil: 'networkidle0' });
+            const extensionInfo = await page.evaluate((searchName) => {
+                const extensionCards = document.querySelectorAll('extensions-item');
+                for (const card of Array.from(extensionCards)) {
+                    const shadowRoot = card.shadowRoot;
+                    if (shadowRoot) {
+                        const name = shadowRoot.querySelector('#name')?.textContent?.trim() || '';
+                        if (name.toLowerCase().includes(searchName.toLowerCase())) {
+                            const description = shadowRoot.querySelector('#description')?.textContent?.trim() ||
+                                '';
+                            const version = shadowRoot.querySelector('#version')?.textContent?.trim() || '';
+                            const enableToggle = shadowRoot.querySelector('#enable-toggle');
+                            const enabled = enableToggle?.getAttribute('checked') === '';
+                            const id = card.getAttribute('id') || 'unknown';
+                            const errorsBadge = shadowRoot.querySelector('#errors-button .badge');
+                            const hasErrors = errorsBadge
+                                ? parseInt(errorsBadge.textContent?.trim() || '0') > 0
+                                : false;
+                            // Get error details if available
+                            const errors = [];
+                            if (hasErrors) {
+                                const errorsButton = shadowRoot.querySelector('#errors-button');
+                                if (errorsButton) {
+                                    // Try to get error text from the errors section
+                                    const errorsList = shadowRoot.querySelectorAll('.error-list .error-message');
+                                    errorsList.forEach(err => {
+                                        const errorText = err.textContent?.trim();
+                                        if (errorText) {
+                                            errors.push(errorText);
+                                        }
+                                    });
+                                }
+                            }
+                            // Check if this is a development extension
+                            const detailsView = shadowRoot.querySelector('extensions-detail-view');
+                            const isDevelopment = detailsView ?
+                                detailsView.shadowRoot?.querySelector('#load-path')?.textContent?.trim() : undefined;
+                            return {
+                                found: true,
+                                id,
+                                name,
+                                version,
+                                description,
+                                enabled,
+                                hasErrors,
+                                errors,
+                                path: isDevelopment || 'Not a development extension',
+                            };
+                        }
+                    }
+                }
+                return { found: false };
+            }, extensionName);
+            if (extensionInfo.found) {
+                response.appendResponseLine(`## Extension: ${extensionInfo.name}`);
+                response.appendResponseLine('');
+                response.appendResponseLine(`**ID:** ${extensionInfo.id}`);
+                response.appendResponseLine(`**Version:** ${extensionInfo.version}`);
+                response.appendResponseLine(`**Status:** ${extensionInfo.enabled ? '✅ Enabled' : '❌ Disabled'}`);
+                if (extensionInfo.description) {
+                    response.appendResponseLine(`**Description:** ${extensionInfo.description}`);
+                }
+                if (extensionInfo.path !== 'Not a development extension') {
+                    response.appendResponseLine(`**Path:** ${extensionInfo.path}`);
+                }
+                response.appendResponseLine('');
+                if (extensionInfo.hasErrors) {
+                    response.appendResponseLine('⚠️ **Errors:**');
+                    if (extensionInfo.errors.length > 0) {
+                        extensionInfo.errors.forEach(err => {
+                            response.appendResponseLine(`  - ${err}`);
+                        });
+                    }
+                    else {
+                        response.appendResponseLine('  Extension has errors (details not available)');
+                    }
+                }
+                else {
+                    response.appendResponseLine('✅ No errors detected');
+                }
+            }
+            else {
+                response.appendResponseLine(`❌ Extension not found: "${extensionName}"`);
+                response.appendResponseLine('');
+                response.appendResponseLine('💡 Use `list_extensions` to see all installed extensions');
+            }
+        });
+    },
+});
 export const reloadExtension = defineTool({
     name: 'reload_extension',
-    description: `Reload a Chrome extension to apply changes during development.`,
+    description: `Reload a Chrome extension to apply changes during development. Checks extension state before and after reload.`,
     annotations: {
         category: ToolCategories.EXTENSION_DEVELOPMENT,
         readOnlyHint: false,
@@ -88,6 +193,39 @@ export const reloadExtension = defineTool({
         const { extensionName } = request.params;
         await context.waitForEventsAfterAction(async () => {
             await page.goto('chrome://extensions/', { waitUntil: 'networkidle0' });
+            // Get extension info before reload
+            const beforeState = await page.evaluate((searchName) => {
+                const extensionCards = document.querySelectorAll('extensions-item');
+                for (const card of Array.from(extensionCards)) {
+                    const shadowRoot = card.shadowRoot;
+                    if (shadowRoot) {
+                        const name = shadowRoot.querySelector('#name')?.textContent?.trim() || '';
+                        if (name.toLowerCase().includes(searchName.toLowerCase())) {
+                            const version = shadowRoot.querySelector('#version')?.textContent?.trim() || '';
+                            const enableToggle = shadowRoot.querySelector('#enable-toggle');
+                            const enabled = enableToggle?.getAttribute('checked') === '';
+                            const id = card.getAttribute('id') || 'unknown';
+                            return {
+                                found: true,
+                                id,
+                                name,
+                                version,
+                                enabled,
+                            };
+                        }
+                    }
+                }
+                return { found: false };
+            }, extensionName);
+            if (!beforeState.found) {
+                response.appendResponseLine(`❌ Extension not found: "${extensionName}"`);
+                return;
+            }
+            if (!beforeState.enabled) {
+                response.appendResponseLine(`⚠️ Warning: Extension "${beforeState.name}" is currently disabled`);
+            }
+            response.appendResponseLine(`🔄 Reloading: ${beforeState.name} v${beforeState.version}`);
+            // Perform reload
             const reloadResult = await page.evaluate((searchName) => {
                 const extensionCards = document.querySelectorAll('extensions-item');
                 for (const card of Array.from(extensionCards)) {
@@ -98,7 +236,7 @@ export const reloadExtension = defineTool({
                             const reloadButton = shadowRoot.querySelector('#reload-button');
                             if (reloadButton && !reloadButton.hasAttribute('hidden')) {
                                 reloadButton.click();
-                                return { success: true, extensionName: name };
+                                return { success: true };
                             }
                             else {
                                 return {
@@ -111,15 +249,238 @@ export const reloadExtension = defineTool({
                 }
                 return { success: false, reason: 'Extension not found' };
             }, extensionName);
-            if (reloadResult.success) {
-                response.appendResponseLine(`✅ Reloaded: ${reloadResult.extensionName}`);
+            if (!reloadResult.success) {
+                response.appendResponseLine(`❌ Failed: ${reloadResult.reason}`);
+                return;
+            }
+            // Wait for reload to complete
+            await new Promise(resolve => setTimeout(resolve, 1000));
+            // Check for errors after reload
+            const afterState = await page.evaluate((searchName) => {
+                const extensionCards = document.querySelectorAll('extensions-item');
+                for (const card of Array.from(extensionCards)) {
+                    const shadowRoot = card.shadowRoot;
+                    if (shadowRoot) {
+                        const name = shadowRoot.querySelector('#name')?.textContent?.trim() || '';
+                        if (name.toLowerCase().includes(searchName.toLowerCase())) {
+                            const version = shadowRoot.querySelector('#version')?.textContent?.trim() || '';
+                            const errorsBadge = shadowRoot.querySelector('#errors-button .badge');
+                            const hasErrors = errorsBadge
+                                ? parseInt(errorsBadge.textContent?.trim() || '0') > 0
+                                : false;
+                            return {
+                                found: true,
+                                version,
+                                hasErrors,
+                            };
+                        }
+                    }
+                }
+                return { found: false, hasErrors: false };
+            }, extensionName);
+            response.appendResponseLine('');
+            if (afterState.hasErrors) {
+                response.appendResponseLine(`⚠️ Extension reloaded but has errors (v${afterState.version})`);
+                response.appendResponseLine('💡 Use `get_extension_info` to see error details');
             }
             else {
-                response.appendResponseLine(`❌ Failed: ${reloadResult.reason}`);
+                response.appendResponseLine(`✅ Successfully reloaded: ${beforeState.name} v${afterState.version}`);
+            }
+        });
+    },
+});
+export const toggleExtensionState = defineTool({
+    name: 'toggle_extension_state',
+    description: `Safely enable or disable a Chrome extension. Always checks current state before toggling to prevent accidental changes.`,
+    annotations: {
+        category: ToolCategories.EXTENSION_DEVELOPMENT,
+        readOnlyHint: false,
+    },
+    schema: {
+        extensionName: z
+            .string()
+            .describe('The name or partial name of the extension'),
+        state: z
+            .enum(['enable', 'disable'])
+            .describe('Desired state: "enable" or "disable"'),
+    },
+    handler: async (request, response, context) => {
+        const page = context.getSelectedPage();
+        const { extensionName, state } = request.params;
+        const desiredEnabled = state === 'enable';
+        await context.waitForEventsAfterAction(async () => {
+            await page.goto('chrome://extensions/', { waitUntil: 'networkidle0' });
+            const result = await page.evaluate((searchName, targetEnabled) => {
+                const extensionCards = document.querySelectorAll('extensions-item');
+                for (const card of Array.from(extensionCards)) {
+                    const shadowRoot = card.shadowRoot;
+                    if (shadowRoot) {
+                        const name = shadowRoot.querySelector('#name')?.textContent?.trim() || '';
+                        if (name.toLowerCase().includes(searchName.toLowerCase())) {
+                            const enableToggle = shadowRoot.querySelector('#enable-toggle');
+                            const currentEnabled = enableToggle?.getAttribute('checked') === '';
+                            // Check if already in desired state
+                            if (currentEnabled === targetEnabled) {
+                                return {
+                                    success: true,
+                                    alreadyInState: true,
+                                    extensionName: name,
+                                    currentState: currentEnabled,
+                                };
+                            }
+                            // Toggle the state
+                            if (enableToggle) {
+                                enableToggle.click();
+                                return {
+                                    success: true,
+                                    alreadyInState: false,
+                                    extensionName: name,
+                                    previousState: currentEnabled,
+                                    newState: targetEnabled,
+                                };
+                            }
+                            else {
+                                return {
+                                    success: false,
+                                    reason: 'Enable/disable toggle not found',
+                                };
+                            }
+                        }
+                    }
+                }
+                return { success: false, reason: 'Extension not found' };
+            }, extensionName, desiredEnabled);
+            if (!result.success) {
+                response.appendResponseLine(`❌ Failed: ${result.reason}`);
+                return;
+            }
+            if (result.alreadyInState) {
+                response.appendResponseLine(`ℹ️ Extension "${result.extensionName}" is already ${result.currentState ? 'enabled' : 'disabled'}`);
+            }
+            else {
+                response.appendResponseLine(`✅ ${result.extensionName}: ${result.previousState ? 'Enabled' : 'Disabled'} → ${result.newState ? 'Enabled' : 'Disabled'}`);
+            }
+        });
+    },
+});
+export const openExtensionPopup = defineTool({
+    name: 'open_extension_popup',
+    description: `Open a Chrome extension's popup in a testable context. The popup will be opened as a page that can be interacted with using standard tools like take_snapshot, click, and evaluate_script.`,
+    annotations: {
+        category: ToolCategories.EXTENSION_DEVELOPMENT,
+        readOnlyHint: false,
+    },
+    schema: {
+        extensionName: z
+            .string()
+            .describe('The name or partial name of the extension'),
+    },
+    handler: async (request, response, context) => {
+        const page = context.getSelectedPage();
+        const { extensionName } = request.params;
+        await context.waitForEventsAfterAction(async () => {
+            // First, get extension ID
+            await page.goto('chrome://extensions/', { waitUntil: 'networkidle0' });
+            const extensionInfo = await page.evaluate((searchName) => {
+                const extensionCards = document.querySelectorAll('extensions-item');
+                for (const card of Array.from(extensionCards)) {
+                    const shadowRoot = card.shadowRoot;
+                    if (shadowRoot) {
+                        const name = shadowRoot.querySelector('#name')?.textContent?.trim() || '';
+                        if (name.toLowerCase().includes(searchName.toLowerCase())) {
+                            const id = card.getAttribute('id') || '';
+                            return { found: true, id, name };
+                        }
+                    }
+                }
+                return { found: false };
+            }, extensionName);
+            if (!extensionInfo.found) {
+                response.appendResponseLine(`❌ Extension not found: "${extensionName}"`);
+                return;
+            }
+            response.appendResponseLine(`🔍 Found extension: ${extensionInfo.name} (${extensionInfo.id})`);
+            try {
+                // Find service worker target
+                const browser = page.browser();
+                if (!browser) {
+                    response.appendResponseLine('❌ Failed to get browser instance.');
+                    return;
+                }
+                const targets = await browser.targets();
+                const workerTarget = targets.find((target) => target.type() === 'service_worker' &&
+                    target.url().includes(extensionInfo.id));
+                if (!workerTarget) {
+                    response.appendResponseLine('❌ Service worker not found. Extension may not have a service worker (MV2 extensions are not supported).');
+                    return;
+                }
+                const worker = await workerTarget.worker();
+                if (!worker) {
+                    response.appendResponseLine('❌ Failed to get service worker context.');
+                    return;
+                }
+                response.appendResponseLine('🔧 Opening popup via service worker...');
+                // Open popup
+                await worker.evaluate('chrome.action.openPopup();');
+                // Wait for popup target
+                const popupTarget = await browser.waitForTarget((target) => target.type() === 'page' &&
+                    target.url().includes(extensionInfo.id) &&
+                    target.url().includes('popup'), { timeout: 5000 });
+                if (!popupTarget) {
+                    response.appendResponseLine('❌ Popup did not open within timeout.');
+                    return;
+                }
+                const popupPage = await popupTarget.page();
+                if (!popupPage) {
+                    response.appendResponseLine('❌ Failed to get popup page reference.');
+                    return;
+                }
+                // Add popup page to context and select it
+                const pages = await browser.pages();
+                const popupIndex = pages.indexOf(popupPage);
+                if (popupIndex !== -1) {
+                    context.setSelectedPageIdx(popupIndex);
+                    response.appendResponseLine('');
+                    response.appendResponseLine(`✅ Popup opened: ${extensionInfo.name}`);
+                    response.appendResponseLine(`📄 Popup URL: ${popupPage.url()}`);
+                    response.appendResponseLine('');
+                    response.appendResponseLine('💡 You can now use take_snapshot, click, evaluate_script, etc. on the popup');
+                }
+                else {
+                    response.appendResponseLine('⚠️ Popup opened but could not be selected automatically.');
+                }
+            }
+            catch (error) {
+                response.appendResponseLine(`❌ Error: ${error instanceof Error ? error.message : String(error)}`);
             }
         });
     },
 });
+export const closeExtensionPopup = defineTool({
+    name: 'close_extension_popup',
+    description: `Close the currently selected extension popup page.`,
+    annotations: {
+        category: ToolCategories.EXTENSION_DEVELOPMENT,
+        readOnlyHint: false,
+    },
+    schema: {},
+    handler: async (_request, response, context) => {
+        const page = context.getSelectedPage();
+        const url = page.url();
+        if (!url.startsWith('chrome-extension://')) {
+            response.appendResponseLine('❌ Current page is not an extension popup');
+            response.appendResponseLine(`Current URL: ${url}`);
+            return;
+        }
+        try {
+            await page.close();
+            response.appendResponseLine('✅ Extension popup closed');
+        }
+        catch (error) {
+            response.appendResponseLine(`❌ Failed to close popup: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    },
+});
 export const inspectServiceWorker = defineTool({
     name: 'inspect_service_worker',
     description: `Open DevTools for an extension's service worker to debug background scripts.`,

package/package.json

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