Codex 能控制瀏覽器？而且有 5 種方式

作者：測試的雞腿

日期：2026年6月1日下午5:58

來源：WeChat 原文

✦整理版優先睇

速讀 5 個重點高亮

Codex 控制瀏覽器有五種方式，揀錯就跑唔起

整理版摘要

呢篇文章係作者整理 Codex 控制瀏覽器嘅五種方法，因為文檔散落到處都係，MCP 頁面講啲、Chrome 擴展講啲、Computer Use 又另一個地方，讀者好難一次過搞清楚。作者嘅結論係：冇邊個方案最好，只有啱唔啱你個場景。用錯場景，再靚嘅方案都跑唔起。

五種方式分別係 Playwright MCP、Chrome DevTools MCP、內置瀏覽器、Chrome 擴展同 Computer Use。Playwright MCP 最適合 UI 自動化測試，用 Accessibility Tree 操作，快又穩定。Chrome DevTools MCP 透過 CDP 直連你正在用嘅 Chrome，保留登入狀態，適合調試已登入嘅內部系統。內置瀏覽器係 Codex App 入面嘅輕量方案，但唔支援登入態，只適合 localhost 或公開頁面。Chrome 擴展係 2026 年 5 月新功能，可以直接操作你已登入嘅 Gmail、Salesforce 等網站。Computer Use 就係最後萬能牌，截圖加模擬點擊，適用於桌面 App 或無 API 嘅遺留系統。

揀邊個好？作者建議從最常見需求出發，先配通一種，其他按需再加。文章入面有 Playwright MCP 同 Chrome DevTools MCP 嘅完整配置代碼，直接複製就用得。

五種方式各有適用場景：UI 自動化用 Playwright MCP，調試已登入頁面用 Chrome DevTools MCP，本地開發用內置瀏覽器，操作已登入網站用 Chrome 擴展，測試桌面 App 用 Computer Use。
Playwright MCP 行 Accessibility Tree，快而穩定，但官方建議若主要寫 code 就用 CLI+Skills 以節省 Token。
Chrome DevTools MCP 通過 CDP 直連現有 Chrome 實例，保留登入狀態，適合調試內部系統。
內置瀏覽器最輕量，但唔支援登入態；Chrome 擴展（2026年5月新功能）可直接操作已登入的 Gmail 等網站。
Computer Use 係最後手段，截圖模擬操作，適用於無 API 嘅桌面 App 或遺留系統。

值得記低

流程

Playwright MCP 配置

[mcp_servers.playwright] command = "npx" args = ["@playwright/mcp@latest"] startup_timeout_sec = 30 tool_timeout_sec = 120

流程

Chrome DevTools MCP 配置

