Skip to main content
Glama
Sreelal727

DOM Inspector Plus MCP Server

by Sreelal727

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 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

Tool

Description

get_inspector_status

Check if the extension is connected and get current page info

start_inspector

Activate visual inspection mode on the page

stop_inspector

Deactivate the inspector overlay

extract_element

Extract a component by CSS selector with full styles and Tailwind classes

get_extraction

Get the latest user-clicked extraction in any format (AI prompt, JSX, HTML, Tailwind, JSON)

extract_design_tokens

Scan the page for colors, typography, spacing, shadows

get_page_structure

Get a high-level DOM overview of the page

capture_interaction_state

Capture hover/focus/active style changes on an element

find_elements

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

A
license - permissive license
-
quality - not tested
D
maintenance

Maintenance

Maintainers
Response time
Release cycle
Releases (12mo)
Commit activity

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

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