Mcp Cdp

io.github.dockndevai由 GitHub 帳號 dockndevai 發布v0.2.3更新於 Oct 26, 2026

Safe-by-default MCP that drives an Electron/Chrome app over CDP: DOM, console, network, input.

已驗證STDIO僅桌面瀏覽器自動化開發者工具

概覽

AI 產生的概覽

預設安全的 MCP 伺服器,透過 Chrome DevTools 協定驅動 Electron 或 Chrome/Chromium 應用程式,提供 DOM、主控台、網路與輸入工具。

可以做什麼
  • 列出可偵錯的目標,例如頁面、webview 與 Electron 視窗,包含 id、類型、標題與 URL。
  • 讀取整頁或 CSS 選擇器子樹的渲染後 HTML,並查詢符合元素的外層 HTML。
  • 檢視最近的瀏覽器主控台輸出、未攔截例外與網路請求(方法、URL、狀態、MIME、失敗情形)。
  • 擷取視窗區的 PNG 截圖,用於檢查版面與算繪。
  • 在讀寫模式下點擊元素、輸入文字、按鍵,並將目標導覽至指定 URL。
  • 在管理員模式並明確開啟旗標時,於頁面中執行 JavaScript 運算式。
適用情境
適合需要檢視或操作已開放 DevTools 埠的桌面或網頁應用程式,例如排查失敗的 UI 測試、讀取精確 DOM 而非截圖、查看主控台錯誤與失敗請求。也適合多個平行代理各自連上獨立偵錯埠的情況。
執行需求
透過 npx 從 npm 套件在本機執行,需要 Node.js。目標應用程式或瀏覽器須以遠端偵錯埠啟動(CDP_PORT,預設 9222),且主機為回送位址(CDP_HOST)。CDP_MODE 選擇唯讀、讀寫或管理員模式;evaluate 工具另需 CDP_ALLOW_EVAL。未宣告需要帳號或 API 金鑰。
安裝前請注意
預設唯讀,但將 CDP_MODE 提高到讀寫後,助理即可在應用程式中點擊、輸入與導覽;管理員模式加上 CDP_ALLOW_EVAL 允許在算繪程序中執行任意 JavaScript。可用 CDP_TARGET_ALLOWLIST 與受保護目標限制範圍,並以 CDP_DRY_RUN 只記錄而不實際送出。請求標頭不會被擷取、敏感 URL 查詢值會被遮蔽,但頁面內容與網路中介資料仍會傳送給模型。

安裝

在 SourceWeft 中

  1. 開啟 儀表板中的 Mcp Cdp,將其新增到工作區。
  2. 為需要使用其工具的對話啟用該服務。

Desktop only,透過 STDIO。 STDIO 服務會啟動本機處理程序,因此需要 SourceWeft 桌面主機。

其他 MCP 客戶端

參照 儲存庫 中的啟動說明。

README

mcp-cdp

[npm] [CI] [licence]

A safe-by-default Model Context Protocol server that drives an Electron or Chrome/Chromium app over the Chrome DevTools Protocol (CDP) — instead of pixel-level GUI automation. Point it at the app's --remote-debugging-port and an agent gets the DOM, console, network requests, real input (click / type / navigate), and — gated — JavaScript evaluation.

Why this beats computer-use for a desktop/web app:

  • The DOM, not a screenshot. The agent reads exact rendered HTML and can query any element — far more information, and it sees things that aren't on screen.
  • Console + network. When a test fails, the uncaught exception or the failed request is right there — no guessing from an image.
  • No collisions. Each agent attaches to its own debugging port, so parallel agents (e.g. one per git worktree) never fight over one desktop.
  • Cross-OS. CDP works identically on macOS, Linux and Windows — the same flow runs on a headless VPS.

Part of the dockndevai MCP server suite — one governance model across all of them.

What it gives an agent

Starts read-only (see Safe by default); higher-capability tools are only registered when you raise the mode.

ToolForNeeds mode
list_targetslist pages / webviews / Electron windows (id, type, title, url)read-only
dom_snapshotrendered HTML of the page or a selector's subtreeread-only
query_domouter HTML of every element matching a CSS selectorread-only
console_logsrecent console output + uncaught exceptionsread-only
network_requestsrecent requests (method, url, status, mime; headers never captured)read-only
screenshota PNG of the viewportread-only
clickclick the first element matching a selectorread-write
type_texttype into the page (focus a selector first)read-write
press_keyEnter / Tab / Escape / Backspace / Delete / Arrowsread-write
navigatenavigate a target to a URL (confirmed)read-write
evaluaterun a JavaScript expression in the pageadmin + CDP_ALLOW_EVAL

Install

bash
npx -y @dockndevai/mcp-cdp

Expose a debugging port

