DOM Inspector Plus MCP Server
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@DOM Inspector Plus MCP Serverextract the hero section with styles and Tailwind classes"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
DOM Inspector Plus — MCP Server
Give Claude the power to inspect and extract UI components from any webpage.
Connect the DOM Inspector Plus Chrome extension to Claude as an MCP connector.
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
Related MCP server: MCP Accessibility Bridge
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 build3. 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
Tool | Description |
| Check if the extension is connected and get current page info |
| Activate visual inspection mode on the page |
| Deactivate the inspector overlay |
| Extract a component by CSS selector with full styles and Tailwind classes |
| Get the latest user-clicked extraction in any format (AI prompt, JSX, HTML, Tailwind, JSON) |
| Scan the page for colors, typography, spacing, shadows |
| Get a high-level DOM overview of the page |
| Capture hover/focus/active style changes on an element |
| Find elements matching a CSS selector |
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
This server cannot be deployed
Maintenance
Related MCP Connectors
- miromiroOAuthapp.miromiro
Turn any live website into brand colors, fonts, design tokens, SVGs, Lottie and paste-ready code.
Turn any webpage into a structured action manifest — clickable, fillable, submittable elements.
AI-powered browser automation — navigate, click, fill forms, and extract data from any website.
Build, clone & publish websites by chatting with Claude. Live in seconds, custom domains + SSL.
Related MCP Servers
- AlicenseNot gradedqualityDmaintenanceTransforms Chrome browser into an AI-controlled automation tool that allows AI assistants like Claude to access browser functionality, enabling complex automation, content analysis, and semantic search while preserving your existing browser environment.MIT
- AlicenseAqualityDmaintenanceConnects Claude to a live Chrome browser's accessibility tree to generate stable, framework-agnostic test selectors and perform accessibility audits. It enables users to read element roles and states exactly as a screen reader would to help write, debug, and migrate test suites using natural language.86 npm9MIT
- AlicenseAqualityDmaintenanceAttaches to your existing Chrome browser to allow Claude to see the active tab, interact via accessibility tree, and detect handoff triggers like 2FA and captchas.10MIT
- FlicenseNot gradedqualityBmaintenanceEnables Claude Code to control a real browser using AI for web scraping, competitive intelligence, and UX auditing through the MCP protocol.-