JinDaGe - vscode-simple-browser-mcp MCP Details

article

README

🚀 VS Code 简易浏览器 MCP 服务器

这是一个模型上下文协议（MCP）服务器，它使大语言模型（LLMs）能够与 VS Code 的简易浏览器进行交互，提供网站交互功能和控制台日志监控。

🚀 快速开始

安装步骤

克隆仓库：

git clone https://github.com/YOUR_USERNAME/vscode-simple-browser-mcp.git
cd vscode-simple-browser-mcp

安装依赖：
```
npm install
```
构建项目：
```
npm run build
```

使用方法

搭配 Claude Desktop 使用

将服务器添加到你的 Claude Desktop 配置文件中：

macOS/Linux：~/Library/Application Support/Claude/claude_desktop_config.json
Windows：%APPDATA%\\Claude\\claude_desktop_config.json

{
  "mcpServers": {
    "vscode-simple-browser": {
      "command": "node",
      "args": [
        "/path/to/your/vscode-simple-browser-mcp/build/index.js"
      ]
    }
  }
}

独立运行

直接运行服务器：

npm start

✨ 主要特性

浏览器控制

打开 URL：在 VS Code 的简易浏览器中启动网站。
导航：在不同的 URL 之间进行导航。
页面刷新：重新加载当前页面。
浏览器状态：获取当前的 URL 和浏览器状态。
关闭浏览器：关闭简易浏览器窗口。

控制台日志监控

实时日志记录：捕获网页的控制台消息。
日志过滤：按级别（日志、警告、错误、信息、调试）过滤日志。
历史日志：检索带有时间戳和源信息的日志。
日志管理：清除控制台日志历史记录。

JavaScript 执行

代码执行：在浏览器上下文中执行 JavaScript 代码。
结果处理：获取执行代码的返回值。
DOM 操作：通过 JavaScript 与页面元素进行交互。

📦 安装指南

克隆仓库

git clone https://github.com/YOUR_USERNAME/vscode-simple-browser-mcp.git
cd vscode-simple-browser-mcp

安装依赖

npm install

构建项目

npm run build

💻 使用示例

基础用法

打开网站

请在简易浏览器中打开 https://example.com

执行 JavaScript

执行 JavaScript 以获取页面标题：document.title

监控控制台日志

获取浏览器的最新控制台日志

获取浏览器状态

浏览器的当前状态是什么？

高级用法

在项目开发过程中，你可以根据需求灵活组合各个工具的使用，例如先打开一个网站，然后执行 JavaScript 代码对页面进行操作，同时监控控制台日志：

请在简易浏览器中打开 https://example.com
Execute JavaScript to get the page title: document.title
Get the latest console logs from the browser

📚 详细文档

可用工具

| 属性 | 详情 | |------|------| | 工具 | 描述 | | 参数 | 详情 |

| 工具 | 描述 | 参数 | |------|-------------|------------| | open_url | 在简易浏览器中打开一个 URL | url（必需），title（可选） | | navigate | 导航到不同的 URL | url（必需） | | get_current_url | 获取当前显示的 URL | 无 | | refresh_page | 刷新当前页面 | 无 | | execute_javascript | 在浏览器上下文中执行 JavaScript | code（必需），waitForResult（可选） | | get_console_logs | 检索控制台日志 | level（可选），limit（可选），since（可选） | | clear_console_logs | 清除存储的控制台日志 | 无 | | get_browser_state | 获取当前浏览器状态 | 无 | | close_browser | 关闭简易浏览器 | 无 |

项目结构

vscode-simple-browser-mcp/
├── src/
│   └── index.ts           # 主要的 MCP 服务器实现
├── build/                 # 编译后的 JavaScript 输出
├── .vscode/
│   ├── mcp.json          # MCP 服务器配置
│   └── tasks.json        # VS Code 任务
├── .github/
│   └── copilot-instructions.md
├── package.json
├── tsconfig.json
└── README.md

开发命令

npm run build - 构建 TypeScript 项目。
npm run dev - 开发的监听模式。
npm start - 运行编译后的服务器。

添加新工具

使用 MCP SDK 定义工具：

server.tool(
  "tool_name",
  "Tool description",
  {
    parameter: z.string().describe("Parameter description"),
  },
  async ({ parameter }) => {
    // 工具实现
    return {
      content: [
        {
          type: "text",
          text: "Tool result",
        },
      ],
    };
  }
);

在本 README 中更新新工具的信息。

🔧 技术细节

当前实现

这是一个基础实现，提供了以下功能：

通过模拟 VS Code 命令进行基本的浏览器控制。
内存中的控制台日志存储。
JavaScript 执行模拟。

未来改进

对于生产环境的实现，可以考虑以下方面：

直接集成 VS Code 扩展 API。
实时的 WebView 消息传递。
高级的控制台日志捕获机制。
截图功能。
网络请求监控。
元素检查工具。

📄 许可证

ISC 许可证

支持

对于问题和疑问：

查看 MCP 文档。
查看 VS Code 扩展 API 文档。
在本仓库中创建问题。
加入 MCP 社区讨论。

路线图

计划的未来改进：

[ ] 实时控制台日志流。
[ ] 网络请求监控。
[ ] 截图捕获功能。
[ ] 高级 DOM 检查工具。
[ ] 性能监控集成。
[ ] 多标签浏览器支持。

贡献

分叉仓库。
创建功能分支：git checkout -b feature/your-feature-name。
进行更改。
如有必要，添加测试。
提交更改：git commit -am 'Add some feature'。
推送到分支：git push origin feature/your-feature-name。
提交拉取请求。

问题和错误报告

如果你遇到任何问题或错误，请在 GitHub 上创建一个问题，并提供以下信息：

问题的清晰描述。
重现问题的步骤。
你的环境详细信息（操作系统、VS Code 版本、Node.js 版本）。
任何相关的错误消息或日志。

vscode-simple-browser-mcp