[mcp_servers.chrome_devtools] command = "npx" args = ["-y", "chrome-devtools-mcp", "--cdp-url", " startup_timeout_sec = 15 tool_timeout_sec = 60

結構示例

內容片段

內容片段 text

text[mcp_servers.playwright]command = "npx"args = ["@playwright/mcp@latest"]startup_timeout_sec = 30tool_timeout_sec = 120

整理重點

五種方式，揀錯就跑唔起

上週有人問 Codex 寫完 code 可否自動開瀏覽器驗證，作者發現文檔散落，整合出五種方式。

Playwright MCP — UI 自動化測試首選
Chrome DevTools MCP — 調試神器
內置瀏覽器 — 本地開發專用
Chrome 擴展 — 操作你登錄過的網站
Computer Use — 最後的萬能牌

用錯場景，再好的方案也跑不起來

整理重點

主流自動化同調試方案

Playwright MCP 行 Accessibility Tree，唔靠截圖或視覺模型，操作快、結果穩定。適合 UI 測試、端到端驗證、批量填表等。

官方建議：如果主要用 Codex 寫 code，用 CLI+Skills 更慳 Token，MCP 適合以瀏覽器操作為核心嘅任務。

Chrome DevTools MCP 走 CDP 協議，直連你正在跑嘅 Chrome 實例，保留登入態、Cookie、LocalStorage。適合調試已登入嘅內部系統。

Chrome DevTools MCP 唔會新開瀏覽器，直接用現有會話

Playwright MCP 行 Accessibility Tree

CDP 協議直連 Chrome 實例

整理重點

本地開發同已登入操作

內置瀏覽器係 Codex App 最輕量方案，你同 Codex 睇同一個頁面。開啓 Annotation 模式可以直接調字體、顏色、間距，預覽無誤再發畀 Codex。

內置瀏覽器唔支援登入態，只能用 localhost 或公開頁面

Chrome 擴展係 2026 年 5 月新功能，裝咗之後 Codex 可以直接操作你已登入嘅 Chrome 會話，跨 Tab 幹活。Gmail、Salesforce、內部系統都得。

Chrome 擴展直接進你現有的會話，唔係新開瀏覽器

內置瀏覽器最輕量，但有限制

Chrome 擴展：2026年5月新功能

整理重點

最後手段同選擇指南

Computer Use 係最後萬能牌，原理係截屏 → 睇畫面 → 模擬點擊同鍵盤輸入。唔需要 API、協議、DOM，只要有界面就操作到。

Computer Use 截屏模擬，適用於桌面 App 或遺留系統

支援 macOS 同 Windows（EEA 除外）。macOS 可後台運行，Windows 會接管鼠標鍵盤。

Computer Use：最後萬能牌

唔需要 API，只要有界面就操作

UI 自動化測試 → Playwright MCP
調試已登入頁面 → Chrome DevTools MCP
本地開發 → 內置瀏覽器
已登入網站 → Chrome 擴展
桌面 App → Computer Use

上星期有人問我：Codex 寫完 code，可唔可以自己開瀏覽器行一次驗證？

我話得。

佢話咁點配？

我靜咗三秒。

因為老實講，呢 part 文件散到周圍都係，MCP 頁面講少少，Chrome 擴展又講啲，Computer Use 又係另一個地方——如果你唔將佢哋拼埋一齊，根本唔知自己應該用邊個。

今日將呢 5 種方法全部整理出嚟，附帶配置、場景，睇完可以直接用。

— — —

先講結論

Codex 控制瀏覽器有 5 種方法：

Playwright MCP
Chrome DevTools MCP
內置瀏覽器（In-app Browser）
Chrome 擴展
Computer Use

唔係話邊個最好，而係用錯場景，再好嘅方案都行唔到。

— — —

① Playwright MCP — 自動化測試首選

呢個應該係最多人想要嘅。

行 UI 測試、端到端驗證、批量填表、截圖對比——呢啲用 Playwright MCP 就啱曬。底層行嘅係 Playwright 嘅 Accessibility Tree，唔靠截圖，唔靠視覺模型，操作快、結果穩定。

安裝方法好簡單，兩步：

方法一：一行 command

bashcodex mcp add playwright -- npx @playwright/mcp@latest

方法二：手動寫 config

打開 ~/.codex/config.toml，加落去：

text[mcp_servers.playwright]command = "npx"args = ["@playwright/mcp@latest"]startup_timeout_sec = 30tool_timeout_sec = 120

重啟 Codex，輸入 /mcp，看到 playwright 狀態顯示已啓用就得咗。

如果要行 CI 或者無頭模式，args 度加 "--headless"；想網絡攔截、Mock 接口，加 "--caps", "network"。

裝好之後直接講：

用 playwright 打開 http://localhost:3000，㩒註冊掣，填完 form，截圖確認註冊成功

佢就會自己去搞掂。

但呢度有個反轉——

Playwright MCP 嘅官方 README 入面有一句，好少人留意到：

If you are using a coding agent（例如 Codex），you might benefit from using the CLI+SKILLS instead.

意思係，如果你主要用 Codex 寫 code、順便做幾個瀏覽器動作，MCP 會將大量 Token 用喺加載工具 Schema 度，唔划算。

呢種情況佢哋建議用 Playwright CLI + Skills。

MCP 更適合嘅係：以瀏覽器操作為核心、需要持久狀態、要喺頁面結構入面反覆推理嘅任務。例如寫一個自癒測試、做複雜嘅爬取 workflow。

你係邊種需求，自己判斷。

— — —

② Chrome DevTools MCP — 調試神器

場景好具體：你想叫 Codex 操作一個你已經登入咗嘅網頁，但唔想重新行登入流程。

呢個時候 Playwright MCP 唔夠用，因為佢預設係新開一個乾淨嘅瀏覽器。

Chrome DevTools MCP 行嘅係 CDP 協議，直接連線你正在行緊嘅 Chrome instance，登入狀態、Cookie、LocalStorage 全部保留。

安裝之前先開 Chrome，帶埋調試 port：

bash# macOS/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \  --remote-debugging-port=9222 \  --user-data-dir=/tmp/codex-debug

然後 config.toml 加：

text[mcp_servers.chrome_devtools]command = "npx"args = ["-y", "chrome-devtools-mcp", "--cdp-url", "http://localhost:9222"]startup_timeout_sec = 15tool_timeout_sec = 60

之後你就可以講：

連接 Chrome，入後台管理系統，將呢個禮拜嘅訂單數據導出嚟

或者：

檢查而家個網頁有冇 JS 錯誤，將 Console 嘅錯誤截圖畀我

適合調試、深度分析、操作需要登入嘅內部系統。

— — —

③ 內置瀏覽器 — 本地開發專用

呢個最輕量，亦最易被人忽略。

Codex App 入面有個內置瀏覽器，你同 Codex 睇嘅係同一個 page。你可以直接喺上面框出問題區域、寫標註，Codex 睇到你留嘅註釋之後去改 code。

開啟方法：Plugins → 裝 Browser plugin，然後 Cmd+Shift+B 打開。

用法舉例：

@Browser 打開 http://localhost:3000/checkout，重現 mobile 排版溢出，改好之後截圖確認

仲有個更爽嘅玩法：開 Annotation 模式，喺 page 上㩒一個 element，彈出嘅面板可以直接調 font size、顏色、間距嘅值，預覽冇問題再 send 畀 Codex——佢收到嘅係精確嘅修改目標，唔係含糊嘅「覺得細咗啲」。

但有個硬限制：唔支援登入狀態，唔會讀你嘅 Chrome Cookie。只可以用 localhost 或者唔使登入嘅公開頁面。要登入嘅，睇落去。

— — —

④ Chrome 擴展 — 操作你已登入嘅網站

呢個係 2026 年 5 月先出嘅新功能，好多人仲未知道。

一句概括：裝咗之後，Codex 可以喺你嘅 Chrome 入面跨 Tab 做嘢，你仲可以繼續用瀏覽器。

唔係新開一個 Chrome，係直接入你現有嘅 session。Gmail、Salesforce、公司內部系統——佢一打開就可以操作，因為你一早登入咗。

點樣裝：

Codex App → Plugins → 搜尋並加入 Chrome extension
按引導安裝 Chrome Web Store 裏面嘅 Codex extension
Chrome 會彈一堆權限要求，全部同意
Extension icon 顯示 Connected 就通了

用法：

@Chrome 打開 Salesforce，根據呢啲通話記錄更新客戶資料

@Chrome 入 Gmail，將今日有附件嘅電郵整理成清單

安全方面：預設每個新網站都會問你要唔要允許，你可以建立白名單。瀏覽器歷史預設關閉，單獨授權先用得。

要注意嘅係，網頁內容係唔可信嘅，惡意網站可能喺頁面藏指令試圖操控 Codex。操作前確認網站可靠。

— — —

⑤ Computer Use — 最後嘅萬能牌

前面四種都唔夠用嘅時候，就輪到佢。

原理好粗暴：截圖 → 睇畫面 → 模擬㩒同輸入。唔需要 API，唔需要協議，唔需要 DOM。只要有界面，佢都可以操作。

macOS 同 Windows 都支援（EEA 地區除外）。

裝法：Codex App → Settings → Computer Use → Install，然後授權兩個系統權限：

屏幕錄製：等 Codex 睇到屏幕
輔助功能：等 Codex 可以㩒同輸入

（Settings → Privacy & Security 度揾呢兩項，將 Codex 加落去）

用法：

@Computer 打開 iOS simulator，行一次註冊流程，截圖記錄每一步，揾出體驗問題

用 computer use 打開呢個 Mac app，重現 crash，揾最小觸發路徑，改好之後再行一次 UI 流程

咩情況下用佢：測試冇 API 嘅 desktop app、行 iOS simulator 流程、操作遺留系統、重現只喺 GUI 入面出現嘅 bug。

Windows 用家要注意：佢會接管你嘅 mouse 同 keyboard，喺 task 行完之前最好唔好鬱部電腦。macOS 支援背景執行，影響細啲。

— — —

揀邊個，一張表

你嘅需求	用這個
UI 自動化測試 / CI	Playwright MCP
調試已登入頁面	Chrome DevTools MCP
本地開發預覽驗證	內置瀏覽器
操作 Gmail、內部系統	Chrome 擴展
測試 desktop app / iOS simulator	Computer Use
上面都唔夠用	Computer Use

— — —

老實講，將呢 5 種方法搞清楚之前，我一直以為 Codex 操控瀏覽器得一條路——後來先發現完全唔係。

每種方法都有自己的適用邊界，搞錯咗輕則浪費 Token，重則根本行唔到。

建議你由最常見嘅需求出發，先將對應嗰一種配通，其他嘅按需要再加。

Playwright MCP 嘅配置 code 喺文章入面，直接複製，重啟 Codex 就可以用。

上週有人問我：Codex 寫完代碼，能不能自己打開瀏覽器跑一遍驗證？

我說能。

他說那怎麼配？

我沉默了三秒。

因為說實話，這塊文檔散得到處都是，MCP 頁面說一點，Chrome 擴展說一點，Computer Use 又是另一個地方——你不把它們拼在一起，根本不知道自己該用哪個。

今天把這 5 種方式全整理出來，帶配置、帶場景，看完直接能用。

— — —

先說結論

Codex 控制瀏覽器有 5 種方式：

Playwright MCP
Chrome DevTools MCP
內置瀏覽器（In-app Browser）
Chrome 擴展
Computer Use

不是說哪個最好，是說用錯場景，再好的方案也跑不起來。

— — —

① Playwright MCP — 自動化測試首選

這個應該是最多人想要的。

跑 UI 測試、端到端驗證、批量填表、截圖對比——這些用 Playwright MCP 就對了。底層走的是 Playwright 的 Accessibility Tree，不靠截圖，不靠視覺模型，操作快、結果穩定。

裝法很簡單，兩步：

方法一：一行命令

bashcodex mcp add playwright -- npx @playwright/mcp@latest

方法二：手動寫配置

打開 ~/.codex/config.toml，加進去：

text[mcp_servers.playwright]command = "npx"args = ["@playwright/mcp@latest"]startup_timeout_sec = 30tool_timeout_sec = 120

重啓 Codex，輸入 /mcp，看到 playwright 狀態顯示已啓用就成了。

要跑 CI 或者無頭模式，args 里加 "--headless"；想網絡攔截、Mock 接口，加 "--caps", "network"。

裝好之後直接說：

用 playwright 打開 http://localhost:3000，點擊註冊按鈕，填完表單，截圖確認註冊成功

它就自己去幹了。

但這裏有個反轉——

Playwright MCP 的官方 README 裏有一句話，很少人注意到：

If you are using a coding agent（比如 Codex），you might benefit from using the CLI+SKILLS instead.

意思是，如果你主要用 Codex 寫代碼、順帶跑幾個瀏覽器動作，MCP 會把大量 Token 花在加載工具 Schema 上，不划算。

這種情況他們建議用 Playwright CLI + Skills。

MCP 更適合的是：以瀏覽器操作為核心、需要持久狀態、要在頁面結構裏反覆推理的那種任務。比如寫一個自愈測試、做複雜的爬取工作流。

你是哪種需求，自己判斷。

— — —

② Chrome DevTools MCP — 調試神器

場景很具體：你想讓 Codex 操作一個你已經登錄了的網頁，但又不想重新走登錄流程。

這時候 Playwright MCP 不夠用，因為它默認是新開一個乾淨的瀏覽器。

Chrome DevTools MCP 走的是 CDP 協議，直連你正在跑的 Chrome 實例，登錄態、Cookie、LocalStorage 全都保留。

裝之前先把 Chrome 開起來，帶上調試端口：

bash# macOS/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \  --remote-debugging-port=9222 \  --user-data-dir=/tmp/codex-debug

然後 config.toml 加：

text[mcp_servers.chrome_devtools]command = "npx"args = ["-y", "chrome-devtools-mcp", "--cdp-url", "http://localhost:9222"]startup_timeout_sec = 15tool_timeout_sec = 60

之後你就可以說：

連接 Chrome，進後台管理系統，把這周的訂單數據導出來

或者：

檢查當前頁面有沒有 JS 報錯，把 Console 裏的錯誤截圖給我

適合調試、深度分析、操作需要登錄的內部系統。

— — —

③ 內置瀏覽器 — 本地開發專用

這個最輕量，也最容易被忽視。

Codex App 裏有個內置瀏覽器，你和 Codex 看的是同一個頁面。你能在上面直接框出問題區域、寫標註，Codex 能看到你留的註釋然後去改代碼。

開啓方法：Plugins → 裝 Browser 插件，然後 Cmd+Shift+B 打開。

用法舉例：

@Browser 打開 http://localhost:3000/checkout，復現移動端佈局溢出，修完截圖確認

還有個更爽的玩法：開 Annotation 模式，在頁面上點一個元素，彈出來的面板裏能直接調字體大小、顏色、間距的值，預覽沒問題了再發給 Codex——它拿到的是精確的修改目標，不是含糊的"感覺有點小"。

但有個硬限制：不支持登錄態、不讀你的 Chrome Cookie。只能用 localhost 或者不用登錄的公開頁面。需要登錄的，往下看。

— — —

④ Chrome 擴展 — 操作你登錄過的網站

這個是 2026 年 5 月才出的新功能，好多人還不知道。

一句話概括：裝上之後，Codex 能在你的 Chrome 裏跨 Tab 幹活，你還可以繼續用瀏覽器。

不是新開一個 Chrome，是直接進你現有的會話。Gmail、Salesforce、公司內部系統——它打開就能操作，因為你早就登進去了。

怎麼裝：

Codex App → Plugins → 搜索並添加 Chrome 插件
按引導安裝 Chrome Web Store 裏的 Codex 擴展
Chrome 會彈一堆權限請求，全部同意
擴展圖標顯示 Connected 就通了

用法：

@Chrome 打開 Salesforce，根據這些通話記錄更新客戶信息

@Chrome 進 Gmail，把今天帶附件的郵件整理成清單

安全方面：默認每個新網站都會問你要不要允許，你可以建白名單。瀏覽器歷史默認關閉，單獨授權才能用。

要注意的是，網頁內容是不可信的，惡意網站可能往頁面裏藏指令試圖操控 Codex。操作前確認網站靠譜。

— — —

⑤ Computer Use — 最後的萬能牌

前面四種都不夠用的時候，就輪到它了。

原理很粗暴：截屏 → 看畫面 → 模擬點擊和鍵盤輸入。不需要 API，不需要協議，不需要 DOM。只要有界面，它都能操作。

macOS 和 Windows 都支持（EEA 地區除外）。

裝法：Codex App → Settings → Computer Use → Install，然後授權兩個系統權限：

屏幕錄製：讓 Codex 看到屏幕
輔助功能：讓 Codex 能點擊和輸入

（Settings → Privacy & Security 裏找這兩項，把 Codex 加進去）

用法：

@Computer 打開 iOS 模擬器，走一遍註冊流程，截圖記錄每一步，找出體驗問題

用 computer use 打開這個 Mac 應用，復現崩潰，找最小觸發路徑，修完再跑一遍 UI 流程

什麼情況下用它：測試沒有 API 的桌面 App、跑 iOS 模擬器流程、操作遺留系統、復現只在 GUI 裏出現的 bug。

Windows 用戶要注意：它會接管你的鼠標鍵盤，任務跑完之前最好別動電腦。macOS 支持後台運行，影響小一些。

— — —

選哪個，一張表

你的需求	用這個
UI 自動化測試 / CI	Playwright MCP
調試已登錄頁面	Chrome DevTools MCP
本地開發預覽驗證	內置瀏覽器
操作 Gmail、內部系統	Chrome 擴展
測試桌面 App / iOS 模擬器	Computer Use
上面都不夠用	Computer Use

— — —

說實話，把這 5 種方式摸清楚之前，我一直以為 Codex 操控瀏覽器就一條路——後來才發現完全不是。

每種方式都有自己的適用邊界，搞混了輕則多費 Token，重則根本跑不起來。

建議從你最常見的需求出發，先把對應那一種配通，其他的按需再加。

Playwright MCP 的配置代碼在文章裏，直接複製，重啓 Codex 就能用。