透過自動連線功能，將 AI 代理連結至個人瀏覽器

Matthias Rohmer
José Luis Zapata

使用自動連線功能，直接將 AI 代理程式連線至目前使用的瀏覽器執行個體。這樣一來，代理程式就能繼承目前的索引標籤、瀏覽器擴充功能和即時應用程式狀態，藉此略過沙箱限制。

繼承工作流程環境後，代理程式就能從編寫程式碼轉為偵錯即時瀏覽器狀態，且不會遺失工作階段資料。如果您已達到特定應用程式狀態 (例如複雜的結帳程序或手動重現的錯誤)，並希望專員接手技術調查，不必手動重新執行這些步驟，這項功能就非常實用。

啟用自動連線功能前，請先考量以下事項：

  • 安全性和隱私權：啟用自動連線後，服務專員可以存取瀏覽器設定檔中的所有資料，包括開啟的分頁、工作階段儲存空間、本機儲存空間、Cookie，以及透過 JavaScript API 顯示的其他資料。
  • 資料隱私權保障：代理程式伺服器的 Chrome 開發人員工具是本機程序，不會將瀏覽器資料、工作階段權杖或遙測資料傳送給 Google。
  • 信任和提示：請只對信任的代理程式使用這個模式，並謹慎處理提示中包含的資訊。

必要條件

使用自動連線功能前，請確認你具備下列項目/完成以下動作：

  • Chrome 144 以上版本：自動連線功能需要 Chrome 目前版本提供的最新偵錯通訊協定。
  • 正確的 Chrome 通道：根據預設，代理程式會連線至 Chrome 穩定版。 如要使用 Canary 版或 Beta 版，請在設定中指定管道。
  • 已啟用遠端偵錯：手動啟用瀏覽器與代理程式之間的橋接器。
  • 正確設定：您必須更新 MCP 設定，加入 --autoConnect 旗標。

設定自動連線

如要在 MCP 伺服器中設定自動連線功能，請按照下列步驟操作：

  1. 在執行中的 Chrome 瀏覽器中，前往 chrome://inspect/#remote-debugging 並啟用遠端偵錯。

  2. 更新 MCP 設定，加入 --autoConnect 旗標：

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

  3. 提示服務專員與開啟的 Chrome 應用程式互動。當 Chrome 要求允許工作階段時，按一下「允許」。

現在，代理會使用 MCP 伺服器與正在執行的 Chrome 應用程式互動。

自動連線的用途

自動連線可讓您使用無法在沙箱 Chrome 工作階段中使用的工具或狀態。舉例來說，你可以自行前往頁面並登入，而不是要求服務專員登入 (這通常會失敗)。然後請專員接手。

以下章節列出自動連線功能的一些用途範例。

偵錯已驗證的資訊主頁

內部工具和私人資訊主頁通常位於複雜的單一登入 (SSO) 或虛擬私人網路 (VPN) 層後方。沙箱瀏覽器通常需要登入，代理程式無法略過這個步驟。自動連線功能可讓服務專員沿用您目前的工作階段。

提示範例：

I have my company's staging dashboard open in the next tab. Can you look at the
User Analytics chart, find the SVG element for the Friday data point, and tell
me why the tooltip isn't appearing on hover?

代理程式執行範例：代理程式會找出現有的 Chrome 程序、尋找有效的分頁，並檢查無障礙樹狀結構來找出元素。此外，這項工具也可能會使用 JavaScript API 評估特定衝突。

即時修正目前分頁

請勿手動重現錯誤。您不必將重現步驟翻譯成沙箱代理程式的新提示，而是要求代理程式修正您已遇到錯誤的現用頁面。

提示範例：

Look at the current page. The Submit button overlaps with the footer on this
screen size. Generate a fix for the layout and verify it by injecting the CSS
directly into this tab.

代理程式執行範例：由於代理程式已連線至有效視窗，因此會分析版面配置並立即套用修正。畫面上會顯示「繼續」按鈕，確認修正內容有效後，您再更新原始碼。