DAY 257

適合跟 AI 一起協作的瀏覽器

SLIDES · 7
Day 257 適合跟 AI 一起協作的瀏覽器 — 投影片 1Day 257 適合跟 AI 一起協作的瀏覽器 — 投影片 2Day 257 適合跟 AI 一起協作的瀏覽器 — 投影片 3Day 257 適合跟 AI 一起協作的瀏覽器 — 投影片 4Day 257 適合跟 AI 一起協作的瀏覽器 — 投影片 5Day 257 適合跟 AI 一起協作的瀏覽器 — 投影片 6Day 257 適合跟 AI 一起協作的瀏覽器 — 投影片 7
1 / 7

ego (lite) 跟其他瀏覽器差在一件事:你跟 agent 可以同時操作同一個瀏覽器,而且不會互相干擾。你照常開自己的分頁,agent 在自己的 Space 裡跑;碰到要登入時,它把控制權交給你,登入完成後再接著做。

它本身就是一個瀏覽器(目前只有 macOS 版)。第一次開起來會問你要不要把 Chrome 的資料搬過來,還有效的登入狀態可以直接沿用。遇到 cookie 過期、2FA 或 SSO,它不會代替你登入,而是把瀏覽器交回給你。帳號、密碼和驗證碼由你自己輸入,完成後再把控制權交回 agent,讓它從同一頁接著跑。

這篇分享:我已經拿它跑過的一個真實任務——Day 256 那篇整理出來的開發票 skill,這次在瀏覽器上點來點去的換成了它——還有它在解什麼問題、Space 怎麼讓 agent 不跟我搶分頁、跟我現在的 Chrome CDP 做法差在哪。

自動化真正的門檻在登入

ego (lite) 自己的說法是,現在有兩類東西在做這件事,兩類都有它認為沒處理乾淨的地方:

  • 自動化框架(Browser-Use、Vercel 的 agent-browser):要另外開一個瀏覽器來驅動,登入狀態帶不過去,而且你跟 agent 會搶同一組分頁
  • AI 瀏覽器(ChatGPT Atlas、Perplexity Comet):內建一個 agent,只有那個 agent 動得了它

我自己踩到的是第一類的後半段——登入我用別的方式繞掉了,分頁沒有。而且例子就在我自己的專案裡。

我現在的做法,跟它沒解掉的那一半

我的發文腳本走 Chrome CDP(Chrome DevTools Protocol,Chrome 自己開出來讓程式控制瀏覽器的那層介面)。開一個帶除錯埠(讓程式從外面連進來的那個門牌號碼)的 Chrome,指定一個獨立的 profile 目錄(這個瀏覽器自己的一份使用者資料,跟你平常用的那份分開):

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
  --remote-debugging-port=9222 \
  --user-data-dir="$HOME/.chrome-debug-profile"

這個 profile 我一次登入 Threads、Facebook、LinkedIn,之後腳本用 Playwright(一套控制瀏覽器的程式庫)從 9222 這個埠接上去,登入問題就真的解掉了,不用每次重來。

沒解掉的是分頁。那個視窗我自己也在用,所以我的腳本裡(src/lib/chrome.ts)有一整段程式碼是在處理「這個分頁是誰的」——因為操作者自己的 Threads、LinkedIn 分頁就在同一個視窗裡,「腳本跑完就把分頁關掉」是錯的規則,只能關自己開的那一個。

那段邏輯存在的唯一理由,就是人跟 agent 共用同一個視窗。

Space 是給 agent 自己的工作區

ego (lite) 處理這件事的方式叫 Space——同一個瀏覽器裡切出互相隔離的工作區。你照常開你的分頁,agent 在它自己的 Space 裡跑。官方說法是你的分頁除非明確交給它,否則不會被動到,它也不會搶你的滑鼠和焦點。

多個 agent 可以各跑各的:Claude Code 在自己的幾個 Space 處理資料,Codex 同時在另外幾個 Space 爬網站,互不干擾。

我以為是 MCP server,結果是一個 skill

這點跟我原本猜的不一樣。我以為會是 MCP server(要另外跑一個服務、讓 AI 連上去用的那種外掛),結果是一個叫 ego-browser 的 skill(一份讓 agent 照著跑的說明書),安裝時放進 agent 的 skills 目錄,agent 把它當成一般終端機指令呼叫。沒有程式介面(SDK)要接,條件只有一個:你的 agent 能跑終端機指令。

官網列出來支援的 client 包含 Claude Code、Codex、Cursor、Continue、Gemini CLI、Kiro、Hermes Agent、OpenClaw、OpenCode,還有自己寫的 agent。

