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