只需一句話，AI 即可自動(dòng)操作瀏覽器：

搜索商品：

下單支付：

甚至還能進(jìn)行深度研究（Deep Research），自動(dòng)生成完整的攻略報(bào)告：

Browser use 是一個(gè)開源項(xiàng)目，使 AI 大模型能夠自動(dòng)操作瀏覽器：

短短幾個(gè)月內(nèi)，Browser use 已在 GitHub 上獲得超過 5 萬顆 star：

近期大熱的 AI 產(chǎn)品 Manus 也選擇了 Browser use 作為核心組件。隨后，Manus 聯(lián)合創(chuàng)始人 @peakji 也公開證實(shí)，確實(shí)采用了 @browser_use 的開源代碼。

本文將帶你親自搭建并測(cè)試 Browser use 項(xiàng)目。文中所用 AI 模型為剛剛升級(jí)的免費(fèi)版 DeepSeek V3 0324 OpenRouter。

文中還會(huì)穿插源碼相關(guān)知識(shí)，補(bǔ)充講解項(xiàng)目的核心原理。

本地搭建

首先，訪問 Browser use 的 GitHub 頁面：Browser Use · GitHub

目前 Browser use 包含三個(gè)開源項(xiàng)目：

1. browser-use：命令行版本，無 UI 界面。

2. web-ui：帶有網(wǎng)頁版 UI 界面。

3. macOS-use：AI 代理（AI agents），可與 macOS 系統(tǒng)及其應(yīng)用程序交互。允許 AI 通過編程接口模擬人類操作，幾乎能操控所有 Mac 應(yīng)用，如啟動(dòng)軟件、點(diǎn)擊界面元素、輸入文本或執(zhí)行多步驟任務(wù)。（本文不涉及此部分）

為方便操作，本文選擇帶 UI 的 web-ui 項(xiàng)目，點(diǎn)擊進(jìn)入 web-ui 項(xiàng)目頁面：

進(jìn)入后可見項(xiàng)目安裝說明：

接下來按照官方步驟進(jìn)行安裝。

首先，在 Windows 電腦的 D:\IdeaPro 目錄下新建 browser-use 文件夾，用于統(tǒng)一管理 Browser use 相關(guān)內(nèi)容。

然后在 browser-use 文件夾內(nèi)打開命令提示符（可在地址欄輸入 cmd 回車，或右鍵菜單打開，或通過 Windows 搜索欄搜索 cmd 后 cd 到該目錄），執(zhí)行以下命令：

git clone https://github.com/browser-use/web-ui.git

項(xiàng)目下載到本地后：

進(jìn)入剛下載的項(xiàng)目文件夾：

cd web-ui

下一步是配置 Python 運(yùn)行環(huán)境。官方推薦使用 UV 工具：

UV 是一個(gè)用于管理 Python 環(huán)境和包的工具。點(diǎn)擊官方鏈接進(jìn)入 UV 官網(wǎng)：

在 UV 官網(wǎng)左側(cè)菜單欄找到 Installation：

由于我用的是 Windows 系統(tǒng)，先切換到 Windows 選項(xiàng)卡：

將 UV 提供的安裝腳本復(fù)制：

powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"

在 Windows 搜索欄搜索 PowerShell，打開窗口，把 UV 安裝命令粘貼進(jìn)去并回車：

安裝完成后，繼續(xù)操作。已進(jìn)入 web-ui 文件夾目錄，在命令窗口（如遇命令找不到需重開窗口），使用 UV 創(chuàng)建 Python 3.11 運(yùn)行環(huán)境：

uv venv --python 3.11

使用官方文檔命令激活虛擬環(huán)境，Windows 示例：

.venv\Scripts\activate

激活后，命令行窗口進(jìn)入虛擬環(huán)境：

接下來安裝所需 Python 包，官方命令如下：

uv pip install -r requirements.txt

