AI 程式設計代理 (例如 Antigravity) 現在可以生成擴充功能程式碼，準確度令人驚豔。不過，如要充分發揮這些模型的潛力並確保獲得優質結果，您必須提供適當的背景資訊和工具。
本指南說明如何在程式碼編寫代理中設定合適的工具，以及這些工具如何協助您更快建構更優質的擴充功能。
我們已建立程式碼編寫代理的技能，專為擴充功能開發而設計。這項技能是我們更廣泛的「現代網路指南」計畫的一部分，可為 AI 程式設計代理提供網路平台專業知識、最佳做法和現代 API 模式。
不過，建構擴充功能只是第一步。為協助您確認程式碼是否正常運作，代理商專用的 Chrome 開發人員工具可讓 AI 程式碼輔助工具直接在 Chrome 中偵錯擴充功能，並運用開發人員工具的偵錯功能和成效洞察資料。
設定
現代網頁指南
如要使用技能包，請在偏好的環境中安裝 Modern Web Guidance，並將擴充功能技能新增至該環境。以下是幾種熱門工具的操作說明。
CLI
建議透過 Chrome 團隊建構的 modern-web-guidance CLI 安裝大多數程式碼代理 (包括 Gemini CLI、Claude Code 和 Codex)。透過 modern-web-guidance CLI 安裝技能時，系統會自動更新技能。
npx modern-web-guidance@latest install --choose
這會執行互動式精靈，根據您的偏好安裝技能。系統顯示選項時，請選取編碼代理程式，然後選擇「chrome-extensions」和「modern-web-guidance」。
Antigravity
安裝 Antigravity 時，您可以選取包含擴充功能技能的「Modern Web Guidance」外掛程式，也可以依序選取「Customizations」 >「Build With Google Plugins」 >「Modern Web Guidance」來新增。
程式設計代理專用的 Chrome 開發人員工具
您可以將代理程式專用的 Chrome 開發人員工具新增至所選的編碼代理程式，方法是新增外掛程式、擴充功能或 MCP 伺服器。
以下列出幾種熱門代理程式的操作說明。
Antigravity
如要使用 Chrome 開發人員工具 MCP 伺服器，請按照 Antigravity 的文件安裝自訂 MCP 伺服器。在 MCP 伺服器設定中新增下列項目：
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--category-extensions",
"-y"
]
}
}
}
Claude Code
claude mcp add chrome-devtools --scope project -- npx chrome-devtools-mcp@latest --categoryExtensions
其他代理
如需設定其他代理程式的說明，請參閱 Chrome 開發人員工具 MCP GitHub 的文件。
CHROMEWEBSTORE.md 代理指令
填寫開發人員資訊主頁是發布擴充功能的重要環節。為解決這個問題，這項技能會讓程式碼代理程式建立及維護 CHROMEWEBSTORE.md 檔案，追蹤必要資訊，包括程式碼中要求的各項權限的理由。
當你使用「發布這個項目」或「準備將這個擴充功能上架到商店」等詞組時，這項技能就會觸發。不過，如要簡化代理功能工作流程，請在代理的系統指令中加入下列內容 (例如 Antigravity 的 ~/.gemini/GEMINI.md 或 Claude 的 ~/.claude/CLAUDE.md)：
Whenever you are creating or making changes to a Chrome extension, create and manage a CHROMEWEBSTORE.md file. You can use the chrome-extensions skill to learn about the format of this file.
使用程式碼代理建構及測試擴充功能
現代化網站指引中包含的擴充功能技能可從三方面協助服務專員：
- 最新的 API 知識：讓服務專員瞭解最新的 API，這些 API 可能是在您使用的模型訓練完成後發布。
- 最佳做法：確保專員能存取我們團隊多年來建構 Chrome 擴充功能所學到的所有最佳做法。
- 提交準備：追蹤您可能需要提交擴充功能至 Chrome 線上應用程式商店的資訊，讓發布作業更輕鬆。
現代網頁指南也包含各種技能，涵蓋您需要的一切，例如效能、無障礙功能和現代 API，有助於提供優質的使用者體驗。舉例來說，內建的 AI API 技能可確保 AI 程式碼代理程式一律使用最新版本 API，並提供使用這些 API 的明確架構規則和硬體限制等額外資訊，以便有效管理模型下載作業、著重安全性，以及採用適當的回退策略。
這項技能也能協助代理商追蹤發布所需的資訊，包括程式碼中要求的各項權限理由。舉例來說，如果您要求程式碼代理程式使用側邊面板 API 建構擴充功能，並發布至 Chrome 線上應用程式商店，代理程式會辨識出需要 sidePanel 權限。然後建立含有理由的 CHROMEWEBSTORE.md 檔案。準備好提交時，您可以查看這份理由，視需要進行調整，然後直接複製到開發人員資訊主頁。
代理程式專用的 Chrome 開發人員工具可讓 AI 程式碼助理在執行中的 Chrome 執行個體中安裝及偵錯擴充功能，具體來說：
- 安裝及解除安裝擴充功能。
- 列出所有已安裝的擴充功能，然後重新載入。
- 觸發擴充功能動作。
- 檢查擴充功能的每個介面 (彈出式視窗、側邊面板、Service Worker)。
以下是提示和影片，說明實際運作方式：
Build a simple "Quick notes" extension that opens a popup text area to save notes and test it in the browser.
在本例中，代理程式應建立 Manifest V3 檔案並要求 storage 權限，因為代理程式知道自己需要保存資料。現在，代理程式可以建構及安裝擴充功能、觀察擴充功能執行情況，並驗證擴充功能的穩定性，您完全不必離開對話介面。
這是簡單的提示範例。如要進一步瞭解各種提示技巧，並找出最適合您用途的技巧，請參閱提示工程指南。
使用 CHROMEWEBSTORE.md 簡化發布流程的提示範例
安裝擴充功能技能並為代理新增指令後，大部分的工作都會完成，但提示越具體，就能在開發階段獲得越好的結果。以下簡要說明如何提示代理程式建立、更新及維護 CHROMEWEBSTORE.md 檔案。
- 首次發布：擴充功能功能齊全，且您想建立初步的商店曝光度。
Prepare the extension for publication on the Chrome Web Store.
- 更新權限和理由：Chrome 線上應用程式商店會強制執行單一用途政策，並要求您為
manifest.json中要求的每項權限提供詳細理由。
We just added the 'declarativeNetRequest' and 'storage' permissions to our manifest. Let's update our store listing.
- 處理商店拒絕：如果擴充功能在審查過程中遭拒或遭到標記，您可以直接向服務專員提供拒絕原因，並要求更新法規遵循中繼資料。
Our extension submission was rejected because our privacy policy doesn't explicitly mention how we handle user data locally. Let's update the privacy policy section in CHROMEWEBSTORE.md to resolve this.
結論
將現代網頁指南技能與代理程式適用的 Chrome 開發人員工具結合使用，不僅能加快建構高品質功能的腳步，還能確保擴充功能穩定無虞，隨時可提交至 Chrome 線上應用程式商店。
在下一個專案中開始試用這些工具，瞭解如何簡化從初始原型到發布的擴充功能開發流程。