只需一句話，AI 即可自動操作瀏覽器：

搜索商品：

下單支付：

甚至還能進行深度研究（Deep Research），自動生成完整的攻略報告：

Browser use 是一個開源項目，使 AI 大模型能夠自動操作瀏覽器：

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

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

本文將帶你親自搭建并測試 Browser use 項目。文中所用 AI 模型為剛剛升級的免費版 DeepSeek V3 0324 OpenRouter。

文中還會穿插源碼相關(guān)知識，補充講解項目的核心原理。

本地搭建

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

目前 Browser use 包含三個開源項目：

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

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

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

為方便操作，本文選擇帶 UI 的 web-ui 項目，點擊進入 web-ui 項目頁面：

進入后可見項目安裝說明：

接下來按照官方步驟進行安裝。

首先，在 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

項目下載到本地后：

進入剛下載的項目文件夾：

cd web-ui

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

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

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

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

將 UV 提供的安裝腳本復制：

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

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

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

uv venv --python 3.11

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

.venv\Scripts\activate

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

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

uv pip install -r requirements.txt

依賴安裝較慢，請耐心等待。安裝后用 playwright install 命令安裝瀏覽器自動化工具及對應瀏覽器：

playwright install

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

用 Pycharm 打開項目：

復制 .env.example 并重命名為 .env：

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

進入模型詳情頁，切換到 API 選項卡：

復制 OpenRouter 的 API 請求地址：

https://openrouter.ai/api/v1

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

接著獲取 API Key，在 Open Router 右上角點擊 Keys：

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

名稱可自定義，Credit limit 可選，不填也可以。點擊 create：

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

填寫到項目配置文件 OPENAI_API_KEY 一行：

保存后即可啟動項目。GitHub 說明如下：

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

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

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

還需進行一步設置，進入 LLM Settings 選項卡，將模型名稱修改為：

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

粘貼到模型名稱中：

配置完成后，進行測試。點擊 Run Agent 選項卡：

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

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

項目會對每個可互動元素進行彩色標注，自動填入 OpenAI 并點擊搜索按鈕：

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

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

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

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

再進入 browser_use 目錄下 dom 目錄，找到 buildDomTree.js 文件：

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

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

Browser use 頁面炫酷的標注效果，核心方法是 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)頁，實現(xiàn)彩色標注。

免登錄

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

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

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

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

此時只是快捷方式：

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

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

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

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

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

重啟后（模型名會恢復默認），需重新配置模型：

在 browser Settings 選項卡，勾選 Use Own Browser，即使用本機 Chrome：

重點：啟動任務前需關(guān)閉 Chrome 瀏覽器。切換到 Edge，關(guān)閉 Chrome：

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

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

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

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

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

頁面元素解析完畢后，自動輸入“逗貓棒”，整個過程無需人工干預：

隨后自動進入逗貓棒的商品詳情頁，并解析該頁面：

緊接著，商品被自動加入購物車：

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

確認訂單信息：

由于我已設置小額免密支付，AI 自動點擊付款按鈕后，便直接完成了支付操作：

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

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

因為我測試下來這種方法更穩(wěn)定，效果更好。操作如下：點擊瀏覽器右上角的擴展，點擊管理擴展：

找到“在 Chrome 應用商店中發(fā)現(xiàn)更多擴展程序和主題”，點擊進入：

搜索 Cookie Editor：

將 Cookie Editor 安裝到瀏覽器中：

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

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

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

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

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

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

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

還是讓它使用 Playwright 瀏覽器。切換到 Run Agent 選項卡，我們再來測試一下，我讓他打開淘寶，點擊 Run Agent：

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

還有 unspecified：

我將這兩個值都修改為 “None”，注意是字符串 “None”，保存文件后，重新啟動項目：

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

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

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

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