依賴安裝較慢，請(qǐng)耐心等待。安裝后用 playwright install 命令安裝瀏覽器自動(dòng)化工具及對(duì)應(yīng)瀏覽器：

playwright install

接下來編寫配置文件，將官方配置文件樣例復(fù)制一份，命名為 .env：

用 Pycharm 打開項(xiàng)目：

復(fù)制 .env.example 并重命名為 .env：

該配置文件主要用于配置 AI 的 API、API Key 以及 API 提供商。本文仍選用 Open Router，進(jìn)入 OpenRouter 官網(wǎng)，在左上角模型搜索框中搜索 DeepSeek，選擇 DeepSeek V3 0324（free）版本：

進(jìn)入模型詳情頁，切換到 API 選項(xiàng)卡：

復(fù)制 OpenRouter 的 API 請(qǐng)求地址：

https://openrouter.ai/api/v1

由于 OpenRouter 格式與 OpenAI 完全兼容，可直接填寫到 OpenAI 的 API 地址中：

接著獲取 API Key，在 Open Router 右上角點(diǎn)擊 Keys：

點(diǎn)擊 Create Key 創(chuàng)建新 API Key：

名稱可自定義，Credit limit 可選，不填也可以。點(diǎn)擊 create：

創(chuàng)建后會(huì)生成 API key，復(fù)制下來：

填寫到項(xiàng)目配置文件 OPENAI_API_KEY 一行：

保存后即可啟動(dòng)項(xiàng)目。GitHub 說明如下：

執(zhí)行 Python 命令啟動(dòng)：

python webui.py --ip 127.0.0.1 --port 7788

程序會(huì)生成本地網(wǎng)站地址，點(diǎn)擊 http://127.0.0.1:7788 打開網(wǎng)頁版項(xiàng)目 UI：

還需進(jìn)行一步設(shè)置，進(jìn)入 LLM Settings 選項(xiàng)卡，將模型名稱修改為：

本文使用 DeepSeek V3 免費(fèi)版，在 OpenRouter DeepSeek V3 0324（free）模型詳情頁 OpenRouter

粘貼到模型名稱中：

配置完成后，進(jìn)行測(cè)試。點(diǎn)擊 Run Agent 選項(xiàng)卡：

官方預(yù)設(shè)任務(wù)（訪問 google.com，輸入 “OpenAI”，點(diǎn)擊搜索，返回第一個(gè)網(wǎng)址），直接點(diǎn)擊 Run Agent 測(cè)試。

AI 首先會(huì)打開新瀏覽器窗口，訪問 google.com，并在搜索欄輸入 “OpenAI”：

項(xiàng)目會(huì)對(duì)每個(gè)可互動(dòng)元素進(jìn)行彩色標(biāo)注，自動(dòng)填入 OpenAI 并點(diǎn)擊搜索按鈕：

一系列動(dòng)作完成后，AI 自動(dòng)關(guān)閉瀏覽器窗口，回到項(xiàng)目 UI 查看 Results，給出本次問題答案：

Browser use 的創(chuàng)新點(diǎn)在于將網(wǎng)頁上的按鈕和元素拆解為更易理解、類似文本的格式交給 AI，幫助其識(shí)別網(wǎng)頁選項(xiàng)并自主決策。

Browser use 也用到了模型的視覺識(shí)別能力作為輔助，但視覺識(shí)別并非必須，比如本文用的 DeepSeek V3 0324 就沒有視覺識(shí)別，依然能完成任務(wù)。

來看下核心代碼，找到 .venv 文件夾，進(jìn)入 Lib\site-packages\browser_use 目錄：

再進(jìn)入 browser_use 目錄下 dom 目錄，找到 buildDomTree.js 文件：

在該 JS 文件中，核心方法 buildDomTree 位于 761 行，可搜索定位：

源代碼不再貼出，簡(jiǎn)要說明：buildDomTree 采用遞歸方式，對(duì)網(wǎng)頁所有元素進(jìn)行深度優(yōu)先遍歷，確保每個(gè)節(jié)點(diǎn)都能被訪問和處理。

