# Chrome DevTools for agents 讓 AI coding agents 直接安裝、除錯並驗證 Chrome 擴充功能 > 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt) > 原作者：Chrome for Developers (@ChromiumDev) · 策展與摘要：EasyVibeCoding · 平台：X (Twitter) · 熱度：🔥🔥 · 日期：2026-09-01 > 原始來源：https://x.com/chromiumdev/status/2094520746680713382 ## 證據與延伸閱讀 - [Chrome DevTools for agents 讓 AI coding agents 直接安裝、除錯並驗證 Chrome 擴充功能。](https://developer.chrome.com/docs/extensions/ai/build-with-ai?hl=en) — 官方文件 · 最後核對：2026-09-01 · 支持主張：The documentation adds concrete setup paths for Gemini CLI, Claude Code, Codex, and other agents, including the Chrome DevTools MCP flags --categoryExtensions and --autoConnect. It explains remote-debugging permission, extension-surface inspection, Modern Web Guidance skills, and CHROMEWEBSTORE.md support for store submission metadata. - [Chrome DevTools for agents — developer.chrome.com](https://developer.chrome.com/docs/devtools/agents) — 一手來源 · 最後核對：2026-09-01 · 支持主張：The documentation adds concrete setup paths for Gemini CLI, Claude Code, Codex, and other agents, including the Chrome DevTools MCP flags --categoryExtensions and --autoConnect. It explains remote-debugging permission, extension-surface inspection, Modern Web Guidance skills, and CHROMEWEBSTORE.md support for store submission metadata. - [chrome.com](https://developer.chrome.com/docs/devtools/agents/get-started) ## 中文摘要 Chrome DevTools for agents 讓 AI coding agents 直接安裝、除錯並驗證 Chrome 擴充功能。 **功能範圍** Chrome for Developers 表示，AI coding agents 不只能建立擴充功能，也能直接在 Chrome 中檢查其運作結果，具體包括： - 安裝、解除安裝、列出已安裝及重新載入擴充功能。 - 觸發擴充功能動作，並檢查彈出式視窗（popup）、側邊面板（side panel）與 service worker 等介面。 - 連線到正在使用的 Chrome session，即時檢查、暫停與除錯。 - 模擬不同使用者體驗，包括回應式設計、地理位置與實際操作流程。 - 執行 Lighthouse 的無障礙、SEO 與效能稽核，產生修正建議。 官方示範的流程是讓 Agent 建立一個「Quick notes」擴充功能，在 popup 中提供文字輸入區並儲存筆記；Agent 會產生 Manifest V3 檔案，並因需要保存資料而請求 `storage` 權限，接著安裝、執行並驗證擴充功能。媒體畫面另展示「Focus Todo」介面，以及 `install_extension`、`trigger_extension_action`、`take_snapshot` 和 `click` 等操作。 > Oliver Dunk 在《Developer Tooling Tips》特別節目中示範，讓 coding agent 透過 Chrome DevTools 測試擴充功能。 **Modern Web Guidance 與 skill** 文件同時介紹 Chrome 團隊提供的 Modern Web Guidance。它包含可供 Agent 按需載入的領域知識，讓 Agent 取得較新的 API 資訊、Chrome 擴充功能開發最佳實務，以及現代 API 的架構規則與硬體限制。官方將擴充功能開發 skill 定位為三項用途： - 提供可能晚於目前 model 訓練資料的新 API 知識。 - 協助遵循 Chrome 團隊累積的開發最佳實務。 - 追蹤 Chrome Web Store 提交所需的資訊，降低發布前整理成本。 一般 coding agents 可使用 `modern-web-guidance` CLI 安裝 skill，互動式精靈會要求選擇 Agent，並選取 `chrome-extensions` 與 `modern-web-guidance`： ```bash npx modern-web-guidance@latest install --choose ``` Antigravity 則可在初始設定的 Build With Google Plugins 中選取 Modern Web Guidance plugin，或從設定內的 Customizations 加入。官方文件也提供 Gemini CLI、Claude Code、Codex 及其他 Agent 的安裝路徑，顯示這套工具正以多種 Agent 整合方式擴大支援範圍。 **MCP 設定與瀏覽器連線** Chrome DevTools for agents 可透過 plugin、擴充功能或 MCP server 加入 coding agent。要啟用擴充功能相關工具，必須設定 `--categoryExtensions`；官方也建議使用 `--autoConnect`，讓 Agent 連線到預設 Chrome profile，便於在同一個瀏覽器 instance 中搭配人工與自動測試。Antigravity IDE 的 MCP 設定如下： ```json { "mcpServers": { "chrome-devtools-mcp": { "args": [ "-y", "chrome-devtools-mcp@latest", "--categoryExtensions", "--autoConnect" ], "command": "npx" } } } ``` Claude Code 可使用： ```bash claude mcp add chrome-devtools --scope project -- npx chrome-devtools-mcp@latest --categoryExtensions --autoConnect ``` 其他官方列出的安裝方式包括： ```bash gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp ``` ```bash /plugin marketplace add ChromeDevTools/chrome-devtools-mcp /plugin install chrome-devtools-mcp@chrome-devtools-plugins ``` ```bash codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest ``` Antigravity 2.0 已預先整合 Chrome DevTools for agents，可透過 browser sub-agent 使用，例如 `/browser Navigate to the Google homepage`。若使用 Copilot 或 OpenCode 等其他 coding agent，文件要求依照 Chrome DevTools MCP GitHub repository 的說明設定。 **權限與安全邊界** 啟用擴充功能工具後，還必須在 Chrome 開啟 `chrome://inspect/#remote-debugging`，選取「Allow remote debugging for this browser instance」。Agent 開始測試時，Chrome 會再次要求核准；每次新的瀏覽器 session 都必須重新允許 remote debugging。連線期間，Chrome 會顯示「Chrome is currently controlled by automated test software」橫幅，這是預期狀態。 這項設定需要人工核對：`--autoConnect` 會讓 Agent 連線到預設 Chrome profile，應只在確認目標 profile、登入狀態與測試範圍後使用。官方指出，某些需要驗證的流程，例如 Google Sign-in，在專供 Agent 測試的獨立 profile 中可能無法運作；因此便利性與權限隔離之間存在取捨。 **上架準備** Modern Web Guidance 的另一個重點是維護 `CHROMEWEBSTORE.md`。官方建議在建立或修改 Chrome 擴充功能時，持續管理這個檔案，記錄 Developer Dashboard 所需資訊，以及程式碼中每項權限的理由。當使用者提出「Prepare the extension for publication on the Chrome Web Store」等要求時，Agent 可協助產生初始上架資料；若新增 `declarativeNetRequest` 或 `storage` 權限，也能更新商店說明。 Chrome Web Store 要求遵守 single purpose policy，並為 `manifest.json` 中的每項權限提供細緻理由。若審查遭拒，例如隱私權政策未明確說明本機資料處理方式，使用者可把拒絕原因交給 Agent，請它更新 `CHROMEWEBSTORE.md` 中的合規資訊；但提交前仍應由人員審閱與調整。 **發布狀態與限制** @ChromiumDev 於 2026-08-31 的官方公告文件，以及 Chrome for Developers 在 2026-09-01 的貼文，聚焦於這套能力與設定方式；相關文件頁面標示最後更新時間為 2026-05-19 UTC。資料目前主要是官方文件與示範，沒有獨立的可靠性、效能或安全性評估；Agent plugin 指令、Chrome 權限流程與擴充功能工具行為也可能變動。因此，這項更新代表開發與測試流程已能更深入整合 Chrome，但不應把文件描述直接視為完整的品質或安全保證。 ## 媒體內容 **Oliver Dunk 在《Developer Tooling Tips》特別節目中示範，讓 coding agent 透過 Chrome DevTools 測試擴充功能。** **影片中的 Prompt 與操作** 操作步驟： 1. （00:10）編輯 JSON 設定檔 2. （00:14）檢視 Focus Todo 擴充功能介面 3. （00:17）檢視擴充功能可用指令清單 4. （00:21）瀏覽 Chrome DevTools Protocol 說明與方法清單 **逐字稿** - `00:00` 想讓你的程式開發 Agent 實際測試它建立的 Chrome 擴充功能嗎？（Want your coding agent to actually test the Chrome extensions it builds?） - `00:03` 現在可以了！（Now it can!） - `00:04` 跟我一起，我是來自 I/O Connect Bengaluru 的 Oliver，（Join me, Oliver, from I/O Connect Bengaluru） - `00:07` 收看最新一集的《Developer Tooling Tips》特別節目。（in a special new episode of Developer Tooling Tips.） - `00:10` 我會示範如何使用 Chrome DevTools for agents（I'm showing you how to use Chrome DevTools for agents） - `00:13` 自動安裝、開啟並與你的擴充功能互動。（to install, open, and interact with your extensions automatically.） - `00:17` 我們會深入了解設定、你需要的特定設定旗標，（We'll dive into the setup, the specific config flags you need,） - `00:20` 以及這一切如何透過 Chrome DevTools 協定運作。（and how it all runs on the Chrome DevTools protocol.） - `00:23` 這對擴充功能開發者來說是徹底的遊戲規則改變者，（It's a total game-changer for extension developers,） - `00:25` 所以快去觀看完整一集吧。（so go watch the full episode.） ## 標籤 功能更新, 教學資源, Skills, Chrome DevTools for agents, Oliver Dunk, Modern Web Guidance, Google