MCP server for Chrome extension development with Web Store automation. Fork of chrome-devtools-mcp with extension-specific tools.
npm install chrome-devtools-mcp-for-extension
> AI-powered Chrome extension development via MCP
Built for: Claude Code, Cursor, VS Code Copilot, Cline, and other MCP-compatible AI tools
---
``bash`
npx chrome-devtools-mcp-for-extension@latest
For Claude Code (~/.claude.json):
`json`
{
"mcpServers": {
"chrome-devtools-extension": {
"command": "npx",
"args": ["chrome-devtools-mcp-for-extension@latest"]
}
}
}
Restart your AI client and ask: "List all my Chrome extensions"
`json`
{
"mcpServers": {
"chrome-devtools-extension": {
"command": "npx",
"args": [
"chrome-devtools-mcp-for-extension@latest",
"--loadExtensionsDir=/path/to/your/extensions"
]
}
}
}
---
- Extension Development: Load, debug, and hot-reload Chrome extensions
- Browser Automation: Navigate, click, fill forms, take screenshots
- Performance Analysis: Trace recording and insight extraction
- AI Research: Automated ChatGPT/Gemini interactions
- Web Store Submission: Automated screenshot generation and submission
---
| Tool | Description | Key Parameters |
|------|-------------|----------------|
| take_snapshot | Get page structure with element UIDs | - |take_screenshot
| | Capture page or element image | fullPage, uid |click
| | Click element by UID | uid, dblClick |fill
| | Fill input/textarea/select | uid, value |fill_form
| | Fill multiple form elements | elements[] |hover
| | Hover over element | uid |drag
| | Drag element to another | from_uid, to_uid |upload_file
| | Upload file through input | uid, filePath |navigate
| | Go to URL, back, forward | op, url |pages
| | List, select, close tabs | op, pageIdx |wait_for
| | Wait for text to appear | text, timeout |handle_dialog
| | Accept/dismiss dialogs | action |resize_page
| | Change viewport size | width, height |emulate
| | CPU/network throttling | target, throttlingRate |network
| | List/get network requests | op, url |performance
| | Start/stop/analyze traces | op, insightName |evaluate_script
| | Run JavaScript in page | function |list_console_messages
| | Get console output | - |
| Tool | Description | Key Parameters |
|------|-------------|----------------|
| ask_chatgpt_web | Ask ChatGPT via browser | question, createNewChat |ask_gemini_web
| | Ask Gemini via browser | question, createNewChat |
Full documentation: docs/reference/tools.md
---
`json`
{
"env": {
"MCP_DISABLE_WEB_LLM": "true"
}
}
`json`
{
"env": {
"MCP_PLUGINS": "./my-plugin.js,@org/another-plugin"
}
}
Plugin interface:
`typescript`
export default {
id: 'my-plugin',
name: 'My Custom Plugin',
version: '1.0.0',
async register(ctx) {
ctx.registry.register({
name: 'my_tool',
description: 'Does something useful',
schema: { / zod schema / },
async handler(input, response, context) { / implementation / },
});
},
};
---
`bash`
git clone https://github.com/usedhonda/chrome-devtools-mcp.git
cd chrome-devtools-mcp
npm install && npm run build
Configure ~/.claude.json to use local version:
`json`
{
"mcpServers": {
"chrome-devtools-extension": {
"command": "node",
"args": ["/absolute/path/to/chrome-devtools-mcp/scripts/cli.mjs"]
}
}
}
`json`
{
"mcpServers": {
"chrome-devtools-extension": {
"command": "node",
"args": ["/absolute/path/to/chrome-devtools-mcp/scripts/mcp-wrapper.mjs"],
"cwd": "/absolute/path/to/chrome-devtools-mcp",
"env": { "MCP_ENV": "development" }
}
}
}
Benefits: Auto-rebuild on file changes, 2-5 second feedback loop.
See also: docs/dev/hot-reload.md
`bash`
npm run build # Build TypeScript
npm run typecheck # Type check
npm test # Run tests
npm run format # Format code
``
chrome-devtools-mcp/
├── src/
│ ├── tools/ # MCP tool definitions
│ ├── plugin-api.ts # Plugin architecture
│ ├── browser.ts # Browser management
│ └── main.ts # Entry point
├── scripts/
│ ├── cli.mjs # Production entry
│ └── mcp-wrapper.mjs # Development wrapper
└── docs/ # Documentation
---
| Guide | Description |
|-------|-------------|
| Setup Guide | Detailed MCP configuration |
| Workflows | Common usage patterns |
| Troubleshooting | Problem solving |
| Tools Reference | Full tool documentation |
| Hot-Reload Setup | Developer workflow |
---
is at extension root
- Use absolute paths in --loadExtensionsDir$3
`bash
npx clear-npx-cache && npx chrome-devtools-mcp-for-extension@latest
``More: docs/user/troubleshooting.md
---
Fork of Chrome DevTools MCP by Google LLC.
Additions: Extension development tools, Web Store automation, ChatGPT/Gemini integration, hot-reload workflow.
---
Apache-2.0
Version: 0.26.1
Repository: https://github.com/usedhonda/chrome-devtools-mcp