使用程式碼編寫代理建構擴充功能

Antigravity 等 AI 程式設計代理程式現在可以生成準確度極高的擴充功能程式碼。不過，如要充分發揮這些代理程式的潛力並確保結果品質優良，您必須提供正確的背景資訊和工具。

本指南說明如何在程式碼編寫代理程式中設定合適的工具，以及這些工具如何協助您更快建構更優質的擴充功能。

我們為程式碼代理建立了一項技能，專門用於擴充功能開發。這項技能是我們更廣泛的「現代網頁指引」計畫的一部分，可為 AI 程式碼代理提供網頁平台專業知識、最佳做法和現代 API 模式。

但建構擴充功能只是第一步。為協助您確認程式碼是否正常運作，代理程式專用的 Chrome 開發人員工具可讓 AI 程式碼輔助工具直接在 Chrome 中偵錯擴充功能，並運用開發人員工具的偵錯功能和效能洞察資料。

設定

Modern Web Guidance

如要使用技能包，請在偏好的環境中安裝 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

1. 下載 Antigravity IDE (不建議使用 Antigravity，因為您無法手動編輯 MCP 伺服器設定)。

2. 在啟動時，或在「設定」 >「自訂」的「使用 Google 建構」下方，啟用「Chrome 開發人員工具」。這只會安裝 Chrome 開發人員工具技能，但不會安裝 MCP 伺服器。

   

3. 如要新增 Chrome 開發人員工具 MCP 伺服器，請依序前往「設定」 >「自訂」，按一下「新增 MCP 伺服器」按鈕，然後搜尋 Chrome 開發人員工具。

   

   

   

4. 按一下「Open MCP Config」(開啟 MCP 設定)，開啟 MCP 伺服器設定。請注意，您必須關閉設定，才能在 IDE 中查看設定檔。

   

5. 新增下列兩個設定參數：--categoryExtensions (啟用擴充功能工具) 和 --autoConnect (啟用連線至現有 Chrome 設定檔，使用 Chrome 內建 AI API 或需要登入時，必須啟用此參數)。

   {
    "mcpServers": {
      "chrome-devtools-mcp": {
        "args": [
          "-y",
          "chrome-devtools-mcp@latest",
          "--categoryExtensions",
          "--autoConnect"
        ],
        "command": "npx"
      }
    }
   }
   

6. 如要啟用遠端偵錯功能，請開啟 Chrome，前往 chrome://inspect/#remote-debugging 並選取「允許這個瀏覽器執行個體進行遠端偵錯」。

   

7. 重新啟動 Antigravity IDE。

8. 建立新的工作區，然後建立測試提示詞：「Create a hello world Chrome 擴充功能。使用 Chrome 開發人員工具進行測試。當服務專員在瀏覽器中啟動擴充功能測試時，Chrome 會顯示對話方塊，要求您授予遠端偵錯權限。選取「允許」。啟用遠端偵錯工作階段後，Chrome 會顯示「Chrome 目前受到自動測試軟體控制」橫幅。

<figure>
  <img src="image/antigravityide--u84rk62f5t9.png" alt="The remote debugging warning banner and approval popup dialog in Chrome." class="screenshot" width="800">
  <figcaption>The remote debugging banner indicating automated browser control is active.</figcaption>
</figure>

Claude Code

  claude mcp add chrome-devtools --scope project -- npx chrome-devtools-mcp@latest --categoryExtensions --autoConnect

其他代理

如需設定其他代理程式的說明，請參閱 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 的明確架構規則和硬體限制等額外資訊，以便有效管理模型下載作業、著重安全性，以及採用優雅的回退策略。

這項技能也能協助代理程式追蹤發布所需的資訊，包括程式碼中要求的各項權限的理由。舉例來說，如果您要求程式碼代理程式使用 Side Panel 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 線上應用程式商店。

在下一個專案中試用這些工具，看看如何簡化擴充功能開發流程，從初步原型到發布都能輕鬆完成。