DOM Inspector Plus MCP Server
Click on "Install 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 installed
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Latest Blog Posts
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/Sreelal727/dom-inspector-plus-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server