代理專用 Chrome 開發人員工具可讓代理啟動瀏覽器工作階段,並使用 MCP 伺服器安裝或與 Chrome 擴充功能互動。這樣一來,程式碼編寫代理程式就能控管擴充功能生命週期:安裝、重新載入及觸發動作。
您不必手動載入未封裝的擴充功能、每次變更程式碼時都點按擴充功能管理頁面中的重新載入按鈕,以及手動觸發擴充功能來測試,只要指示 AI 代理程式自主管理整個程序即可。這能填補靜態程式碼生成和即時擴充功能測試之間的落差。
擴充功能工具可用於下列用途:
- 安裝擴充功能:從本機目錄路徑安裝未封裝的 Chrome 擴充功能。
- 列出擴充功能:擷取所有已安裝 Chrome 擴充功能的清單,包括名稱、ID、版本和啟用狀態。
- 重新載入擴充功能:依 ID 重新載入未封裝的 Chrome 擴充功能,立即套用程式碼變更。
- 觸發動作:根據擴充功能 ID 觸發預設動作,例如開啟選單或執行背景指令碼動作 (請參閱 API 說明文件中的 chrome.action)。
- 解除安裝擴充功能:透過 ID 從瀏覽器工作階段中移除 Chrome 擴充功能。
必要條件
使用擴充功能工具前,請確認以下事項:
- 實驗性旗標:在代理開發人員工具中,擴充功能類別預設為不啟用。您必須使用
--categoryExtensions標記設定 MCP 伺服器。 - 解壓縮的擴充功能:
install_extension等工具需要解壓縮的擴充功能資料夾的絕對路徑,因此非常適合用於本機開發。 擴充功能資料夾的檔案存取權:伺服器只能讀取工作區根目錄中的檔案。這些是 MCP 用戶端提供的根目錄,例如專案目錄。如果用戶端未提供根目錄,伺服器只能存取 OS 暫存目錄。在 macOS 上,這個目錄不是
/tmp。如果擴充功能資料夾位於這些根目錄之外,install_extension會失敗並顯示Access denied錯誤。如要允許其他資料夾,請在伺服器引數中加入--filesystemRoot標記 (別名為--workspace):"args": ["chrome-devtools-mcp@latest", "--categoryExtensions", "--filesystemRoot=/path/to/extensions"]詳情請參閱「允許存取臨時目錄外的檔案」。
Chrome 擴充功能工具的用途
在開發及修正錯誤時,指示代理程式管理擴充功能生命週期。
注意:代理執行步驟是潛在行為的範例。代理的行為可能有所不同。
快速疊代及重新載入擴充功能
每次變更檔案後都手動重新載入擴充功能,會拖慢開發速度。請代理程式套用程式碼修正,並立即重新載入擴充功能,以便在不手動介入的情況下驗證新行為。
提示詞範例:
您可以採用一般做法:
Verify the extension has access to the active tab.
或者,你也可以提供更詳細的資訊:
Update the manifest.json to include the "activeTab" permission. Then, reload the extension with ID 'abc123xyz' and trigger its default action to ensure it works.
代理執行範例:代理編輯檔案系統上的 manifest.json 檔案。接著,系統會使用提供的 ID 叫用 reload_extension 工具。最後,它會呼叫 trigger_extension_action 工具來啟用擴充功能,並確認控制台中未擲回任何權限錯誤。
測試擴充功能在目標網頁上的預設動作
您通常需要測試內容指令碼或擴充功能動作與特定網站的互動情形。如要自動執行這項程序,請指示代理前往網站、安裝擴充功能並觸發。
提示詞範例:
您可以採用一般做法:
Test my extension on example.com and verify it works correctly.
或者,你也可以提供更詳細的資訊:
Navigate to example.com, install the unpacked extension located at '/Users/dev/my-extension', and trigger the extension action. Check the console logs to verify the content script executed correctly.
代理執行範例:代理會使用 navigate_page 導覽至目標網址。然後使用 install_extension 和提供的絕對路徑。載入擴充功能後,系統會執行 trigger_extension_action 來模擬使用者點擊。最後,它會使用 list_console_messages 確認內容指令碼已執行,並產生預期輸出內容。
驗證已安裝的擴充功能並清理
在自動化測試期間,您可能需要確認擴充功能是否正確載入正確版本,或移除擴充功能,確保下次測試時狀態乾淨。
提示詞範例:
Uninstall 'My Test Extension' from the browser.
代理程式執行範例:代理程式使用 list_extensions 工具擷取已安裝的擴充功能清單及其相關中繼資料。並剖析輸出內容,找出與「My Test Extension」相關聯的 ID。然後使用該 ID 搭配 uninstall_extension 工具,安全地從瀏覽器中移除。
建立並測試新的擴充功能
從頭開始建立新的 Chrome 擴充功能時,通常需要建立樣板檔案,並手動將解壓縮的目錄載入瀏覽器進行測試。只要指示代理程式產生初始程式碼、載入擴充功能,並驗證其基本功能,即可略過這項手動設定。
提示詞範例:
Build a Chrome extension that turns the page background gray when I click its icon. Save the files to a 'gray-bg-ext' folder in my project, navigate to example.com, load the extension, and verify that it works.
代理執行範例:代理會建立基本的 Manifest V3 manifest.json,以及監聽 chrome.action.onClicked 事件的背景 Service Worker。接著,系統會前往測試頁面、叫用 install_extension,並使用 trigger_extension_action 模擬使用者點擊。最後,它會檢查 DOM 或擷取螢幕截圖,確認背景已變成灰色,證明樣板正常運作。