Vscode Simple Browser MCP

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

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

🚀 快速开始

安装步骤

1. 克隆仓库：

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

2. 安装依赖：

   npm install
   

3. 构建项目：

   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

📚 详细文档

可用工具

项目结构

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 - 运行编译后的服务器。

添加新工具

1. 使用 MCP SDK 定义工具：

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

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

🔧 技术细节

当前实现

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

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

未来改进

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

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

📄 许可证

ISC 许可证

支持

对于问题和疑问：

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

路线图

计划的未来改进：

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

贡献

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

问题和错误报告

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

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