browser-mcp-over-cdp
3.2
If you are the rightful owner of browser-mcp-over-cdp and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to henry@mcphub.com.
MCP Server that manages a Chrome browser using the Chrome DevTools Protocol (CDP).
Browser MCP over CDP
MCP Server that manages a Chrome browser using the Chrome DevTools Protocol (CDP)
This project exposes tools to navigate, interact and access a browser tab. The browser is controller using CDP and because of this:
- the page is exported as full height screenshoot, accessibility tree and enriched deep DOM
- the screenshoot captures whole page, not just the visible scrolled are
- the accessibility tree contains most relevand parts
- the enriched deep DOM contains
- nested iframes, shadow DOM, pseudo-elements, etc.
- per element attached listeners (for e.g. onClick, onKeyDown, etc), including the callback function code (for better or for worse)
- per element relevant resolved styles
- the page is interactable via click, keys and input value update functions
- the page is navigable with basic open URL, back, forward and reload functions
Prereq
- NodeJS
Use with local Chrome
- npm install
- put config-example.json configuration inside Cloude, VS Code, Cursor, wherever you want.
Use with remote Chrome
- run Selenoid Selenium Hub by running the below command inside "selenoid" dir:
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/
Warnings
The Selenoid Selenium Hub configuration uses docker.sock from the host, so it has full control over Docker.
Troubleshoot
npx @modelcontextprotocol/inspector npx tsx /Users/bogdan/devel/browser-mcp-over-cdp/src/MCP.ts
