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

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

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

我們為程式設計代理建立了一項技能，專門用於開發擴充功能。這項技能是 Modern Web Guidance 計畫的一部分，旨在為 AI 程式設計代理提供網頁平台專業知識、最佳做法和現代 API 模式。

不過，建構擴充功能只是第一步。為協助您驗證程式碼是否正常運作，代理專用 Chrome 開發人員工具可讓 AI 程式開發輔助直接在 Chrome 中偵錯擴充功能，並運用開發人員工具的偵錯功能和效能深入分析。

設定

Modern Web Guidance

如要使用技能套件，請在偏好的環境中安裝 Modern Web Guidance，並新增擴充功能技能。以下是幾種熱門工具的操作說明。

CLI

對於大多數程式設計代理 (包括 Gemini CLI、Claude Code 和 Codex)，建議透過 Chrome 團隊建構的 modern-web-guidance CLI 進行安裝。透過 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. 在啟動時，或依序前往「設定」 >「自訂」，在「Build with Google」下方啟用「Chrome 開發人員工具」。這只會安裝 Chrome 開發人員工具技能，不會安裝 MCP 伺服器。

   

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

   

   

   

4. 按一下「開啟 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 檔案，追蹤必要資訊，包括程式碼中要求的每項權限要求理由。

當您使用「發布這個」或「準備這個擴充功能，以便上架到商店」等詞組時，就會觸發這項技能。不過，為了簡化 Agentic Workflows，請將下列內容新增至代理的系統指令 (例如 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.

使用程式設計代理建構及測試擴充功能

Modern Web Guidance 包含的擴充功能技能，可透過下列三種主要方式協助代理：

• 最新的 API 知識：向代理傳授最新的 API 知識，這些 API 可能是在您使用的模型訓練完成後才發布。
• 最佳做法：確保代理程式能取得我們團隊多年來建構 Chrome 擴充功能時，所學到的所有最佳做法。
• 提交準備：追蹤將擴充功能提交至 Chrome 線上應用程式商店時可能需要的資訊，讓發布作業更輕鬆。

Modern Web Guidance 也包含多項技能，涵蓋提供優質使用者體驗所需的一切，例如效能、無障礙功能和新式 API。舉例來說，內建的 AI API 技能可確保 AI 程式設計代理一律使用最新版本的 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.

結論

結合 Modern Web Guidance 技能和代理專用 Chrome 開發人員工具，不僅能加快建構優質功能，還能確保擴充功能穩定，可提交至 Chrome 線上應用程式商店。

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