Content
# WebMCP DevTools
A Chrome extension for inspecting, testing, and monitoring [WebMCP]() tools registered via `navigator.modelContext`.
[中文](#webmcp-devtools) | English
## What is WebMCP?
**Web Model Context Protocol (WebMCP)** is a browser-native API that allows web pages to register tools for AI models through `navigator.modelContext`. WebMCP DevTools gives you a powerful side panel to inspect and interact with these tools in real-time.
## Features
| Feature | Description |
|------|------|
| **Tool Detection** | Automatically detects all WebMCP tools registered on the current page |
| **Declarative WebMCP** | Automatically recognizes declarative tools via `<form toolname="...">` |
| **Cross-Tab Aggregation** | Unified management and display of tools across all tabs |
| **MCP Bridge** | Bridges browser tools to AI clients like Cursor / Claude Desktop via WebSocket |
| **AI Assistant** | Built-in AI panel supporting Gemini / OpenAI / Claude / DeepSeek, with streaming output and Markdown rendering |
| **Schema Visualization** | View input Schema in a collapsible tree structure, supporting `$ref` / `allOf` / `oneOf` / `anyOf` |
| **Form Generation** | Automatically generates interactive forms based on JSON Schema |
| **Tool Execution** | Execute tools directly from the side panel and view results instantly |
| **Performance Statistics** | Execution success rate, average/min/max time statistics |
| **Unified Execution Records** | Mark source (manual / AI panel / MCP Bridge), unified display across sources |
| **Event Timeline** | Real-time tracking of tool registration, deregistration, and changes |
| **Execution History** | View recent execution input/output details |
| **Snapshots & Comparison** | Save tool definition snapshots and compare changes |
| **Export** | Supports export in JSON, Markdown, Postman Collection, and TypeScript code |
| **Internationalization** | Bilingual support (Chinese and English), one-click switching |
| **Themes** | Supports system, light, and dark themes |
## MCP Bridge Integration
WebMCP DevTools can bridge tools in the browser to external AI clients (like Cursor, Claude Desktop).
### Install MCP Server
```bash
npm install -g webmcp-devtools-server
```
### Cursor Configuration
Add the following to `.cursor/mcp.json`:
```json
{
"mcpServers": {
"webmcp-devtools": {
"command": "npx",
"args": ["-y", "webmcp-devtools-server"]
}
}
}
```
### Claude Desktop Configuration
Add the following to `claude_desktop_config.json`:
```json
{
"mcpServers": {
"webmcp-devtools": {
"command": "npx",
"args": ["-y", "webmcp-devtools-server"]
}
}
}
```
### Usage
1. Launch the AI client (Cursor / Claude Desktop)
2. Open a page with WebMCP tools in the browser
3. Click the **Bridge** button in the extension side panel to connect
4. The AI client can discover and call browser tools via `webmcp_list_tools` and `webmcp_call_tool`
## Installation
### From Chrome Web Store
Search for **WebMCP DevTools** in the [Chrome Web Store](https://chromewebstore.google.com/) and install.
### From Source
**Prerequisites:** Node.js 18+, pnpm
```bash
# Clone repository
git clone https://github.com/2019-02-18/WebMCP-DevTools.git
cd WebMCP-DevTools
# Install dependencies
pnpm install
# Build production version
pnpm build
```
Load the extension in Chrome:
1. Open `chrome://extensions/`
2. Enable **Developer mode** in the top right corner
3. Click **Load unpacked**
4. Select the `.output/chrome-mv3` folder
### Enable WebMCP API
Before using the extension, you need to enable the WebMCP flag in Chrome:
1. Open `chrome://flags/#enable-webmcp-testing`
2. Set the flag to **Enabled**
3. Restart Chrome
## Usage
1. Click the **WebMCP DevTools** icon in the Chrome toolbar to open the side panel
2. Navigate to any page with registered WebMCP tools
3. The **Tools** tab lists all detected tools and their Schema
4. Click a tool card to switch to the **Execute** tab
5. Fill in parameters (form mode or raw JSON) and click **Execute**
6. View real-time registration events in the **Timeline** tab
7. Use **Snapshots** to save and compare tool definitions
### Local Testing
The project includes a test page `test/demo.html` with simulated tools. Open it using a local server (like VS Code Live Server) for testing without a real WebMCP page.
## Project Structure
```
├── entrypoints/
│ ├── background.ts # Service Worker — tab management, message routing
│ ├── content.ts # Content Script (ISOLATED) — bridges with side panel
│ ├── injected.content.ts # Content Script (MAIN) — intercepts modelContext
│ └── sidepanel/
│ ├── index.html # Side panel HTML shell
│ ├── main.ts # Side panel logic — rendering, interaction
│ └── styles.css # All styles, themes, components
├── lib/
│ ├── types.ts # Shared TypeScript interfaces
│ ├── i18n.ts # Internationalization (Chinese / English)
│ ├── icons.ts # Lucide-style SVG icon definitions
│ ├── theme.ts # Theme switching helpers
│ ├── storage.ts # chrome.storage.local utility functions
│ ├── export.ts # Export: JSON, Markdown, Postman, TypeScript
│ ├── diff.ts # Snapshot comparison engine
│ ├── schema-renderer.ts # JSON Schema → collapsible tree view
│ ├── schema-form.ts # JSON Schema → interactive form
│ ├── json-highlight.ts # JSON syntax highlighting
│ ├── ai-providers.ts # AI multi-provider adapter (Gemini/OpenAI/Claude/DeepSeek)
│ └── markdown.ts # Markdown rendering + code syntax highlighting
├── server/ # MCP Bridge Server (npm: webmcp-devtools-server)
│ └── src/
│ ├── cli.ts # CLI entry
│ ├── bridge.ts # WebSocket Bridge service
│ └── mcp-server.ts # MCP stdio protocol service
├── test/
│ └── demo.html # Local test page with simulated WebMCP tools
├── scripts/
│ └── generate-icons.mjs # Extension icon generation script
├── public/
│ └── icons/ # Generated extension icons (16–128px)
├── wxt.config.ts # WXT framework configuration
├── package.json
├── tsconfig.json
├── PRIVACY.md # Privacy policy
└── LICENSE # MIT License
```
## Tech Stack
- **[WXT](https://wxt.dev/)** — Next-gen browser extension framework
- **TypeScript** — Type-safe development
- **Chrome Manifest V3** — Service Worker, Side Panel API
- **Vanilla DOM** — No UI framework dependency, minimal bundle size (~90 KB)
## Development
```bash
# Start development mode (hot reloading)
pnpm dev
# Build production version
pnpm build
# Package for Chrome Web Store upload
pnpm zip
```
## How it Works
```
┌──────────────┐
│ AI Client │
│ Cursor/Claude│
└──────┬───────┘
│ stdio (MCP)
┌──────┴───────┐
│ MCP Bridge │
│ Server │
└──────┬───────┘
│ WebSocket
┌──────────────┐ postMessage ┌──────────────┐ chrome.runtime ┌──────┴───────┐
│ Web Page │ ←───────────────→ │ Content │ ←──────────────────→ │ Background │
│ (MAIN) │ │ Scripts │ .sendMessage │ (Service │
│ │ │ (ISOLATED) │ │ Worker) │
│ modelContext │ │ │ │ │
│ .registerTool│ │ │ │ │
└──────────────┘ └──────────────┘ └──────┬───────┘
│
┌──────────────┐ │
│ Side Panel │ ←────────────────────────────────────────────────────────┘
│ (UI) │ chrome.runtime.sendMessage
│ │
│ Tool List │
│ Execute Panel│
│ AI Assistant │
│ Event Timeline│
└──────────────┘
```
1. **injected.content.ts** runs in the page's MAIN world, monkey-patches `navigator.modelContext.registerTool()` to intercept tool registrations
2. **content.ts** runs in the ISOLATED world, bridges `window.postMessage` ↔ `chrome.runtime.sendMessage`
3. **background.ts** (Service Worker) routes messages between content scripts and side panel, manages tab tracking
4. **sidepanel/main.ts** renders UI and coordinates all user interactions
## Contributing
Contributions are welcome! Please submit an issue or pull request.
1. Fork the repository
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
3. Commit changes (`git commit -m 'Add amazing feature'`)
4. Push the branch (`git push origin feature/amazing-feature`)
5. Open a pull request
## License
This project is open-sourced under the [MIT License](LICENSE).
## Features
| Feature | Description |
|---------|-------------|
| **Tool Detection** | Automatically detects all WebMCP tools registered on the current page |
| **Declarative WebMCP** | Auto-detects `<form toolname="...">` declarative tools |
| **Cross-Tab Aggregation** | Unified view of tools from all open tabs |
| **MCP Bridge** | Bridge browser tools to Cursor / Claude Desktop via WebSocket |
| **AI Assistant** | Built-in AI panel with Gemini / OpenAI / Claude / DeepSeek, streaming + Markdown |
| **Schema Visualization** | Collapsible tree view with `$ref` / `allOf` / `oneOf` / `anyOf` support |
| **Form Generation** | Auto-generates interactive forms from JSON Schema |
| **Tool Execution** | Execute tools directly from the side panel with instant results |
| **Performance Stats** | Success rate, avg/min/max duration statistics |
| **Unified Execution Log** | Source tracking (Manual / AI Panel / MCP Bridge) |
| **Event Timeline** | Track tool register / unregister / change events in real-time |
| **Execution History** | Review recent executions with full input & output details |
| **Snapshots & Diff** | Save tool definition snapshots and compare changes over time |
| **Export** | Export as JSON, Markdown, Postman Collection, or TypeScript code |
| **i18n** | English and Chinese with one-click toggle |
| **Themes** | System-aware dark / light theme with manual override |
## MCP Bridge Integration
WebMCP DevTools can bridge browser tools to external AI clients (Cursor, Claude Desktop, etc.).
### Install MCP Server
```bash
npm install -g webmcp-devtools-server
```
### Cursor Configuration
Add to `.cursor/mcp.json`:
```json
{
"mcpServers": {
"webmcp-devtools": {
"command": "npx",
"args": ["-y", "webmcp-devtools-server"]
}
}
}
```
### Claude Desktop Configuration
Add to `claude_desktop_config.json`:
```json
{
"mcpServers": {
"webmcp-devtools": {
"command": "npx",
"args": ["-y", "webmcp-devtools-server"]
}
}
}
```
### Usage
1. Start your AI client (Cursor / Claude Desktop)
2. Open a page with WebMCP tools in the browser
3. Click the **Bridge** button in the extension's side panel
4. The AI client can now discover and call browser tools via `webmcp_list_tools` and `webmcp_call_tool`
## Installation
### From Chrome Web Store
Search for **WebMCP DevTools** on the [Chrome Web Store](https://chromewebstore.google.com/).
### From Source
**Prerequisites:** Node.js 18+, pnpm
```bash
# Clone the repository
git clone https://github.com/2019-02-18/WebMCP-DevTools.git
cd WebMCP-DevTools
# Install dependencies
pnpm install
# Build for production
pnpm build
```
Then load the extension in Chrome:
1. Open `chrome://extensions/`
2. Enable **Developer mode** (top-right toggle)
3. Click **Load unpacked**
4. Select the `.output/chrome-mv3` folder
### Enable WebMCP API
Before using the extension, enable the WebMCP flag in Chrome:
1. Open `chrome://flags/#enable-webmcp-testing`
2. Set the flag to **Enabled**
3. Restart Chrome
## Usage
1. Click the **WebMCP DevTools** icon in the Chrome toolbar to open the side panel
2. Navigate to any page that registers WebMCP tools
3. The **Tools** tab lists all detected tools with their schemas
4. Click a tool card to switch to the **Execute** tab
5. Fill in parameters (form mode or raw JSON) and click **Execute**
6. Check the **Timeline** tab for real-time registration events
7. Use **Snapshots** to save and diff tool definitions over time
### Local Testing
A test page is included at `test/demo.html` with several mock tools. Open it with a local server (e.g. VS Code Live Server) to try the extension without needing a real WebMCP-enabled site.
## Project Structure
```
├── entrypoints/
│ ├── background.ts # Service Worker — tab tracking, message routing
│ ├── content.ts # Content Script (ISOLATED) — bridge to side panel
│ ├── injected.content.ts # Content Script (MAIN) — intercepts modelContext
│ └── sidepanel/
│ ├── index.html # Side Panel HTML shell
│ ├── main.ts # Side Panel logic — rendering, interactions
│ └── styles.css # All styles, themes, components
├── lib/
│ ├── types.ts # Shared TypeScript interfaces
│ ├── i18n.ts # Internationalization (en / zh)
│ ├── icons.ts # Lucide-style SVG icon definitions
│ ├── theme.ts # Theme application helpers
│ ├── storage.ts # chrome.storage.local utilities
│ ├── export.ts # Export: JSON, Markdown, Postman, TypeScript
│ ├── diff.ts # Snapshot diff engine
│ ├── schema-renderer.ts # JSON Schema → collapsible tree view
│ ├── schema-form.ts # JSON Schema → interactive form
│ ├── json-highlight.ts # JSON syntax highlighter
│ ├── ai-providers.ts # Multi-provider AI adapter (Gemini/OpenAI/Claude/DeepSeek)
│ └── markdown.ts # Markdown rendering + code syntax highlighting
├── server/ # MCP Bridge Server (npm: webmcp-devtools-server)
│ └── src/
│ ├── cli.ts # CLI entry point
│ ├── bridge.ts # WebSocket Bridge service
│ └── mcp-server.ts # MCP stdio protocol server
├── test/
│ └── demo.html # Local test page with mock WebMCP tools
├── scripts/
│ └── generate-icons.mjs # Extension icon generator
├── public/
│ └── icons/ # Generated extension icons (16–128px)
├── wxt.config.ts # WXT framework configuration
├── package.json
├── tsconfig.json
├── PRIVACY.md # Privacy policy
└── LICENSE # MIT License
```
## Tech Stack
- **[WXT](https://wxt.dev/)** — Next-gen Web Extension Framework
- **TypeScript** — Type-safe development
- **Chrome Manifest V3** — Service Worker, Side Panel API
- **Vanilla DOM** — No UI framework dependency, minimal bundle size (~90 KB)
## Development
```bash
# Start dev mode with hot reload
pnpm dev
# Build for production
pnpm build
# Package as zip for Chrome Web Store
pnpm zip
```
## How It Works
```
┌──────────────┐
│ AI Client │
│ Cursor/Claude│
└──────┬───────┘
│ stdio (MCP)
┌──────┴───────┐
│ MCP Bridge │
│ Server │
└──────┬───────┘
│ WebSocket
┌──────────────┐ postMessage ┌──────────────┐ chrome.runtime ┌──────┴───────┐
│ Web Page │ ←───────────────→ │ Content │ ←──────────────────→ │ Background │
│ (MAIN) │ │ Scripts │ .sendMessage │ (Service │
│ │ │ (ISOLATED) │ │ Worker) │
│ modelContext │ │ │ │ │
│ .registerTool│ │ │ │ │
└──────────────┘ └──────────────┘ └──────┬───────┘
│
┌──────────────┐ │
│ Side Panel │ ←────────────────────────────────────────────────────────┘
│ (UI) │ chrome.runtime.sendMessage
│ │
│ Tools list │
│ Execute │
│ AI Assistant │
│ Timeline │
└──────────────┘
```
1. **injected.content.ts** runs in the page's MAIN world, monkey-patches `navigator.modelContext.registerTool()` to intercept tool registrations
2. **content.ts** runs in ISOLATED world, bridges `window.postMessage` ↔ `chrome.runtime.sendMessage`
3. **background.ts** (Service Worker) routes messages between content scripts and the side panel, manages tab tracking
4. **sidepanel/main.ts** renders the UI and orchestrates all user interactions
## Contributing
Contributions are welcome! Please open an issue or submit a pull request.
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
## License
This project is licensed under the [MIT License](LICENSE).
