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

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/package.json

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