Codeg 瀏覽器智能體如何讓 AI Agent 讀取并操作網(wǎng)頁(yè)的完整指南【免費(fèi)下載鏈接】codegCollaborative multi-agent AI coding workspace: aggregate sessions from Claude Code, Codex, OpenCode, Pi, Grok Build, etc. Desktop app, self-hosted server, or Docker.項(xiàng)目地址: https://gitcode.com/gh_mirrors/co/codegCodeg 瀏覽器智能體讓 AI 編程助手直接讀取你內(nèi)置瀏覽器里的網(wǎng)頁(yè)、并按需執(zhí)行點(diǎn)擊、輸入、按鍵等操作。這篇完整指南會(huì)帶新手從零理解Agent 如何看見(jiàn)頁(yè)面、如何拿到操作權(quán)限、每一步操作如何被審計(jì)以及常見(jiàn)問(wèn)題的最快解決辦法。為什么 AI Agent 需要瀏覽器智能體普通的 AI 編程助手如 Claude Code、Codex、OpenCode 等擅長(zhǎng)讀寫(xiě)代碼但常?？床灰?jiàn)網(wǎng)頁(yè)。Codeg 聚合了這些智能體會(huì)話(huà)并內(nèi)置了一個(gè)瀏覽器智能體可以在其中打開(kāi)頁(yè)面然后像人一樣去讀取和操作它。典型場(chǎng)景? 讓 Agent 查看你本地開(kāi)發(fā)服務(wù)器如localhost:3000的渲染效果驗(yàn)證前端修改是否生效 讓 Agent 讀取某個(gè)網(wǎng)頁(yè)的結(jié)構(gòu)與文案據(jù)此生成代碼或文檔? 讓 Agent 代替你完成點(diǎn)擊按鈕、填寫(xiě)表單、選擇下拉項(xiàng)等重復(fù)性網(wǎng)頁(yè)操作核心機(jī)制概括為一句話(huà)Agent 不直接摸 DOM而是先拍照快照拿到元素的引用ref再憑 ref 去點(diǎn)擊或輸入——這正是 Playwright 生態(tài)通用的做法源碼說(shuō)明見(jiàn) browser-agent/README.md。一頁(yè)紙看懂Agent 讀取網(wǎng)頁(yè)的完整流程整個(gè)流程分四步每步都對(duì)應(yīng)一個(gè)內(nèi)置工具列出標(biāo)簽頁(yè)—browser_list_tabs告訴 Agent 當(dāng)前有哪些頁(yè)面可看抓取頁(yè)面快照—browser_snapshot把頁(yè)面變成一棵帶編號(hào)元素e1、e2…的無(wú)障礙樹(shù)執(zhí)行操作—browser_click/browser_type/browser_press_key/browser_hover/browser_select_option按 ref 定位并操作核對(duì)結(jié)果— 再次快照或browser_screenshot/browser_console_messages確認(rèn)頁(yè)面變化這些工具由內(nèi)置的 codeg-mcp 服務(wù)承載權(quán)限判斷統(tǒng)一走 src-tauri/src/browser/agent.rs工具定義見(jiàn) src-tauri/src/acp/browser_tools.rs。關(guān)鍵權(quán)限模型先共享后操作Codeg 的設(shè)計(jì)原則非常強(qiáng)硬沒(méi)有任何頁(yè)面是被默認(rèn)開(kāi)放的。Agent 要讀一頁(yè)唯一的路徑是你主動(dòng)共享這個(gè)標(biāo)簽頁(yè)給它。在瀏覽器標(biāo)簽頁(yè)的工具欄中點(diǎn)擊機(jī)器人圖標(biāo)即可打開(kāi)共享菜單提供兩個(gè)層級(jí)權(quán)限級(jí)別中文名稱(chēng)Agent 能做什么read讀取權(quán)限快照、截圖、讀控制臺(tái)control讀取并操作權(quán)限在讀取基礎(chǔ)上可點(diǎn)擊、輸入、按鍵、選擇none不共享默認(rèn)一律拒絕并提示你共享標(biāo)簽頁(yè)幾個(gè)值得記住的細(xì)節(jié)按站點(diǎn)生效共享只覆蓋該網(wǎng)址origin頁(yè)面一旦跳轉(zhuǎn)到別的站點(diǎn)共享自動(dòng)結(jié)束?本地端口防串門(mén)如果你共享的是localhost:3000Codeg 會(huì)記住當(dāng)時(shí)是哪個(gè)程序含工作目錄在監(jiān)聽(tīng)換一個(gè)程序占用該端口共享同樣失效全程留痕每次讀取/操作都會(huì)在地址欄右側(cè)的活動(dòng)記錄中顯示讀取了頁(yè)面點(diǎn)擊了 ××已拒絕此頁(yè)面未共享等條目界面實(shí)現(xiàn)見(jiàn) src/components/browser/browser-agent-access.tsx?拒絕也是一種答案沒(méi)有共享時(shí)工具返回的不是報(bào)錯(cuò)而是一條可讀的說(shuō)明browser_grant_requiredAgent 會(huì)轉(zhuǎn)告你請(qǐng)共享這個(gè)標(biāo)簽頁(yè)快照與操作AI 如何看見(jiàn)并動(dòng)手頁(yè)面腳本運(yùn)行在與 Agent 隔離的獨(dú)立環(huán)境中注入腳本由 esbuild 構(gòu)建為 src-tauri/src/browser/js/agent.bundle.js源碼在 browser-agent/src/ 目錄。讀取頁(yè)面快照快照采用 Playwright 的 ai 模式所有可見(jiàn)且能接收指針事件的元素都會(huì)拿到一個(gè) ref——連沒(méi)有 ARIA 角色、只掛了點(diǎn)擊事件的div也能被點(diǎn)名快照默認(rèn)有 4 萬(wàn)字符上限可在請(qǐng)求中調(diào)整超出會(huì)標(biāo)注truncated提醒 Agent 縮小提問(wèn)范圍而不是誤以為頁(yè)面到底了操作頁(yè)面動(dòng)作動(dòng)作工具在一次求值內(nèi)完成解析 ref → 執(zhí)行動(dòng)作中間頁(yè)面不可能變化避免點(diǎn)對(duì)了元素名、點(diǎn)錯(cuò)了元素?點(diǎn)擊被遮擋的元素會(huì)被拒絕并告訴你誰(shuí)擋在前面比如彈窗遮罩??輸入優(yōu)先走瀏覽器原生beforeinput/input事件保證 Vue、React 這類(lèi)框架能收到滾動(dòng)沒(méi)有單獨(dú)的滾動(dòng)工具PageDown/PageUp 按鍵就是唯一的滾動(dòng)方式Agent 會(huì)收到實(shí)際滾動(dòng)了多少、還能滾多少的真實(shí)反饋??陳舊 ref頁(yè)面跳轉(zhuǎn)后舊快照里的 ref 一律作廢browser_stale_refAgent 必須重新快照——寧可多問(wèn)一次也不點(diǎn)錯(cuò)東西常見(jiàn)提示與最快排查方法提示含義最快解決browser_grant_required頁(yè)面未共享給 Agent在標(biāo)簽頁(yè)工具欄點(diǎn)機(jī)器人圖標(biāo)選擇共享browser_control_required已共享但只有讀權(quán)限Agent 想操作把共享升級(jí)為讀取并操作權(quán)限browser_stale_ref引用的元素已隨頁(yè)面變化失效無(wú)需處理Agent 會(huì)自動(dòng)重新快照browser_eval_declined你拒絕了在頁(yè)面上運(yùn)行一段代碼這是逐條審批制重新允許即可browser_unavailable當(dāng)前構(gòu)建/模式下沒(méi)有內(nèi)置瀏覽器注意服務(wù)端模式下瀏覽器工具組不啟用另外Agent 若在頁(yè)面上運(yùn)行自定義 JavaScriptbrowser_eval會(huì)先彈出確認(rèn)框向你展示完整代碼逐條審批、可隨時(shí)拒絕——你有權(quán)知道它在頁(yè)面上跑什么。適合新手的起步清單? 安裝并打開(kāi) Codeg 桌面版確認(rèn)內(nèi)置瀏覽器可用瀏覽器功能相關(guān)設(shè)置位于設(shè)置 → 內(nèi)置瀏覽器前端代碼在 src/settings/browser/ 目錄? 在內(nèi)置瀏覽器中打開(kāi)任意頁(yè)面點(diǎn)擊工具欄機(jī)器人圖標(biāo)選擇讀取權(quán)限完成第一次共享? 在對(duì)話(huà)中讓 Agent 描述當(dāng)前頁(yè)面觀察地址欄右側(cè)出現(xiàn)的讀取了頁(yè)面活動(dòng)記錄? 需要操作時(shí)升級(jí)為讀取并操作權(quán)限試試讓它點(diǎn)擊一個(gè)按鈕? 閱讀 browser-agent/README.md 了解 ref 失效、遮擋拒絕等設(shè)計(jì)細(xì)節(jié)總結(jié)Codeg 的瀏覽器智能體把AI 看網(wǎng)頁(yè)、操作網(wǎng)頁(yè)變成了一件權(quán)限清晰、過(guò)程可審計(jì)、失敗方向安全的事沒(méi)有自動(dòng)授權(quán)、每個(gè)標(biāo)簽頁(yè)獨(dú)立控制、每次動(dòng)作都有記錄。對(duì)新手來(lái)說(shuō)只需要記住三個(gè)詞——共享、快照、按 ref 操作——就能安全地讓 AI 助手替你讀懂網(wǎng)頁(yè)、動(dòng)手點(diǎn)擊?！久赓M(fèi)下載鏈接】codegCollaborative multi-agent AI coding workspace: aggregate sessions from Claude Code, Codex, OpenCode, Pi, Grok Build, etc. Desktop app, self-hosted server, or Docker.項(xiàng)目地址: https://gitcode.com/gh_mirrors/co/codeg創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考