Start your app (or a worktree's dev build) with an explicit port — one per agent:

  • Electron app: your-app --remote-debugging-port=9222, or in main-process code app.commandLine.appendSwitch('remote-debugging-port', '9222') before app.whenReady().
  • Plain Chrome/Chromium: chrome --headless=new --remote-debugging-port=9222 --user-data-dir=/tmp/p1 <url>.

Check it's up: curl http://127.0.0.1:9222/json/version.

Configure

json
{  "mcpServers": {    "cdp": {      "command": "npx",      "args": ["-y", "@dockndevai/mcp-cdp"],      "env": {        "CDP_PORT": "9222",        "CDP_MODE": "read-only"      }    }  }}

See docs/CLIENTS.md for Claude Code / Cursor / Codex / VS Code / Windsurf, and .env.example for every variable.

Safe by default

Enforced by src/security.ts. The browser process is the real boundary — this keeps an agent inside the targets and actions you intend:

  • CDP_MODE — read-only (default) → read-write → admin. Tools above the mode aren't registered, so in read-only the agent cannot click, type or navigate at all.
  • CDP_TARGET_ALLOWLIST — confine interactions to targets whose URL matches your patterns (empty = all). Reads (inspection) are always allowed.
  • CDP_PROTECTED_TARGETS — targets that can be inspected but never interacted with. Defaults protect sign-in pages (accounts.google.com, login.microsoftonline.com, …) and browser internals (chrome://, devtools://, extensions).
  • CDP_ALLOW_EVAL — evaluate is arbitrary code execution in the renderer: admin mode plus this flag, refused on protected targets, with a human confirmation.
  • CDP_DRY_RUN — interactions log their intent and return without dispatching.
  • Secrets — request/response headers are never captured (cookies/auth), and sensitive URL query values are redacted. evaluate and navigate also prompt a human via MCP elicitation.
  • Loopback only — the endpoint must be 127.0.0.1 unless CDP_ALLOW_REMOTE=true.

Optional AI risk guard. Set CDP_GUARD_MODE=monitor|enforce to have the evaluate tool consult a local laya-guard daemon (pipx install laya-guard && laya-guard) that classifies the JS expression allow/confirm/block before it runs. It runs after the eval gate and can only tighten, never grant; fails closed.

There is a bundled skill, cdp-safe-operations, that teaches an agent how to expose a port, read the DOM/console/network instead of screenshots, the safety rules, and the "why did this fail?" workflow. See also SECURITY.md.

Developing

bash
npm installnpm run build# list the tools:echo '{"jsonrpc":"2.0","id":1,"method":"tools/list","params":{}}' | CDP_PORT=9222 node dist/index.jsnpm test

Licence

MIT

來源:README.md,提交 a533f1b

工具

6

list_targets

List targets

List the debuggable targets on the DevTools endpoint — pages, webviews and Electron windows — with their id, type, title and URL. Start here to find the target id every other tool needs.

無需輸入參數。

dom_snapshot

DOM snapshot

Return the rendered HTML of a target — the whole document, or just the subtree of the first element matching a CSS selector. This is the DOM the agent should read instead of a screenshot: it carries far more information and is exact.

輸入參數selectortarget_id必填

query_dom

Query DOM

Return the outer HTML of every element matching a CSS selector (capped). Use to locate the exact elements to click or type into, and to confirm what is actually on the page.

輸入參數limitselector必填target_id必填

console_logs

Console logs

Return recent console output and uncaught exceptions captured from the target since it was first inspected. The fastest way to see why something failed — errors that never appear on screen.

輸入參數limittarget_id必填

network_requests

Network requests

Return recent network requests captured from the target — method, URL, status, MIME type, failures. Headers are never captured and sensitive URL query values are redacted.

輸入參數limittarget_id必填url_filter

screenshot

Screenshot

Capture a PNG screenshot of the target's viewport. Prefer dom_snapshot for reading content; use this for visual layout, rendering and image checks.

輸入參數target_id必填

版本歷史

3
  1. v0.2.3最新Oct 26, 2026
  2. v0.2.0Sep 27, 2026
  3. v0.1.0Sep 22, 2026

評分

已滿足適用檢查項的 90%

該評分衡量此收錄條目的完整程度,依據註冊中心條目、端點與公開來源計算得出。它不是對伺服器本身的評價,也不表示伺服器安全或目前可用:可連通性是帶日期的檢查結果,評分也不包含安裝量或使用者評價。

  • 近 30 天內可連通25 分
  • 已宣告認證方式10 分

    請在註冊中心條目中宣告憑證請求標頭,或保持端點能夠回應探測,以便判定其認證方式。

  • 已列出工具必需15 分
  • 描述必需15 分
  • 圖示10 分
  • 文件15 分
  • 授權條款10 分