瀏覽器自動化一般主要靠代碼框架、零代碼工具和 AI 輔助工具實現(xiàn)，常用于功能測試、回歸測試和跨瀏覽器兼容性測試。
常見的代碼框架類工具：
- Playwright：微軟開發(fā)，速度快，自動等待機制強，支持 Python、JS、Java、.NET，適合復雜的跨瀏覽器測試。
- Puppeteer：Google 開發(fā)，專為 Chrome/Chromium 設(shè)計，適合前端開發(fā)者。
- Selenium：老牌工具，生態(tài)成熟，支持幾乎所有瀏覽器和主流編程語言。
在 AI Agent 時代，瀏覽器自動化已成為必備技能，而上述傳統(tǒng)的 Puppeteer/Playwright/Selenium 框架存在以下痛點：
- ? 需要編寫大量代碼
- ? 難以與 AI Agent 集成
- ? 缺少統(tǒng)一的管理界面
- ? 遠程調(diào)試配置復雜
OpenClaw 的出現(xiàn)改變了這一切，它是一個自托管的 AI Agent 網(wǎng)關(guān)，內(nèi)置了強大的瀏覽器控制能力，可以通過 CDP 協(xié)議實現(xiàn)了：
? CLI + AI Agent 雙模式控制
? 開箱即用的瀏覽器管理
? 支持遠程 CDP 連接
這一篇我們來介紹 一下，OpenClaw 如何通過瀏覽器自動化操作網(wǎng)站。
一、OpenClaw連接CDP架構(gòu)
1、OpenClaw
OpenClaw 是一個多通道 AI Agent 網(wǎng)關(guān)，提供：
- ?? 獨立瀏覽器配置文件（隔離于個人瀏覽器）
- ?? Chrome 擴展接力（控制現(xiàn)有 Chrome 標簽）
- ?? 遠程 CDP 支持（連接云端瀏覽器）
- ?? Web 控制面板（可視化管理）
CDP 是 Chrome 瀏覽器的調(diào)試協(xié)議，允許開發(fā)者通過編程方式：
- 控制頁面導航、點擊、輸入
- 捕獲網(wǎng)絡(luò)請求和響應(yīng)
- 執(zhí)行 JavaScript
- 截圖和生成 PDF
所有現(xiàn)代瀏覽器自動化工具（Puppeteer、Playwright）都基于 CDP 構(gòu)建。
3、CDP 連接架構(gòu)
┌─────────────┐
│ AI Agent │
│ (OpenClaw) │
└──────┬──────┘
│ HTTP API
▼
┌─────────────────┐
│ Browser Control │
│ Service │
└────────┬────────┘
│ CDP Protocol
▼
┌─────────────────┐
│ Chromium │
│ (CDP Port) │
└─────────────────┘
架構(gòu)分三部分：
- 瀏覽器控制服務(wù)：運行在 OpenClaw Gateway 或節(jié)點上的 API
- Chrome MV3 插件：用
chrome.debugger API 附加到標簽頁，把 CDP 消息傳給本地中繼 - 本地中繼服務(wù)器：在控制服務(wù)器和插件之間搭橋，默認端口
127.0.0.1:18792
二、環(huán)境準備
如果你是新手，想學習OpenClaw完整安裝配置方法及如何接入飛書，可以查閱上一篇文章：為什么我拖了一個多月才開始使用OpenClaw？（附接入飛書完整詳細教程，新手必看）
這里主要以瀏覽器自動化為主，簡化一下步驟，主要分兩步
1、安裝 OpenClaw
# 全局安裝（需要 Node.js 22+）
npm install -g openclaw@latest
# 驗證安裝
openclaw --version
# 輸出：2026.3.2（或更新版本）
2、初始化配置
# 交互式配置向?qū)?
openclaw onboard --install-daemon
# 啟動 Gateway（網(wǎng)關(guān)服務(wù)）
openclaw gateway --port 18789
三、快速上手
目前 OpenClaw 提供了兩種瀏覽器模式：
- 第一種是 OpenClaw 自帶的托管瀏覽器。
- 第二種是 Chrome 擴展中繼。
說白了，就是：讓 AI 直接用我的 Chrome，帶著我所有的登錄狀態(tài)，穩(wěn)定地、像我本人一樣去操作網(wǎng)頁。
這類需求其實有一個更底層、更可靠的解決方案：通過 Chrome 的遠程調(diào)試協(xié)議（CDP）直接連接。
1、瀏覽器（OpenClaw 托管）
它會啟動一個全新的 Chromium 實例，有自己獨立的用戶數(shù)據(jù)目錄。但問題很明顯：這是一臺"全新的電腦"，什么登錄狀態(tài)都沒有。你想讓 AI 幫你操作后臺管理頁面？不好意思，先登錄。碰到二次驗證、短信驗證碼的？那基本沒戲。而且這個瀏覽器的連接穩(wěn)定性也一般，時不時會斷。
這種方式，它是怎么工作的呢？
Chrome 內(nèi)置了一個叫 DevTools Protocol（CDP）的調(diào)試接口。平時你按 F12 打開的開發(fā)者工具，底層用的就是這個協(xié)議。我們要做的，就是讓 Chrome 把這個接口通過一個本地端口暴露出來，然后讓 OpenClaw 連上去。
連上之后，OpenClaw 就能像人一樣操作瀏覽器：點擊按鈕、填寫表單、讀取頁面內(nèi)容，截圖快照全都可以。而且因為走的是底層協(xié)議，比擴展中繼穩(wěn)定得多。
新手視角：
- 把它想象成一個獨立的、僅供智能體使用的瀏覽器。
openclaw 配置文件不會觸及你的個人瀏覽器配置文件。- 智能體可以在安全的通道中打開標簽頁、讀取頁面、點擊和輸入。
- 默認的
chrome 配置文件通過擴展中繼使用系統(tǒng)默認的 Chromium 瀏覽器；切換到 openclaw 可使用隔離的托管瀏覽器。
此瀏覽器不是你的日常瀏覽器。它是一個安全、隔離的界面，用于智能體自動化和驗證。
具體怎么使用：
1、先查看瀏覽器狀態(tài)（默認是關(guān)閉的）
openclaw browser status
# 或
openclaw browser --browser-profile openclaw status
2、啟動獨立瀏覽器（openclaw 配置文件），完全隔離的瀏覽器實例，適合自動化任務(wù)：
openclaw browser start
# 或使用獨立瀏覽器
openclaw browser --browser-profile openclaw start
3、啟動后，就可以打開指定網(wǎng)頁了，比如
openclaw browser open https://testfather.cn
# 或
openclaw browser --browser-profile openclaw open https://testfather.cn
OpenClaw 默認是無頭（headless）無界面模式，看不到窗口。
4、也可以直接截圖，截圖是基于第3步打開的網(wǎng)頁頁面來截取的。
openclaw browser screenshot
# 或
openclaw browser --browser-profile openclaw snapshot
5、如果你想更改配置，比如想將OpenClaw默認改為有頭模式，可以修改瀏覽器設(shè)置位于 ~/.openclaw/openclaw.json
{
browser: {
enabled: true, // default: true
// cdpUrl: "http://127.0.0.1:18792", // legacy single-profile override
remoteCdpTimeoutMs: 1500, // remote CDP HTTP timeout (ms)
remoteCdpHandshakeTimeoutMs: 3000, // remote CDP WebSocket handshake timeout (ms)
defaultProfile: "chrome",
color: "#FF4500",
headless: false,
noSandbox: false,
attachOnly: false,
executablePath: "/Applications/Brave Browser.app/Contents/MacOS/Brave Browser",
profiles: {
openclaw: { cdpPort: 18800, color: "#FF4500" },
work: { cdpPort: 18801, color: "#0066CC" },
remote: { cdpUrl: "http://10.0.0.42:9222", color: "#00AA00" },
},
},
}
注意事項：
- 瀏覽器控制服務(wù)綁定到 loopback 上的端口，該端口從
gateway.port 派生（默認：18791，即 gateway + 2）。中繼使用下一個端口（18792）。 - 如果你覆蓋了 Gateway 網(wǎng)關(guān)端口（
gateway.port 或 OPENCLAW_GATEWAY_PORT），派生的瀏覽器端口會相應(yīng)調(diào)整以保持在同一”系列”中。 - 未設(shè)置時，
cdpUrl 默認為中繼端口。 remoteCdpTimeoutMs 適用于遠程（非 loopback）CDP 可達性檢查。remoteCdpHandshakeTimeoutMs 適用于遠程 CDP WebSocket 可達性檢查。attachOnly: true 表示”永不啟動本地瀏覽器；僅在瀏覽器已運行時附加”。color + 每個配置文件的 color 為瀏覽器 UI 著色，以便你能看到哪個配置文件處于活動狀態(tài)。- 默認配置文件是
chrome（擴展中繼）。使用 defaultProfile: "openclaw" 來使用托管瀏覽器。 - 自動檢測順序：如果系統(tǒng)默認瀏覽器是基于 Chromium 的則使用它；否則 Chrome → Brave → Edge → Chromium → Chrome Canary。
- 本地
openclaw 配置文件會自動分配 cdpPort/cdpUrl — 僅為遠程 CDP 設(shè)置這些。
更多使用，可查詢幫助命令：
openclaw browser --help
2、Chrome 擴展中繼
OpenClaw Chrome（chrome extension relay）擴展讓代理能控制你現(xiàn)有的 Chrome 標簽頁，通過 Chrome 擴展控制你正在使用的 Chrome 標簽，而不是啟動一個單獨的瀏覽器配置文件，附加/分離通過一個工具欄按鈕完成。
具體流程：
- Gateway 網(wǎng)關(guān)在本地運行（同一臺機器）或節(jié)點主機在瀏覽器所在機器上運行。
- 本地中繼服務(wù)器在 loopback 的
cdpUrl 上監(jiān)聽（默認：http://127.0.0.1:18792）。 - 你點擊標簽頁上的 OpenClaw Browser Relay 擴展圖標來附加（它不會自動附加）。
- 智能體通過選擇正確的配置文件，使用普通的
browser 工具控制該標簽頁。
如果 Gateway 網(wǎng)關(guān)在其他地方運行，請在瀏覽器所在機器上運行節(jié)點主機，以便 Gateway 網(wǎng)關(guān)可以代理瀏覽器操作。
安裝步驟：
整個操作過程還是非常簡單的，總共分兩步，第一步安裝OpenClaw的插件，第二步安裝谷歌瀏覽器的拓展程序。
方法一：通過web store 商店安裝
擴展已經(jīng)發(fā)布到 Chrome 商店，搜索 "openclaw-browser-relay" 或直接訪問：
https://chromewebstore.google.com/detail/openclaw-browser-relay/nglingapjinhecnfejdcpihlpneeadjp?pli=1
擴展作為靜態(tài)文件包含在 OpenClaw 發(fā)行版中，沒有單獨的"構(gòu)建"步驟。升級 OpenClaw 后：
- 重新運行
openclaw browser extension install 刷新文件 - 在
chrome://extensions 頁面點擊擴展的"重新加載"按鈕
方法二：手工安裝
1）如果無法訪問 Chrome Web Store，可以手工安裝。
# 安裝 Chrome 擴展
openclaw browser extension install
# 查看擴展路徑
openclaw browser extension path
2）在 Chrome 中加載擴展，打開 Chrome → 訪問 chrome://extensions
訪問 chrome://extensions
啟用"開發(fā)者模式"
點擊"加載未打包的擴展程序"
選擇擴展路徑（選擇上面命令打印的目錄）
3）插件安裝好之后，在擴展程序列表中，可以看到名稱為：OpenClaw Browser Relay插件
4）訪問：http://127.0.0.1:18789/overview，獲取網(wǎng)關(guān)令牌
5）在OpenClaw Browser Relay插件配置頁面，配置OpenClaw Token
保存成功，提示：Relay reachable and authenticated at http://127.0.0.1:18792/，說明已連接到本地的中繼服務(wù)
插件安裝完成后，需要重啟一下 OpenClaw 網(wǎng)關(guān)使配置生效：
openclaw gateway restart
6）使用擴展
OpenClaw 附帶一個名為 chrome 的內(nèi)置瀏覽器配置文件，它指向默認端口上的擴展中繼。使用它：
- CLI：
openclaw browser --browser-profile chrome tabs - 智能體工具：
browser 配合 profile="chrome"
如果你想要不同的名稱或不同的中繼端口，創(chuàng)建你自己的配置文件：
openclaw browser create-profile \
--name my-chrome \
--driver extension \
--cdp-url http://127.0.0.1:18792 \
--color "#00AA00"
安裝完成后，Chrome 工具欄會出現(xiàn) OpenClaw 圖標。
- 附加控制：打開你想要操作的網(wǎng)頁，點擊擴展圖標。當圖標上顯示 “ON” 時，表示該標簽頁已受 OpenClaw 控制。
- 切換標簽頁：只需在其他標簽頁點擊圖標，即可將控制權(quán)切換過去。
點擊工具欄上的插件圖標就能授權(quán)控制。圖標上會顯示狀態(tài)：ON 是已連接，... 是正在連接，! 是中繼不可達或認證失敗（通常是 Gateway 令牌不匹配）。
7）固定擴展到工具欄， 點擊擴展圖標將其固定，方便后續(xù)操作。
3、如何使用
把 openclaw 插件固定到工具欄后，比如訪問 weibo.com網(wǎng)站，點擊插件，顯示紅色 "ON" 字樣表示已 attached：
接下來就可以用 openclaw 操作瀏覽器了，我還是通過飛書進行交互，比如：
我已經(jīng)打開并登錄了微博，獲取今天最新10條微博熱搜消息
我讓 openclaw 獲取最新的 10 條微博消息，然后，它自動的打開了微博熱搜地址
根據(jù)微博熱搜排名，自動獲取了最近10條熱搜返回給了我
接著，我繼續(xù)問它，這次它有點偷懶了，直接切換到文娛標簽上搜索，但貌似它也并不是傻瓜式的對照文娛版塊，還是會結(jié)合熱搜來判斷是否會八卦新聞
今天微博上，有哪些八卦新聞
除了可以直接在飛書這類聊天軟件直接問外，還可以在OpenClaw控制臺的聊天窗口使用，比如訪問：http://127.0.0.1:18789/chat，在聊天窗中，讓它幫我搜一下林俊旸的信息（阿里千問大模型團隊技術(shù)負責人離職了，這兩天各種流言，惋惜。。。）
去百度搜索“林俊旸”
它會自動幫我打開瀏覽器，訪問百度，并且在輸入框搜索：“林俊旸”，最后將信息結(jié)果匯總一并返回
這種操控瀏覽器的方式體驗下來就是快跟準兩個字，但是搜索畢竟是簡單的操作。比如來個復雜一點的任務(wù)：打開B站，搜索OpenClaw，給第一條視頻點贊。當然這些操作，在這篇教程中我就不演示了，感興趣的話，可自行實踐吧~
四、寫在最后
雖然，OpenClaw能自動化瀏覽器，簡單場景夠用了，但說實話，不太好用，插件有時不太穩(wěn)定，經(jīng)常斷開，還得我手工點重連，但畢意人無完人，工具也一樣，OpenClaw還在進化中，有點小Bug可以理解，所以大家在養(yǎng)蝦的過程中遇到點挫折時，多點耐心，折騰AI就得心態(tài)好點。
不管是browser-use 還是 openclaw 的瀏覽器功能，未來都會有很多應(yīng)用場景，先熟悉起來。
?? 記住：瀏覽器自動化的核心不是工具，而是理解 CDP 協(xié)議和網(wǎng)頁結(jié)構(gòu)。掌握 OpenClaw，你就掌握了新一代自動化的鑰匙！
?? 資源鏈接
400 186 1886