Browser use 頁面炫酷的標(biāo)注效果，核心方法是 highlightElement：

源碼中通過 JS 創(chuàng)建 div，并用 document.body.appendChild(container) 添加到網(wǎng)頁：

// 創(chuàng)建或獲取高亮容器
let container = document.getElementById(HIGHLIGHT_CONTAINER_ID);
if (!container) {
    container = document.createElement("div");
    container.id = HIGHLIGHT_CONTAINER_ID;
    container.style.position = "fixed";
    container.style.pointerEvents = "none";
    container.style.top = "0";
    container.style.left = "0";
    container.style.width = "100%";
    container.style.height = "100%";
    container.style.zIndex = "2147483647";
    document.body.appendChild(container);
}

// 根據(jù)索引生成顏色
const colors = [
    "#FF0000",
    "#00FF00",
    "#0000FF",
    "#FFA500",
    "#800080",
    "#008080",
    "#FF69B4",
    "#4B0082",
    "#FF4500",
    "#2E8B57",
    "#DC143C",
    "#4682B4",
];
const colorIndex = index % colors.length;
const baseColor = colors[colorIndex];
const backgroundColor = baseColor + "1A"; // 不透明度為 10% 的顏色

最后將 div 渲染到網(wǎng)頁，實(shí)現(xiàn)彩色標(biāo)注。

免登錄

Browser use 啟動(dòng)的瀏覽器是全新環(huán)境，沒有任何登錄信息，所有賬號(hào)都需重新登錄。

其實(shí)可以通過修改配置文件，讓 Browser use 調(diào)用本機(jī)瀏覽器，從而免除登錄步驟，進(jìn)一步擴(kuò)展功能。

具體操作如下：在 Windows 搜索欄輸入 Chrome：

右鍵，選擇“打開文件所在位置”：

此時(shí)只是快捷方式：

需繼續(xù)右鍵，進(jìn)入 Chrome 安裝目錄：

找到 Chrome 可執(zhí)行文件，將路徑復(fù)制，回到項(xiàng)目 .env 配置文件，找到 CHROME_PATH 配置項(xiàng)，粘貼路徑：

Windows 11 可直接復(fù)制，Windows 10 需在路徑末尾加 chrome.exe。

配置好 CHROME_PATH 后，重啟項(xiàng)目。命令行 Ctrl + C 停止項(xiàng)目，再輸入：

python webui.py --ip 127.0.0.1 --port 7788

重啟后（模型名會(huì)恢復(fù)默認(rèn)），需重新配置模型：

在 browser Settings 選項(xiàng)卡，勾選 Use Own Browser，即使用本機(jī) Chrome：

重點(diǎn)：?jiǎn)?dòng)任務(wù)前需關(guān)閉 Chrome 瀏覽器。切換到 Edge，關(guān)閉 Chrome：

確保軟件列表中沒有 Chrome，完全交由 Browser 控制。接下來開始測(cè)試。

我更換了一個(gè)提示詞，前往淘寶電商網(wǎng)站購(gòu)買一根逗貓棒。只購(gòu)買逗貓棒，其他商品一律不選，也不多買，僅下單逗貓棒。隨后點(diǎn)擊“Run Agent”。

自動(dòng)打開了 Chrome 瀏覽器，這個(gè)瀏覽器是我自己電腦上的 Chrome，開始解析網(wǎng)頁：

網(wǎng)頁解析完成后，輸入 www.taobao.com 并點(diǎn)擊搜索：

成功進(jìn)入淘寶網(wǎng)站，注意查看我截圖中的網(wǎng)站是已經(jīng)登錄過的，我的登錄狀態(tài)仍然可以繼續(xù)使用，接下來就可以繼續(xù)執(zhí)行下一步了，首先對(duì)網(wǎng)頁元素進(jìn)行解析：

