LLMs之MCP：Chrome MCP的簡介、安裝和使用方法、案例應用之詳細攻略
目錄
Chrome MCP的簡介
1、特點
2、與類似項目的比較
Chrome MCP的安裝和使用方法
1、安裝
2、使用方法
加載 Chrome 擴展
與 MCP 協議客戶端一起使用
使用 STDIO 連接（替代方案）
3、可用工具
瀏覽器管理 (6 tools)
屏幕截圖和視覺 (1 tool)
網絡監控 (4 tools)
內容分析 (4 tools)
交互 (3 tools)
數據管理 (5 tools)
Chrome MCP的案例應用
Chrome MCP的簡介
Chrome MCP Server 是一個基于 Chrome 擴展的 Model Context Protocol (MCP) 服務器，它將 Chrome 瀏覽器的功能暴露給 AI 助手，例如 Claude，從而實現復雜的瀏覽器自動化、內容分析和語義搜索。與傳統的瀏覽器自動化工具（如 Playwright）不同，Chrome MCP Server 直接使用您日常使用的 Chrome 瀏覽器，利用現有的用戶習慣、配置和登錄狀態，允許各種大型模型或聊天機器人控制您的瀏覽器，真正成為您的日常助手。
1、特點
- 聊天機器人/模型無關：讓您喜歡的任何 LLM 或聊天機器人客戶端或代理自動化您的瀏覽器。
- 使用您原始的瀏覽器：與您現有的瀏覽器環境（您的配置、登錄狀態等）無縫集成。
- 完全本地：純本地 MCP 服務器，確保用戶隱私。
- 可流式傳輸的 HTTP：可流式傳輸的 HTTP 連接方法。
- 跨標簽頁：跨標簽頁上下文。
- 語義搜索：內置向量數據庫，用于智能瀏覽器標簽頁內容發現。
- 智能內容分析：AI 驅動的文本提取和相似性匹配。
- 20+ 工具：支持屏幕截圖、網絡監控、交互操作、書簽管理、瀏覽歷史記錄以及 20 多種其他工具。
- SIMD 加速 AI：定制的 WebAssembly SIMD 優化，可將向量運算速度提高 4-8 倍。
2、與類似項目的比較
| 比較維度 | 基于 Playwright 的 MCP 服務器 | Alignment With The Core Values Of The Organization And Its Strategic Goals.
Chrome MCP的安裝和使用方法
1、安裝
快速開始
先決條件
Node.js >= 18.19.0 和 pnpm/npm
Chrome/Chromium 瀏覽器
安裝步驟
從 GitHub 下載最新的 Chrome 擴展。
下載鏈接：https://github.com/hangwin/mcp-chrome/releases
全局安裝 mcp-chrome-bridge。
npm install -g mcp-chrome-bridge
pnpm# 方法 1：全局啟用腳本（推薦）
pnpm config set enable-pre-post-scripts true
pnpm install -g mcp-chrome-bridge# 方法 2：手動注冊（如果 postinstall 沒有運行）
pnpm install -g mcp-chrome-bridge
mcp-chrome-bridge register注意：pnpm v7+ 默認禁用 postinstall 腳本以確保安全。 enable-pre-post-scripts 設置控制是否運行 pre/post install 腳本。 如果自動注冊失敗，請使用上面的手動注冊命令。
2、使用方法
加載 Chrome 擴展
打開 Chrome 并轉到 chrome://extensions/
啟用“開發者模式”
單擊“加載已解壓的擴展程序”并選擇 your/dowloaded/extension/folder
單擊擴展程序圖標以打開插件，然后單擊連接以查看 MCP 配置
與 MCP 協議客戶端一起使用
使用可流式傳輸的 HTTP 連接（���� 推薦）
將以下配置添加到您的 MCP 客戶端配置（以 CherryStudio 為例）：
{"mcpServers": {"chrome-mcp-server": {"type": "streamableHttp","url": "http://127.0.0.1:12306/mcp"}}
}使用 STDIO 連接（替代方案）
如果您的客戶端僅支持 stdio 連接方法，請使用以下方法：
首先，檢查您剛安裝的 npm 包的安裝位置。
# npm 檢查方法
npm list -g mcp-chrome-bridge# pnpm 檢查方法
pnpm list -g mcp-chrome-bridge假設上面的命令輸出路徑：/Users/xxx/Library/pnpm/global/5
那么您的最終路徑將是：/Users/xxx/Library/pnpm/global/5/node_modules/mcp-chrome-bridge/dist/mcp/mcp-server-stdio.js
用您剛剛獲得的最終路徑替換下面的配置。
{"mcpServers": {"chrome-mcp-stdio": {"command": "npx","args": ["node","/Users/xxx/Library/pnpm/global/5/node_modules/mcp-chrome-bridge/dist/mcp/mcp-server-stdio.js"]}}
}例如：augment 中的配置。
3、可用工具
瀏覽器管理 (6 tools)
get_windows_and_tabs - 列出所有瀏覽器窗口和標簽頁
chrome_navigate - 導航到 URL 并控制視口
chrome_close_tabs - 關閉特定標簽頁或窗口
chrome_go_back_or_forward - 瀏覽器導航控制
chrome_inject_script - 將內容腳本注入到網頁中
chrome_send_command_to_inject_script - 將命令發送到注入的內容腳本
屏幕截圖和視覺 (1 tool)
chrome_screenshot - 具有元素定位、全頁支持和自定義尺寸的高級屏幕截圖捕獲
網絡監控 (4 tools)
chrome_network_capture_start/stop - webRequest API 網絡捕獲
chrome_network_debugger_start/stop - 具有響應正文的 Debugger API
chrome_network_request - 發送自定義 HTTP 請求
內容分析 (4 tools)
search_tabs_content - AI 驅動的跨瀏覽器標簽頁語義搜索
chrome_get_web_content - 從頁面提取 HTML/文本內容
chrome_get_interactive_elements - 查找可點擊的元素
chrome_console - 捕獲并檢索瀏覽器標簽頁中的控制臺輸出
交互 (3 tools)
chrome_click_element - 使用 CSS 選擇器單擊元素
chrome_fill_or_select - 填寫表單并選擇選項
chrome_keyboard - 模擬鍵盤輸入和快捷鍵
數據管理 (5 tools)
chrome_history - 使用時間過濾器搜索瀏覽器歷史記錄
chrome_bookmark_search - 按關鍵字查找書簽
chrome_bookmark_add - 添加具有文件夾支持的新書簽
chrome_bookmark_delete - 刪除書簽
Chrome MCP的案例應用
AI 幫助您總結網頁內容并自動控制 Excalidraw 進行繪圖。
分析圖像內容后，LLM 自動控制 Excalidraw 復制圖像。
AI 自動注入腳本并修改網頁樣式。
AI 自動為您捕獲網絡請求。
AI 幫助分析您的瀏覽歷史記錄。
和測試程序XXX_main的Demo)
)
