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 +363 -188
- package/build/src/browser.js +50 -51
- package/build/src/tools/bookmarks.js +7 -30
- package/package.json +1 -1
- package/build/src/tools/webstore-auto-screenshot.js +0 -159
- package/build/src/tools/webstore-submission.js +0 -332
package/README.md
CHANGED
|
@@ -2,21 +2,42 @@
|
|
|
2
2
|
|
|
3
3
|
[](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
|
-
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
## 🎯 Why This Tool?
|
|
10
14
|
|
|
11
|
-
###
|
|
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
|
-
|
|
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.
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
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
|
-
##
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
154
|
+
</details>
|
|
155
|
+
|
|
156
|
+
---
|
|
157
|
+
|
|
158
|
+
<details>
|
|
159
|
+
<summary>⚙️ Advanced Configuration</summary>
|
|
57
160
|
|
|
58
|
-
|
|
161
|
+
## Auto-load Development Extension
|
|
59
162
|
```json
|
|
60
163
|
{
|
|
61
164
|
"mcpServers": {
|
|
62
165
|
"chrome-devtools-extension": {
|
|
63
166
|
"command": "npx",
|
|
64
|
-
"args": [
|
|
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
|
-
|
|
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
|
-
"--
|
|
201
|
+
"--channel=canary"
|
|
79
202
|
]
|
|
80
203
|
}
|
|
81
204
|
}
|
|
82
205
|
}
|
|
83
206
|
```
|
|
84
207
|
|
|
85
|
-
|
|
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": [
|
|
92
|
-
|
|
93
|
-
"
|
|
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
|
-
|
|
231
|
+
<details>
|
|
232
|
+
<summary>🏗️ Technical Architecture & Implementation</summary>
|
|
104
233
|
|
|
105
|
-
|
|
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
|
-
###
|
|
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
|
-
|
|
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
|
-
|
|
117
|
-
|
|
246
|
+
if (systemProfile) {
|
|
247
|
+
userDataDir = systemProfile.path; // Direct access, no copying
|
|
248
|
+
usingSystemProfile = true;
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
```
|
|
118
252
|
|
|
119
|
-
|
|
120
|
-
-
|
|
121
|
-
-
|
|
122
|
-
-
|
|
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
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
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
|
-
|
|
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
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
-
|
|
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
|
-
|
|
142
|
-
-
|
|
143
|
-
-
|
|
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
|
-
###
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
- **
|
|
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
|
-
|
|
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
|
-
###
|
|
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
|
-
####
|
|
190
|
-
**
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
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
|
-
|
|
215
|
-
|
|
216
|
-
- **
|
|
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
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
- **
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
354
|
+
<details>
|
|
355
|
+
<summary>👨💻 Developer Reference</summary>
|
|
270
356
|
|
|
271
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
373
|
+
- **Storage**: ~50MB for dependencies
|
|
298
374
|
- **Network**: Required for Web Store automation
|
|
299
375
|
|
|
300
|
-
|
|
301
|
-
- **
|
|
302
|
-
- **
|
|
303
|
-
- **
|
|
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
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
- **
|
|
310
|
-
- **
|
|
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
|
|
476
|
+
**Chrome拡張機能開発用のAI支援MCPサーバー**
|
|
477
|
+
|
|
478
|
+
ゼロコンフィグで実環境テストが可能なChrome拡張機能開発ツール
|
|
317
479
|
|
|
318
|
-
##
|
|
480
|
+
## インストール
|
|
319
481
|
|
|
320
|
-
|
|
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
|
-
-
|
|
501
|
+
- 🧩 **拡張機能の開発・デバッグ・リロード**: ライブ開発環境
|
|
502
|
+
- 🏪 **Chrome Web Store への自動申請**: スクリーンショット生成付き
|
|
503
|
+
- 🔧 **実環境でのブラウザテスト**: 既存の拡張機能と共存
|
|
504
|
+
- 🐛 **高度なデバッグ**: サービスワーカー検査、コンソール監視
|
|
505
|
+
- 📸 **ストア用画像の自動生成**: 複数サイズ対応
|
|
339
506
|
|
|
340
|
-
##
|
|
507
|
+
## 使用例
|
|
341
508
|
|
|
342
509
|
```
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
510
|
+
「広告ブロック拡張機能を作成して」
|
|
511
|
+
「拡張機能のエラーを確認して」
|
|
512
|
+
「サービスワーカーをデバッグして」
|
|
513
|
+
「Web Storeに申請して」
|
|
347
514
|
```
|
|
348
515
|
|
|
349
|
-
##
|
|
516
|
+
## なぜこのツールか?
|
|
350
517
|
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
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
|