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 版本）。
• 任何相關的錯誤消息或日誌。