MCP 服务器

Edge DevTools MCP

Enables control of Microsoft Edge browser via the DevTools protocol, supporting page navigation, screenshots, DOM manipulation, JavaScript execution, and network monitoring.

README

Edge DevTools MCP

一个用于与 Microsoft Edge 浏览器 DevTools 协议集成的 MCP (Model Context Protocol) 服务器。

功能特性

🌐 连接和控制 Microsoft Edge 浏览器
🔧 完整的 DevTools 协议支持
📸 页面截图功能
🎯 DOM 操作和查询
⚡ JavaScript 代码执行
🌍 网络请求监控
🔍 页面元素自动化操作

安装

npm install edge-devtools-mcp

使用方法

环境变量配置

可以通过以下环境变量配置连接参数：

EDGE_DEBUG_PORT: Edge 调试端口（默认：9222）
EDGE_DEBUG_HOST: 调试主机（默认：localhost）
EDGE_HEADLESS: 是否无头模式（默认：false）
EDGE_BROWSER_PATH: Edge 浏览器可执行文件路径

启动 Edge 调试模式

在使用前，需要以调试模式启动 Edge 浏览器：

Windows:

msedge.exe --remote-debugging-port=9222 --user-data-dir="C:\edge-dev-debug"

macOS:

/Applications/Microsoft\ Edge.app/Contents/MacOS/Microsoft\ Edge --remote-debugging-port=9222 --user-data-dir="/tmp/edge-dev-debug"

Linux:

microsoft-edge --remote-debugging-port=9222 --user-data-dir="/tmp/edge-dev-debug"

MCP 配置

在 Claude Desktop 的配置文件中添加：

{
  "mcpServers": {
    "edge-devtools": {
      "command": "node",
      "args": ["path/to/edge-devtools-mcp/dist/index.js"]
    }
  }
}

可用工具

浏览器连接

edge_connect: 连接到 Edge 浏览器
edge_disconnect: 断开连接
edge_get_targets: 获取所有可用目标

页面操作

edge_navigate: 导航到指定 URL
edge_screenshot: 截取页面截图
edge_get_page_content: 获取页面 HTML 内容

DOM 操作

edge_get_element: 获取元素信息
edge_click_element: 点击元素
edge_type_text: 在输入框中输入文本
edge_wait_for_selector: 等待元素出现

JavaScript 执行

edge_evaluate: 执行 JavaScript 表达式

DevTools 协议

edge_enable_devtools: 启用 DevTools 会话
edge_dom_query: 查询 DOM 节点
edge_get_attributes: 获取元素属性

使用示例

基本网页操作

// 连接到浏览器
await edge_connect();

// 导航到网页
await edge_navigate({ url: "https://example.com" });

// 等待页面加载
await edge_wait_for_selector({ selector: "body" });

// 获取页面内容
const { content } = await edge_get_page_content();

// 截取截图
const { screenshot } = await edge_screenshot({ format: "png" });

// 断开连接
await edge_disconnect();

表单填充示例

// 导航到登录页面
await edge_navigate({ url: "https://example.com/login" });

// 等待用户名输入框
await edge_wait_for_selector({ selector: "#username" });

// 填写表单
await edge_type_text({ selector: "#username", text: "myusername" });
await edge_type_text({ selector: "#password", text: "mypassword" });

// 点击登录按钮
await edge_click_element({ selector: "#login-button" });

JavaScript 执行示例

// 执行简单表达式
const { result } = await edge_evaluate({ expression: "document.title" });

// 执行复杂脚本
const { result } = await edge_evaluate({
  expression: `
    const links = Array.from(document.querySelectorAll('a')).map(a => a.href);
    return links.slice(0, 10);
  `
});

DevTools 协议示例

// 获取目标列表
const { targets } = await edge_get_targets();

// 启用 DevTools 会话
const { sessionId } = await edge_enable_devtools({ targetId: targets[0].id });

// 查询 DOM 节点
const { nodeId } = await edge_dom_query({
  sessionId,
  selector: "h1"
});

// 获取节点属性
const { attributes } = await edge_get_attributes({
  sessionId,
  nodeId
});