呼叫方式也跟我想的不同。它給的工具是 snapshot(把頁面讀成文字)、fill(填欄位)、click(點)、wait(等)、navigate(換頁)、capture(截圖)這六個,但 agent 不是呼叫一個、看結果、再呼叫下一個。它讓 agent 寫一段 JavaScript,把好幾步串成一段,一次在頁面上跑完。官方的講法是「code base, not CLI base」。頁面元素用 @N 這種編號指定,官方說 class name 改掉了還是抓得到。

snapshot 是做在他們自己那版 Chromium(Chrome 的核心,各家瀏覽器共用的那一層)裡,不是從外面注入一段 JavaScript 去讀頁面,所以官方主張那些「頁面裡又嵌了另一個網頁」的區塊——跨來源 iframe、shadow DOM,像 Stripe 的付款欄位、Intercom 的客服對話框——一樣讀得到。

兩邊攤開來比

Chrome CDP + debug profile(我現在) ego (lite)
登入狀態 自己先把三個平台一個一個登入過 狀態有效時直接沿用;失效時交給人登入,再接著跑
分頁衝突 同一個視窗,要自己寫歸屬規則 Space 隔離,各跑各的
怎麼接上 agent Playwright 連 CDP,接法自己寫 ego-browser skill,agent 直接叫
頁面怎麼給模型看 自己決定抓哪些 DOM 內建 snapshot,直接給整理過的語意結構
支援平台 macOS、Windows、Linux 都可以 目前只有 macOS
費用 免費 免費(repo 是 MIT,瀏覽器本體是另外下載)

平台這一項我今天重新查過:Windows 和 Linux 還在 roadmap 上,macOS 版 Apple Silicon 和 Intel 各有一版。

我實際拿它做的第一件事

Day 256 那篇最後把流程做成了 skill。這次再開一張,實際在瀏覽器上操作的就是 ego (lite)。

我把要開給誰、金額多少講給 agent 聽,它先打開財政部的電子發票整合服務平台。這個平台的登入狀態很快就會失效,所以到登入頁時,agent 把控制權交給我。我自己完成登入,再把控制權交回去;它就從同一頁接著跑,一路把發票填好,停在最後一步等我確認。內容對了,我才按下開立。

這個流程有兩次交接。第一次登入由我接手,帳號、密碼和驗證碼不用交給 agent;第二次開立前再交給我確認,因為發票開錯要作廢、要重開,不是改個字就算了。中間那一串選單和欄位由它處理,把結果攤開給我看——這個分寸拿捏得剛剛好。

重點不是財政部平台能一直保持登入;它的登入狀態其實很快就會失效。重點是人和 agent 可以在同一個流程裡交接控制權:該我輸入敏感資料時我接手,登入後它再從原地繼續。

還沒搬過去的是發文腳本

開發票是最後一步有我把關的任務。發文不一樣,按下去就出去了,所以我還沒動它。

要搬之前有三件事得先弄清楚:

一、跟現有的 CDP 流程會不會打架。 我的發文腳本綁死 9222 埠和 ~/.chrome-debug-profile。ego (lite) 是另一個瀏覽器,兩邊同時開起來會不會搶 profile、搶埠、搶登入狀態,這要實際跑一次才知道。

二、snapshot 到底快多少、省多少 token。 官方兩個地方寫的速度數字還不一樣:GitHub 上寫比 Vercel 的 agent-browser 快「up to 2.5×」,官網寫「up to 3.45x」,而且都是拿自己的 benchmark 講的。token 那一項官方沒給數字,我要自己比一次。

三、隱私。 它說瀏覽資料不上傳,安裝過程只記錄你有沒有選擇搬 Chrome 資料。密碼、cookie、agent 讀過的頁面都留在本機——這句我要自己確認一次,不是看官網寫了就算。

想自己裝的話

兩步。先到官網下載瀏覽器本體(macOS,Apple Silicon 和 Intel 各一版),第一次開起來會問你要不要把 Chrome 的資料搬過來,搬了才有登入狀態可以繼承。然後裝 skill:

npx skills add citrolabs/ego-lite

第一個任務在 agent 裡打 /ego-browser,後面用白話講要做什麼。挑一個需要登入、但只會讀資料、不會改到東西的頁面。到登入頁時由你接手,登入後再把控制權交回去,接著看它能不能從原地繼續、你的分頁有沒有被動到。

如果你常叫 AI 幫你操作登入後的網站,我會推薦試試這種做法。登入和最後確認由你接手,中間重複的網頁操作交給 agent,省掉很多點選,也不用把帳號、密碼和驗證碼交出去。


參考來源:

延伸閱讀
看完整 257 篇 →