chrome-devtools-mcp-for-extension 0.6.2 → 0.6.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -2,21 +2,42 @@
2
2
 
3
3
  [![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)
4
4
 
5
+ **Zero-config Chrome extension testing with your real browser environment**
6
+
5
7
  AI-powered Chrome extension development with automated testing, debugging, and Web Store submission.
6
8
 
7
9
  **Built for:** Claude Code, Cursor, VS Code Copilot, Cline, and other MCP-compatible AI tools
8
10
 
9
- ## Quick Start
11
+ ---
12
+
13
+ ## 🎯 Why This Tool?
10
14
 
11
- ### 1. Add to your MCP client
15
+ ### The Problem
16
+ - **Puppeteer/Playwright**: Disable extensions by default, require complex configuration
17
+ - **Traditional Testing**: Hours of setup, maintaining separate test profiles
18
+ - **Extension Development**: Can't test in real user environments
19
+
20
+ ### The Solution
21
+ - ✅ **Zero setup**: Uses your system Chrome profile automatically
22
+ - ✅ **Real environment**: Tests with your actual extensions and settings
23
+ - ✅ **No copying**: Direct profile access, instant sync
24
+ - ✅ **Always enabled**: Extensions work automatically, no configuration needed
25
+
26
+ ---
27
+
28
+ ## 🚀 Quick Start
29
+
30
+ ### 1. Install (30 seconds)
12
31
 
13
32
  **Claude Code users (recommended):**
14
33
  ```bash
15
- # Install globally for all projects
16
34
  claude mcp add --scope user chrome-devtools-extension npx chrome-devtools-mcp-for-extension@latest
17
35
  ```
18
36
 
19
- **Manual configuration:**
37
+ <summary>Other MCP clients (Cursor, VS Code Copilot, Cline)</summary>
38
+
39
+ Add to your MCP configuration file:
40
+
20
41
  ```json
21
42
  {
22
43
  "mcpServers": {
@@ -28,16 +49,19 @@ claude mcp add --scope user chrome-devtools-extension npx chrome-devtools-mcp-fo
28
49
  }
29
50
  ```
30
51
 
52
+
31
53
  ### 2. Restart your AI client
32
54
 
33
- ### 3. Try it out
34
- ```
35
- "Create a Chrome extension that blocks ads"
36
- "List all my Chrome extensions"
37
- "Submit my extension to Chrome Web Store"
38
- ```
55
+ ### 3. Verify installation
56
+ Ask your AI: **"List all my Chrome extensions"**
57
+ You should see your installed extensions listed
58
+
59
+ ### 4. Start developing
60
+ See [Common Workflows](#-common-workflows) below for typical use cases
61
+
62
+ ---
39
63
 
40
- ## What You Can Do
64
+ ## Core Capabilities
41
65
 
42
66
  - 🧩 **Extension Development**: Load, debug, and reload Chrome extensions during development
43
67
  - 🏪 **Automated Web Store Submission**: Complete publishing workflow with form filling and screenshots
@@ -45,29 +69,128 @@ claude mcp add --scope user chrome-devtools-extension npx chrome-devtools-mcp-fo
45
69
  - 🐛 **Advanced Debugging**: Service worker inspection, console monitoring, error detection
46
70
  - 📸 **Screenshot Generation**: Auto-create store listing images in all required formats
47
71
 
48
- ## Configuration Options
72
+ ---
73
+
74
+ ## 📚 Common Workflows
75
+
76
+ ### Create & Test Extension
77
+ ```
78
+ 1. "Create a Chrome extension that blocks ads on YouTube"
79
+ 2. "List extensions to verify it loaded"
80
+ 3. "Test the extension on youtube.com"
81
+ 4. "Show any errors from the extension"
82
+ ```
49
83
 
84
+ ### Debug Extension Issues
85
+ ```
86
+ 1. "List extensions and show any errors"
87
+ 2. "Inspect service worker for my-ad-blocker"
88
+ 3. "Show console messages from the extension"
89
+ 4. "Reload the extension with latest changes"
90
+ ```
91
+
92
+ ### Publish to Web Store
93
+ ```
94
+ 1. "Generate screenshots for my extension"
95
+ 2. "Validate my manifest for Web Store compliance"
96
+ 3. "Submit my extension to Chrome Web Store"
97
+ ```
98
+
99
+ ### Performance Testing
100
+ ```
101
+ 1. "Start performance trace on current page"
102
+ 2. "Test the extension's impact on page load"
103
+ 3. "Show performance insights"
104
+ ```
105
+
106
+ ---
107
+
108
+ ## 🛠️ Extension Development Tools
109
+
110
+ Quick reference for the 3 core extension tools:
111
+
112
+ | Tool | Purpose | Example Command |
113
+ |------|---------|-----------------|
114
+ | `list_extensions` | View all extensions with status | "List all my Chrome extensions" |
115
+ | `reload_extension` | Hot-reload during development | "Reload my-extension" |
116
+ | `inspect_service_worker` | Debug background scripts | "Debug service worker for my-extension" |
117
+
118
+
119
+ ---
120
+
121
+ ## 📊 How It Compares
122
+
123
+ | Feature | This Tool | Puppeteer/Playwright | Original chrome-devtools-mcp |
124
+ |---------|-----------|----------------------|------------------------------|
125
+ | Extension Support | ✅ Always enabled | ❌ Disabled by default | ⚠️ Manual config required |
126
+ | Setup Required | ❌ None | ✅ Complex config files | ✅ Multiple flags needed |
127
+ | Real User Profile | ✅ Direct access | ❌ Temporary profiles | ⚠️ Optional |
128
+ | Profile Copying | ❌ No copying needed | ⚠️ Manual setup | ⚠️ Manual setup |
129
+ | Web Store Automation | ✅ Built-in | ❌ None | ❌ None |
130
+ | Extension Debugging | ✅ Service worker + console | ⚠️ Limited | ❌ None |
131
+
132
+ ---
50
133
  <details>
51
- <summary>Manual MCP Configuration</summary>
134
+ <summary>📖 Detailed Tool Documentation</summary>
135
+
136
+ ### `list_extensions` - Extension Inventory
137
+ **Purpose**: Comprehensive extension status monitoring
138
+ **Technical**: Accesses `chrome://extensions/` via shadow DOM manipulation
139
+ **Output**: Extension metadata, enabled/disabled status, version, error detection
140
+ **Use Case**: "List all my Chrome extensions" → Shows development and installed extensions
141
+
142
+ ### `reload_extension` - Development Hot-Reload
143
+ **Purpose**: Streamlined extension development workflow
144
+ **Technical**: Finds extensions by name/partial match, triggers reload via Chrome extension API
145
+ **Output**: Confirmation of reload success/failure with error details
146
+ **Use Case**: "Reload my ad-blocker extension" → Instantly applies code changes
147
+
148
+ ### `inspect_service_worker` - Debug Integration
149
+ **Purpose**: Deep debugging of extension background processes
150
+ **Technical**: Opens DevTools for service workers, supports Manifest V2/V3 architectures
151
+ **Output**: Direct DevTools access to extension console, network, sources
152
+ **Use Case**: "Debug why my content script isn't working" → Opens debugging interface
52
153
 
53
- **Configuration file locations:**
54
- - **Cursor**: `~/.cursor/extensions_config.json`
55
- - **VS Code Copilot**: `.vscode/settings.json`
56
- - **Cline**: Follow Cline's MCP setup guide
154
+ </details>
155
+
156
+ ---
157
+
158
+ <details>
159
+ <summary>⚙️ Advanced Configuration</summary>
57
160
 
58
- **Basic configuration:**
161
+ ## Auto-load Development Extension
59
162
  ```json
60
163
  {
61
164
  "mcpServers": {
62
165
  "chrome-devtools-extension": {
63
166
  "command": "npx",
64
- "args": ["chrome-devtools-mcp-for-extension@latest"]
167
+ "args": [
168
+ "chrome-devtools-mcp-for-extension@latest",
169
+ "--loadExtension=/path/to/your/extension"
170
+ ]
171
+ }
172
+ }
173
+ }
174
+ ```
175
+
176
+ ⚠️ **Note**: `--loadExtension` flag may be deprecated in Chrome 137+. Using system profile (default) is recommended.
177
+
178
+ ## Debug Mode
179
+ ```json
180
+ {
181
+ "mcpServers": {
182
+ "chrome-devtools-extension": {
183
+ "command": "npx",
184
+ "args": ["chrome-devtools-mcp-for-extension@latest"],
185
+ "env": {
186
+ "DEBUG": "mcp:*"
187
+ }
65
188
  }
66
189
  }
67
190
  }
68
191
  ```
69
192
 
70
- **With extension auto-loading:**
193
+ ## Custom Chrome Channel
71
194
  ```json
72
195
  {
73
196
  "mcpServers": {
@@ -75,151 +198,126 @@ claude mcp add --scope user chrome-devtools-extension npx chrome-devtools-mcp-fo
75
198
  "command": "npx",
76
199
  "args": [
77
200
  "chrome-devtools-mcp-for-extension@latest",
78
- "--loadExtension=/path/to/your/extension"
201
+ "--channel=canary"
79
202
  ]
80
203
  }
81
204
  }
82
205
  }
83
206
  ```
84
207
 
85
- **Debug mode:**
208
+ Options: `stable` (default), `beta`, `dev`, `canary`
209
+
210
+ ## Isolated Profile Mode
86
211
  ```json
87
212
  {
88
213
  "mcpServers": {
89
214
  "chrome-devtools-extension": {
90
215
  "command": "npx",
91
- "args": ["chrome-devtools-mcp-for-extension@latest"],
92
- "env": {
93
- "DEBUG": "mcp:*"
94
- }
216
+ "args": [
217
+ "chrome-devtools-mcp-for-extension@latest",
218
+ "--isolated"
219
+ ]
95
220
  }
96
221
  }
97
222
  }
98
223
  ```
224
+
225
+ Forces temporary profile instead of system profile.
226
+
99
227
  </details>
100
228
 
101
229
  ---
102
230
 
103
- ## Technical Details
231
+ <details>
232
+ <summary>🏗️ Technical Architecture & Implementation</summary>
104
233
 
105
- ### What Makes This Different
234
+ ## What Makes This Different
106
235
 
107
236
  This fork significantly restructures the original Chrome DevTools MCP for extension-focused development:
108
237
 
109
- ### Added Extension-Specific Tools
110
- - **Extension Management**: 3 specialized tools for extension development workflow
111
- - **Web Store Automation**: 2 tools for automated submission and screenshot generation
112
- - **Focus**: Extension-specific operations added to comprehensive browser automation
238
+ ### System Profile Architecture (v0.6.0+)
113
239
 
114
- ### Chrome Security & Technical Challenges Solved
240
+ **Zero-Config Design:**
241
+ ```typescript
242
+ // Automatically detects and uses system Chrome profile
243
+ if (!isolated && !userDataDir) {
244
+ const systemProfile = detectSystemChromeProfile(channel) || detectAnySystemChromeProfile();
115
245
 
116
- #### Extension Loading Security Restrictions
117
- Chrome's security model makes automated extension loading complex for legitimate development:
246
+ if (systemProfile) {
247
+ userDataDir = systemProfile.path; // Direct access, no copying
248
+ usingSystemProfile = true;
249
+ }
250
+ }
251
+ ```
118
252
 
119
- - **Chrome 137+ Policy Changes**: Google disabled `--load-extension` by default in automation contexts
120
- - **Solution**: Added `--disable-features=DisableLoadExtensionCommandLineSwitch` flag bypass
121
- - **Automation Detection**: Chrome blocks many operations when detecting automated control
122
- - **Solution**: `--disable-blink-features=AutomationControlled` for real-world testing scenarios
253
+ **Profile Paths:**
254
+ - macOS: `~/Library/Application Support/Google/Chrome`
255
+ - Windows: `%LOCALAPPDATA%\Google\Chrome\User Data`
256
+ - Linux: `~/.config/google-chrome`
123
257
 
124
- #### Puppeteer Integration Challenges
125
- - **Default Args Conflict**: Puppeteer's `--disable-extensions` conflicts with extension loading
126
- - **Solution**: Selective `ignoreDefaultArgs` removal only when extensions are present
127
- - **Profile Management**: System profile access vs. temporary profile isolation
128
- - **Solution**: Automatic fallback to temporary profiles when system profile conflicts occur
258
+ **Detection Priority:**
259
+ 1. Specified channel (via `--channel` flag)
260
+ 2. Fallback: stable beta dev canary
261
+ 3. Last resort: Creates temporary isolated profile
129
262
 
130
- #### Manifest Discovery & Validation
131
- - **Build System Variations**: Extensions may be in `/dist`, `/build`, `/extension` subdirectories
132
- - **Solution**: Intelligent manifest.json discovery across common build patterns
133
- - **Manifest V3 Compliance**: Strict validation for Web Store compatibility
134
- - **Solution**: Comprehensive validation with actionable security warnings
263
+ ### Extension Loading Architecture
135
264
 
136
- ### New Automation Tools
137
- - `webstore-submission.ts`: Full Chrome Web Store submission automation
138
- - `webstore-auto-screenshot.ts`: Multi-format screenshot generation for store listings
139
- - Enhanced manifest validation with Web Store compliance checking
265
+ **Unconditional Extension Enablement (v0.6.1+):**
266
+ ```typescript
267
+ // Always remove --disable-extensions flag
268
+ ignoreDefaultArgs: ['--disable-extensions', '--enable-automation']
269
+ ```
140
270
 
141
- ### Added Dependencies
142
- - **archiver**: ZIP package creation for extension submission
143
- - **Enhanced manifest parsing**: Validates Manifest V3 compliance and permissions
271
+ **Why this design:**
272
+ - Puppeteer's default `--disable-extensions` conflicts with extension development
273
+ - Previous versions used conditional logic (buggy, removed in v0.6.1)
274
+ - Current approach: **Always enable all extensions** for predictable behavior
144
275
 
145
- ### MCP Server Coexistence
146
- - **Server Name**: `chrome-devtools-extension` (vs original `chrome-devtools`)
147
- - **Package Name**: `chrome-devtools-mcp-for-extension`
148
- - **Purpose**: Allows both servers to run simultaneously for different use cases
276
+ ### Chrome Security Challenges Solved
277
+
278
+ #### Chrome 137+ Breaking Changes
279
+ - **Problem**: Chrome 137+ disabled `--load-extension` in automation contexts
280
+ - **Solution**: Added `--disable-features=DisableLoadExtensionCommandLineSwitch` bypass
281
+ - **Impact**: Development extensions can still be loaded via CLI flags
282
+
283
+ #### Automation Detection Bypass
284
+ - **Problem**: Chrome blocks many operations when detecting automated control
285
+ - **Solution**: `--disable-blink-features=AutomationControlled` for real-world testing
286
+ - **Use Case**: Google login, OAuth flows, Web Store submission
149
287
 
150
- ## Implementation Details
288
+ #### Profile Management Strategy
289
+ - **Default**: Direct system profile access (no copying, instant sync)
290
+ - **Fallback**: Temporary profile with bookmarks copy (when Chrome is already running)
291
+ - **Override**: `--isolated` flag for completely separate profile
292
+
293
+ ### Architecture Diagram
151
294
 
152
- ### Architecture
153
295
  ```
154
296
  Extension Development Flow:
155
297
  ┌─────────────────┐ ┌──────────────────┐ ┌─────────────────┐
156
298
  │ AI Assistant │───▶│ MCP Server │───▶│ Chrome Browser │
157
299
  │ (Claude/Cursor) │ │ (Extension Tools)│ │ + Extensions │
158
300
  └─────────────────┘ └──────────────────┘ └─────────────────┘
159
-
160
-
161
- ┌──────────────────┐
162
- │ Web Store │
163
- │ Automation │
164
- └──────────────────┘
301
+
302
+
303
+ ┌──────────────────┐ ┌─────────────────┐
304
+ │ Web Store │ │ System Profile │
305
+ │ Automation │ │ (Direct Access) │
306
+ └──────────────────┘ └─────────────────┘
165
307
  ```
166
308
 
167
- ### Extension Management Tools (3 Tools)
168
-
169
- #### 1. `list_extensions` - Extension Inventory
170
- - **Purpose**: Comprehensive extension status monitoring
171
- - **Technical**: Accesses `chrome://extensions/` via shadow DOM manipulation
172
- - **Output**: Extension metadata, enabled/disabled status, version, error detection
173
- - **Use Case**: "List all my Chrome extensions" → Shows development and installed extensions
174
-
175
- #### 2. `reload_extension` - Development Hot-Reload
176
- - **Purpose**: Streamlined extension development workflow
177
- - **Technical**: Finds extensions by name/partial match, triggers reload via Chrome extension API
178
- - **Output**: Confirmation of reload success/failure with error details
179
- - **Use Case**: "Reload my ad-blocker extension" → Instantly applies code changes
180
-
181
- #### 3. `inspect_service_worker` - Debug Integration
182
- - **Purpose**: Deep debugging of extension background processes
183
- - **Technical**: Opens DevTools for service workers, supports Manifest V2/V3 architectures
184
- - **Output**: Direct DevTools access to extension console, network, sources
185
- - **Use Case**: "Debug why my content script isn't working" → Opens debugging interface
186
-
187
- ### Automation Tools
309
+ ### Web Store Automation Tools
188
310
 
189
- #### Web Store Submission (`submit_to_webstore`)
190
- **Comprehensive submission automation including:**
191
-
192
- 1. **Manifest Validation**
193
- - Manifest V3 compliance checking
194
- - Permission validation and security warnings
195
- - File structure verification
196
-
197
- 2. **Package Creation**
198
- - Automated ZIP generation with optimal compression
199
- - Exclusion of development files (`node_modules`, `.git`, tests)
200
- - Size optimization for Web Store limits
201
-
202
- 3. **Store Listing Generation**
203
- - Auto-generated descriptions based on manifest permissions
204
- - Category suggestions based on functionality
205
- - SEO-optimized content structure
206
-
207
- 4. **Browser Automation**
208
- - Automated login flow handling
209
- - Form field population from manifest data
210
- - File upload automation
211
- - Error detection and reporting
311
+ #### Submission Workflow (`submit_to_webstore`)
312
+ 1. **Manifest Validation**: Manifest V3 compliance, permission security analysis
313
+ 2. **Package Creation**: ZIP generation with optimized compression, development file exclusion
314
+ 3. **Store Listing**: Auto-generated descriptions based on manifest permissions
315
+ 4. **Browser Automation**: Login flow, form population, file upload, error detection
212
316
 
213
317
  #### Screenshot Generation (`generate_extension_screenshots`)
214
- **Multi-format screenshot creation:**
215
-
216
- - **Primary Screenshots**: 1280x800 (Web Store requirement)
217
- - **Promotional Tiles**:
218
- - Small: 440x280
219
- - Large: 920x680
220
- - Marquee: 1400x560
221
- - **Automated Capture**: Extension popup, options page, in-context usage
222
- - **Smart Navigation**: Tests extension across multiple websites
318
+ - **Primary**: 1280x800 (Web Store requirement)
319
+ - **Promotional Tiles**: Small (440x280), Large (920x680), Marquee (1400x560)
320
+ - **Smart Capture**: Extension popup, options page, in-context usage
223
321
 
224
322
  ### Manifest Validation System
225
323
 
@@ -235,90 +333,158 @@ interface ManifestValidation {
235
333
  **Validation Features:**
236
334
  - Manifest V3 compliance enforcement
237
335
  - Permission analysis with security implications
238
- - Icon size recommendations
336
+ - Icon size recommendations (16x16, 48x48, 128x128)
239
337
  - Service worker file verification
240
338
  - Host permission optimization suggestions
241
339
 
340
+ ### Added Dependencies
341
+ - **archiver** (7.0.1): ZIP package creation for extension submission
342
+ - **puppeteer-core** (24.22.3): Chrome automation with extension support
343
+ - **@modelcontextprotocol/sdk** (1.18.1): MCP server implementation
242
344
 
243
- ## Features
244
-
245
- ### 🧩 Extension Development
246
- - **Live Development**: Load and reload extensions during development
247
- - **Debug Integration**: Service worker and background script debugging
248
- - **Manifest Analysis**: V3 compliance checking and optimization
249
- - **Error Detection**: Real-time extension error monitoring
250
-
251
- ### 🏪 Web Store Automation
252
- - **Automated Submission**: End-to-end publishing workflow
253
- - **Screenshot Generation**: Multi-size promotional images
254
- - **Listing Optimization**: AI-generated store descriptions
255
- - **Compliance Checking**: Web Store policy validation
345
+ ### MCP Server Coexistence
346
+ - **Server Name**: `chrome-devtools-extension` (vs original `chrome-devtools`)
347
+ - **Package Name**: `chrome-devtools-mcp-for-extension`
348
+ - **Purpose**: Allows both servers to run simultaneously for different use cases
256
349
 
257
- ### 🔧 Browser Control
258
- - **Extension-Aware Navigation**: Understands extension contexts
259
- - **Permission Testing**: Validate extension permissions in real scenarios
260
- - **Cross-Origin Testing**: Test extensions across different domains
261
- - **Performance Analysis**: Extension impact measurement
350
+ </details>
262
351
 
263
- ### 🔍 Advanced Debugging
264
- - **Console Integration**: Extension console log aggregation
265
- - **Network Monitoring**: Extension-specific request tracking
266
- - **Storage Analysis**: Extension storage (local, sync, session) inspection
267
- - **Message Passing**: Inter-component communication debugging
352
+ ---
268
353
 
269
- ## Developer Information
354
+ <details>
355
+ <summary>👨‍💻 Developer Reference</summary>
270
356
 
271
- ### Supported Extension Types
357
+ ## Supported Extension Types
272
358
  - **Manifest V3**: Full support (recommended)
273
359
  - **Service Workers**: Background script debugging
274
360
  - **Content Scripts**: Page interaction testing
275
361
  - **Popup Extensions**: UI testing and screenshots
276
362
  - **Options Pages**: Settings interface validation
277
363
 
278
- ### Browser Compatibility
364
+ ## Browser Compatibility
279
365
  - **Chrome**: Primary target (latest stable)
280
366
  - **Chrome Canary**: Development testing
281
367
  - **Chromium**: Community builds
282
368
  - **Edge**: Chromium-based versions
283
369
 
284
- ### Development Workflow Integration
285
- ```bash
286
- # Typical AI-assisted development flow:
287
- 1. "Create a Chrome extension that blocks ads"
288
- 2. "Test the extension on youtube.com"
289
- 3. "Debug why the content script isn't working"
290
- 4. "Generate screenshots for the Web Store"
291
- 5. "Submit the extension to Chrome Web Store"
292
- ```
293
-
294
- ### Technical Requirements
370
+ ## Technical Requirements
295
371
  - **Node.js**: 22.12.0+ (for latest Chrome DevTools Protocol)
296
372
  - **Chrome**: Any version with extension support
297
- - **Storage**: ~50MB for dependencies and Chrome profile
373
+ - **Storage**: ~50MB for dependencies
298
374
  - **Network**: Required for Web Store automation
299
375
 
300
- ### Extension Loading Capabilities
301
- - **Development Extensions**: Unpacked extensions from filesystem
302
- - **Dynamic Loading**: Runtime extension installation
303
- - **Hot Reloading**: Instant updates during development
376
+ ## Extension Loading Capabilities
377
+ - **Startup Loading**: Extensions loaded at Chrome startup via `--loadExtension`
378
+ - **System Extensions**: Auto-loads all extensions from Chrome profile (default)
379
+ - **Manual Reloading**: Update extensions via `reload_extension` MCP tool
304
380
  - **Multi-Extension**: Support for multiple extensions simultaneously
305
381
 
306
- ### Security Considerations
307
- - **Isolated Profiles**: Optional temporary Chrome profiles
308
- - **Permission Scoping**: Extension permissions are sandboxed
309
- - **Secure Storage**: No sensitive data persistence
310
- - **Web Store Auth**: Uses standard Google OAuth flow
382
+ ⚠️ **Note**: Runtime extension installation not supported. Extensions must be loaded at startup.
383
+
384
+ ## Security & Privacy Considerations
385
+ - **System Profile Access**: Uses system Chrome profile by default (includes cookies, sessions, history, bookmarks)
386
+ - **Profile Isolation**: Use `--isolated` flag for temporary profile without personal data
387
+ - **Extension Sandboxing**: Extension permissions are sandboxed per Chrome security model
388
+ - **Web Store Auth**: Uses standard Google OAuth flow (no credentials stored)
389
+
390
+ ⚠️ **Warning**: When using system profile, the MCP server has access to all data in your Chrome profile. Use `--isolated` mode for testing sensitive operations.
391
+
392
+ </details>
393
+
394
+ ---
395
+
396
+ <details>
397
+ <summary>❓ Troubleshooting</summary>
398
+
399
+ ## Extension Not Loading
400
+
401
+ **Check manifest.json:**
402
+ ```
403
+ "List extensions and show any errors"
404
+ ```
405
+
406
+ **Verify extension is in correct directory:**
407
+ - Manifest must be at root: `/your-extension/manifest.json`
408
+ - Not: `/your-extension/dist/manifest.json`
409
+
410
+ **Solution:**
411
+ ```json
412
+ // Use --loadExtension with correct path
413
+ "args": ["chrome-devtools-mcp-for-extension@latest", "--loadExtension=/correct/path"]
414
+ ```
415
+
416
+ ## Service Worker Not Inspecting
417
+
418
+ **Extension may not be active:**
419
+ ```
420
+ "List extensions" // Check if enabled
421
+ "Reload my-extension" // Restart extension
422
+ ```
423
+
424
+ **DevTools window not appearing:**
425
+ - Service worker only runs when needed
426
+ - Trigger extension action first (click popup, run content script)
427
+
428
+ ## Web Store Submission Fails
429
+
430
+ **Manifest V3 compliance:**
431
+ ```
432
+ "Validate my manifest for Web Store compliance"
433
+ ```
434
+
435
+ **Common issues:**
436
+ - Missing required icons (16x16, 48x48, 128x128)
437
+ - Invalid permissions (host_permissions format)
438
+ - Service worker not specified
439
+
440
+ ## Extensions Disabled After Chrome Update
441
+
442
+ **Chrome 137+ breaking change:**
443
+ - `--load-extension` may be restricted in newer Chrome versions
444
+ - **Solution**: Use system profile (default) instead of `--loadExtension` flag
445
+
446
+ ## Profile Lock Conflicts
447
+
448
+ **Error: "Chrome is already using this profile"**
449
+
450
+ This error occurs when Chrome is already running with the system profile. The MCP server detects profile lock files and fails immediately to prevent conflicts.
451
+
452
+ **Solution:**
453
+ 1. **Close all Chrome windows** - The simplest solution is to completely quit Chrome before starting the MCP server
454
+ 2. **Use isolated profile** - Run with `--isolated` flag to use a temporary profile:
455
+ ```bash
456
+ npx chrome-devtools-mcp-for-extension@latest --isolated
457
+ ```
458
+ 3. **Use custom profile** - Specify a custom profile directory:
459
+ ```bash
460
+ npx chrome-devtools-mcp-for-extension@latest --userDataDir=/path/to/custom/profile
461
+ ```
462
+
463
+ **Why This Happens:**
464
+ - Chrome creates lock files (`SingletonLock`, `SingletonCookie`, `SingletonSocket`) when a profile is in use
465
+ - Multiple Chrome instances cannot share the same profile simultaneously
466
+ - The MCP server now detects these locks early and fails fast with a clear error message
467
+
468
+ **Note:** Previous versions silently fell back to a temporary profile, which caused confusion. Version 0.6.4+ fails immediately with a clear error instead.
469
+
470
+ </details>
311
471
 
312
472
  ---
313
473
 
314
474
  # 日本語 / Japanese
315
475
 
316
- **Chrome 拡張機能開発用の MCP サーバー**
476
+ **Chrome拡張機能開発用のAI支援MCPサーバー**
477
+
478
+ ゼロコンフィグで実環境テストが可能なChrome拡張機能開発ツール
317
479
 
318
- ## クイックスタート
480
+ ## インストール
319
481
 
320
- MCP クライアントに設定を追加:
482
+ **Claude Code ユーザー:**
483
+ ```bash
484
+ claude mcp add --scope user chrome-devtools-extension npx chrome-devtools-mcp-for-extension@latest
485
+ ```
321
486
 
487
+ **その他のMCPクライアント:**
322
488
  ```json
323
489
  {
324
490
  "mcpServers": {
@@ -330,26 +496,35 @@ MCP クライアントに設定を追加:
330
496
  }
331
497
  ```
332
498
 
333
- ## 機能
499
+ ## 主な機能
334
500
 
335
- - **拡張機能開発**: ロード、デバッグ、リロード
336
- - **Web Store 自動申請**: スクリーンショット生成付き
337
- - **ブラウザ制御**: ナビゲーション、フォーム操作、スクリーンショット
338
- - **パフォーマンス分析**: Chrome DevTools 統合
501
+ - 🧩 **拡張機能の開発・デバッグ・リロード**: ライブ開発環境
502
+ - 🏪 **Chrome Web Store への自動申請**: スクリーンショット生成付き
503
+ - 🔧 **実環境でのブラウザテスト**: 既存の拡張機能と共存
504
+ - 🐛 **高度なデバッグ**: サービスワーカー検査、コンソール監視
505
+ - 📸 **ストア用画像の自動生成**: 複数サイズ対応
339
506
 
340
- ## Use Cases
507
+ ## 使用例
341
508
 
342
509
  ```
343
- "Create a Chrome extension that blocks ads"
344
- "Debug why my content script isn't working"
345
- "Submit my extension to Chrome Web Store"
346
- "Generate screenshots for store listing"
510
+ 「広告ブロック拡張機能を作成して」
511
+ 「拡張機能のエラーを確認して」
512
+ 「サービスワーカーをデバッグして」
513
+ 「Web Storeに申請して」
347
514
  ```
348
515
 
349
- ## 使用例
516
+ ## なぜこのツールか?
350
517
 
351
- ```
352
- "広告ブロック拡張機能を作成して"
353
- "コンテンツスクリプトが動かない原因をデバッグして"
354
- "Web Store に拡張機能を申請して"
355
- ```
518
+ - ✅ **設定不要**: システムのChromeプロファイルを自動使用
519
+ - ✅ **実環境テスト**: 実際の拡張機能・設定でテスト可能
520
+ - ✅ **コピー不要**: プロファイルの直接アクセス、即座に同期
521
+ - **常時有効**: 拡張機能が自動的に有効化
522
+
523
+ 詳細は英語セクションを参照してください。
524
+
525
+ ---
526
+
527
+ **Version**: 0.6.2
528
+ **Repository**: https://github.com/usedhonda/chrome-devtools-mcp
529
+ **License**: Apache-2.0
530
+ **Original**: Chrome DevTools MCP by Google LLC