瀏覽器自動(dòng)化還在寫腳本？一個(gè)輕量MCP Server直接把它變成標(biāo)準(zhǔn)Tool

你有沒有遇到過這種情況：想讓AI Agent自動(dòng)操作網(wǎng)頁——填個(gè)表單、抓個(gè)數(shù)據(jù)、點(diǎn)個(gè)按鈕——結(jié)果光是配置瀏覽器驅(qū)動(dòng)、處理反爬、解析DOM就折騰半天？

更頭疼的是，每個(gè)Agent框架的瀏覽器工具接口都不一樣，今天用Playwright，明天換Puppeteer，后天又要兼容Selenium。代碼寫了一堆，復(fù)用率幾乎為零。

問題的核心不是瀏覽器自動(dòng)化難，而是它沒有被"標(biāo)準(zhǔn)化"。

今天聊一個(gè)思路：用一個(gè)輕量MCP Server，把Puppeteer的瀏覽器能力封裝成標(biāo)準(zhǔn)的MCP Tool，讓任何支持MCP協(xié)議的LLM都能直接調(diào)用瀏覽器，就像調(diào)用一個(gè)API一樣簡單。

什么是MCP？為什么它能解決這個(gè)問題

MCP（Model Context Protocol）是Anthropic提出的開放協(xié)議，核心目標(biāo)是：讓LLM和外部工具之間的通信標(biāo)準(zhǔn)化。

打個(gè)比方：以前每個(gè)工具都像一個(gè)方言，Agent要學(xué)十種方言才能調(diào)用十個(gè)工具。MCP就是普通話——工具說MCP，Agent說MCP，大家就能對(duì)話。

所以，如果我們把瀏覽器自動(dòng)化封裝成一個(gè)MCP Server，那任何支持MCP的Agent（Claude、AI Agent平臺(tái)、龍蝦等）都能直接"用"瀏覽器，不用關(guān)心底層是Puppeteer還是Playwright。

這個(gè)輕量MCP Server做了什么

這個(gè)項(xiàng)目的核心思路很清晰：用Puppeteer做底層驅(qū)動(dòng)，通過MCP協(xié)議暴露結(jié)構(gòu)化的瀏覽器操作能力。

它提供的不是一堆原始API，而是幾個(gè)語義明確的工具：

tools:
  - navigate: 打開指定URL
  - click: 點(diǎn)擊頁面元素（通過可訪問性描述定位）
  - type: 在輸入框填寫內(nèi)容
  - screenshot: 截圖并返回base64
  - get_page_content: 獲取頁面結(jié)構(gòu)化內(nèi)容

關(guān)鍵設(shè)計(jì)點(diǎn)有兩個(gè)：

1. 結(jié)構(gòu)化可訪問性數(shù)據(jù)，不是原始DOM

傳統(tǒng)做法是把整個(gè)DOM樹丟給LLM，token爆炸不說，LLM還經(jīng)常解析出錯(cuò)。這個(gè)Server的做法是：只提取可訪問性樹（Accessibility Tree）。

什么是可訪問性樹？就是瀏覽器為屏幕閱讀器生成的語義化結(jié)構(gòu)——按鈕就是按鈕，輸入框就是輸入框，鏈接就是鏈接。比原始HTML干凈得多，LLM理解起來也更準(zhǔn)確。

// 獲取頁面可訪問性快照
const snapshot = await page.accessibility.snapshot();
// 返回的不是HTML，而是這種結(jié)構(gòu)：
// { role: "button", name: "提交", children: [...] }

LLM看到的是"有一個(gè)叫'提交'的按鈕"，而不是一坨<button class="btn btn-primary" data-action="submit">提交</button>。哪個(gè)更好理解，不言自明。

2. 可選視覺模式，處理復(fù)雜場(chǎng)景

純文本的可訪問性數(shù)據(jù)能覆蓋80%的場(chǎng)景，但有些情況——比如驗(yàn)證碼、圖表、Canvas繪制的內(nèi)容——文本描述不了。

