browser-mcp-over-cdp

The Browser MCP over CDP is a server that facilitates the management of a Chrome browser using the Chrome DevTools Protocol (CDP). This project provides tools to navigate, interact, and access a browser tab. By leveraging CDP, the server can export the page as a full-height screenshot, an accessibility tree, and an enriched deep DOM. The screenshot captures the entire page, not just the visible scrolled area. The accessibility tree includes the most relevant parts, while the enriched deep DOM contains nested iframes, shadow DOM, pseudo-elements, and more. Additionally, it provides per-element attached listeners and relevant resolved styles. The page is interactable through click, key, and input value update functions, and navigable with basic open URL, back, forward, and reload functions.

Features

• Full-height page screenshot capturing the entire page.
• Accessibility tree with relevant parts.
• Enriched deep DOM with nested iframes, shadow DOM, and pseudo-elements.
• Interactable page via click, keys, and input value updates.
• Basic navigation functions: open URL, back, forward, and reload.

Usage with Different Platforms

local_chrome

npm install
put config-example.json configuration inside Cloude, VS Code, Cursor, wherever you want.

remote_chrome

docker pull selenoid/vnc_chrome:128.0
docker pull selenoid/hub
docker pull aerokube/selenoid-ui
docker-compose up -d
specify the Selenium HUB address via SELENIUM_HUB_URL env var by adding inside config-example.json/mcpServers/browser the following:
"env": {
    "SELENIUM_HUB_URL": "http://localhost:4444/wd/hub"
}
to see the live browser go to http://localhost:8080/