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