這時(shí)候可以開啟視覺模式，讓Server截圖并以圖片形式返回給LLM。Claude這類支持多模態(tài)的模型可以直接"看"截圖來理解頁面狀態(tài)，然后決定下一步操作。

// 視覺模式：截圖 + 可訪問性數(shù)據(jù)雙通道
if (visualMode) {
  const screenshot = await page.screenshot({ encoding: 'base64' });
  const snapshot = await page.accessibility.snapshot();
  return { screenshot, accessibility: snapshot };
}

跨平臺(tái)兼容怎么實(shí)現(xiàn)的

這個(gè)Server的跨平臺(tái)能力來自Puppeteer本身的設(shè)計(jì)。Puppeteer支持Chrome、Firefox，甚至可以通過配置指向本地已安裝的瀏覽器，不需要額外下載Chromium。

在MCP Server層面，它把瀏覽器啟動(dòng)配置做了抽象：

{
  "browser": "chrome",
  "headless": true,
  "executablePath": "/usr/bin/google-chrome"
}

不管你在macOS、Linux還是Windows上跑，只要指定好瀏覽器路徑，Server就能啟動(dòng)。對(duì)于容器化部署（Docker），配合puppeteer官方鏡像基本開箱即用。

實(shí)際應(yīng)用場(chǎng)景：一個(gè)完整的自動(dòng)化案例

假設(shè)你要做一個(gè)"自動(dòng)比價(jià)Agent"：用戶說"幫我看看京東和拼多多上iPhone 16的價(jià)格"，Agent自動(dòng)打開兩個(gè)網(wǎng)站、搜索商品、提取價(jià)格、返回對(duì)比結(jié)果。

用這個(gè)MCP Server，Agent的工作流是這樣的：

Agent收到任務(wù) → 調(diào)用navigate工具打開京東 → 調(diào)用type工具輸入"iPhone 16" → 
調(diào)用click工具點(diǎn)擊搜索 → 調(diào)用get_page_content獲取商品列表 → 
重復(fù)上述流程訪問拼多多 → 對(duì)比價(jià)格 → 返回結(jié)果

整個(gè)過程中，Agent不需要知道Puppeteer的API長什么樣，它只需要調(diào)用MCP標(biāo)準(zhǔn)的工具接口。瀏覽器自動(dòng)化變成了一個(gè)"即插即用"的能力模塊。

對(duì)AI Agent生態(tài)的意義

這個(gè)思路的價(jià)值不只是"又一個(gè)瀏覽器工具"，而是它展示了一種模式：把復(fù)雜的基礎(chǔ)設(shè)施能力，通過MCP協(xié)議封裝成LLM可以直接消費(fèi)的標(biāo)準(zhǔn)工具。

瀏覽器只是開始。同樣的思路可以應(yīng)用到：

• 數(shù)據(jù)庫操作（SQL查詢封裝成MCP Tool）
• 文件系統(tǒng)（讀寫文件封裝成MCP Tool）
• API調(diào)用（REST/GraphQL封裝成MCP Tool）

當(dāng)這些能力都變成標(biāo)準(zhǔn)的MCP Tool，構(gòu)建Agent就不再是"從零寫集成代碼"，而是"像搭積木一樣組合工具"。

下一步：動(dòng)手試試

1. 克隆項(xiàng)目：git clone [項(xiàng)目地址]，跑起來看看它暴露了哪些工具
2. 接入你的Agent：如果你在用Claude或支持MCP的框架，在配置里加上這個(gè)Server的地址
3. 改造一個(gè)自己的MCP Server：把你常用的腳本（爬蟲、數(shù)據(jù)處理、API調(diào)用）封裝成MCP Tool，體驗(yàn)一下"工具標(biāo)準(zhǔn)化"的爽感

瀏覽器自動(dòng)化不應(yīng)該每個(gè)Agent都重寫一遍。封裝一次，到處復(fù)用——這才是MCP協(xié)議的正確打開方式。