# Edge DevTools MCP

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

## 功能特性

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

## 安装

```bash
npm install edge-devtools-mcp
```

## 使用方法

### 环境变量配置

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

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

### 启动 Edge 调试模式

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

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

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

**Linux:**
```bash
microsoft-edge --remote-debugging-port=9222 --user-data-dir="/tmp/edge-dev-debug"
```

### MCP 配置

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

```json
{
  "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`: 获取元素属性

## 使用示例

### 基本网页操作

```javascript
// 连接到浏览器
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();
```

### 表单填充示例

```javascript
// 导航到登录页面
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 执行示例

```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 协议示例

```javascript
// 获取目标列表
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
});
```

## 开发

### 构建项目

```bash
npm run build
```

### 开发模式

```bash
npm run dev
```

### 测试

```bash
npm test
```

### 代码检查

```bash
npm run lint
```

## 依赖项

- `@modelcontextprotocol/sdk`: MCP SDK
- `puppeteer-core`: 浏览器自动化
- `ws`: WebSocket 客户端

## 许可证

MIT License

## 贡献

欢迎提交 Issue 和 Pull Request！

## 相关链接

- [MCP 规范](https://modelcontextprotocol.io/)
- [Edge DevTools 协议](https://learn.microsoft.com/en-us/microsoft-edge/devtools-protocol-chromium/)
- [Puppeteer 文档](https://pptr.dev/)