頁面元素解析完畢后，自動(dòng)輸入“逗貓棒”，整個(gè)過程無需人工干預(yù)：

隨后自動(dòng)進(jìn)入逗貓棒的商品詳情頁，并解析該頁面：

緊接著，商品被自動(dòng)加入購(gòu)物車：

進(jìn)入購(gòu)物車頁面后，自動(dòng)解析網(wǎng)頁，并選擇需要購(gòu)買的商品：

確認(rèn)訂單信息：

由于我已設(shè)置小額免密支付，AI 自動(dòng)點(diǎn)擊付款按鈕后，便直接完成了支付操作：

進(jìn)入到命令行窗口，查看本次操作的結(jié)果 Successfully，任務(wù)完成：

除了使用自己的瀏覽器，還有一種免登錄的方式，就是把 cookie 導(dǎo)入進(jìn) Playwright，這種方式我更推薦。

因?yàn)槲覝y(cè)試下來這種方法更穩(wěn)定，效果更好。操作如下：點(diǎn)擊瀏覽器右上角的擴(kuò)展，點(diǎn)擊管理擴(kuò)展：

找到“在 Chrome 應(yīng)用商店中發(fā)現(xiàn)更多擴(kuò)展程序和主題”，點(diǎn)擊進(jìn)入：

搜索 Cookie Editor：

將 Cookie Editor 安裝到瀏覽器中：

然后來到我們想要的網(wǎng)站，比如淘寶，我已經(jīng)登陸過了，然后在擴(kuò)展欄目中找到我們剛剛安裝的 Cookie Editor，點(diǎn)擊打開：

在 Cookie Editor 中點(diǎn)擊 Export，導(dǎo)出當(dāng)前網(wǎng)站的 Cookie 信息，導(dǎo)出格式選擇 JSON 格式：

此時(shí)我在電腦桌面上新建了一個(gè) cookie.json 文件，然后用編輯軟件打開，把剛才用 Cookie Editor 導(dǎo)出的 JSON 信息粘貼到這個(gè)文件中：

接下來需要修改一點(diǎn)代碼，找到 web-ui 項(xiàng)目的根目錄打開 webui.py 文件，找到 BrowserContextConfig 469 行，添加一句 cookies_file=我們的 cookie.json 文件路徑：

cookies_file="E:\\Desktop\\cookie.json",

Windows 系統(tǒng)下路徑需要用兩個(gè)反斜束，或者直接用一個(gè)正斜束。

代碼修改完成后，重啟項(xiàng)目。注意此時(shí)需將 Browser Settings 中的 Use Own Browser 選項(xiàng)取消掉：

還是讓它使用 Playwright 瀏覽器。切換到 Run Agent 選項(xiàng)卡，我們?cè)賮頊y(cè)試一下，我讓他打開淘寶，點(diǎn)擊 Run Agent：

發(fā)現(xiàn)控制臺(tái)命令行報(bào)錯(cuò)，查看錯(cuò)誤日志發(fā)現(xiàn)提示 sameSite: expected one of (Strict|Lax|None)，只允許 Strict|Lax|None。為修復(fù)這個(gè)問題，我打開 cookie.json 文件，發(fā)現(xiàn) sameSite 的取值有 no_restriction：

還有 unspecified：

我將這兩個(gè)值都修改為 “None”，注意是字符串 “None”，保存文件后，重新啟動(dòng)項(xiàng)目：

另外一種情況同理，不再截圖。

重啟后，繼續(xù)剛才的任務(wù)，注意修改 Model Name，打開淘寶（此時(shí)報(bào)錯(cuò)已消失，網(wǎng)站成功打開且保持登錄狀態(tài)）：

通過導(dǎo)入 Cookie 的方式，實(shí)現(xiàn)了瀏覽器的自動(dòng)登錄，大大拓展了 Browser use 的能力邊界，可以完成更多復(fù)雜的自動(dòng)化操作。

轉(zhuǎn)自https://www.cnblogs.com/BNTang/p/18827708