What This Does

This MCP server lets Claude directly interact with webpages through the DOM Inspector Plus Chrome extension. Instead of you manually inspecting and copying, Claude can:

• Find elements on a page by CSS selector
• Extract full component trees with styles, Tailwind classes, and accessibility info
• Capture interaction states (hover, focus, active) to see what changes
• Extract design tokens (colors, typography, spacing) from any page
• Get page structure overviews to understand the DOM layout

Setup

1. Install the Chrome extension

Install DOM Inspector Plus in Chrome.

2. Install the MCP server

git clone https://github.com/Sreelal727/dom-inspector-plus-mcp.git
cd dom-inspector-plus-mcp
npm install
npm run build

3. Add to Claude Desktop

Add this to your claude_desktop_config.json:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "dom-inspector-plus": {
      "command": "node",
      "args": ["/path/to/dom-inspector-plus-mcp/dist/index.js"],
      "type": "stdio"
    }
  }
}

4. Restart Claude Desktop

The "DOM Inspector Plus" connector should appear in Connectors.

Available Tools

Example Usage

Ask Claude:

"Look at the pricing section on this page and extract the card component with all its styles"

Claude will use the tools to find the pricing section, extract it, and return a structured prompt or React component you can use directly.

How It Works

Claude ←→ MCP Server (stdio) ←→ HTTP Bridge (localhost:18432) ←→ Chrome Extension (content script)

The MCP server runs a small HTTP bridge on localhost:18432. The Chrome extension's content script polls this bridge for commands and sends back results. All communication stays local — nothing is sent to external servers.

License

MIT