Połącz agenta AI z osobistą przeglądarką za pomocą automatycznego łączenia

Połącz agenta AI bezpośrednio z aktywną instancją przeglądarki za pomocą funkcji automatycznego łączenia. Dzięki temu agent może ominąć ograniczenia piaskownicy, przejmując bieżące karty, rozszerzenia przeglądarki i stan aplikacji na żywo.

Przejęcie kontekstu przepływu pracy umożliwia agentowi przejście od pisania kodu do debugowania stanu aktywnej przeglądarki bez utraty danych sesji. Jest to przydatne, gdy osiągniesz już określony stan aplikacji (np. złożony proces płatności lub ręcznie odtworzony błąd) i chcesz, aby agent przejął dochodzenie techniczne bez konieczności ręcznego powtarzania tych czynności.

Zanim włączysz automatyczne łączenie, weź pod uwagę te kwestie:

  • Bezpieczeństwo i prywatność: gdy automatyczne łączenie jest aktywne, agent ma dostęp do wszystkich danych w profilu przeglądarki, w tym do otwartych kart, pamięci sesji, pamięci lokalnej, plików cookie i innych danych udostępnianych przez interfejsy API JavaScript.
  • Zapewnienie prywatności danych: serwer Narzędzi deweloperskich w Chrome dla agentów to proces lokalny, który nie wysyła do Google danych przeglądarki, tokenów sesji ani danych telemetrycznych.
  • Zaufanie i prompty: używaj tego trybu tylko w przypadku agentów, którym ufasz, i uważaj na informacje, które podajesz w promptach.

Wymagania wstępne

Zanim zaczniesz korzystać z funkcji automatycznego łączenia, upewnij się, że masz:

  • Chrome 144 i nowsze: automatyczne łączenie wymaga nowoczesnych protokołów debugowania dostępnych w aktualnych wersjach Chrome.
  • Prawidłowy kanał Chrome: agent domyślnie łączy się z wersją stabilną Chrome. Aby używać wersji Canary lub Beta, określ kanał w konfiguracji.
  • Włączono debugowanie zdalne: ręcznie włącz most między przeglądarką a agentem.
  • Prawidłowa konfiguracja: musisz zaktualizować konfigurację MCP, aby uwzględnić flagę --autoConnect. Więcej informacji znajdziesz w sekcji Konfiguracja.

Konfigurowanie automatycznego łączenia

Aby skonfigurować funkcję automatycznego łączenia na serwerze MCP:

  1. W uruchomionej przeglądarce Chrome otwórz stronę chrome://inspect/#remote-debugging i włącz debugowanie zdalne.
  2. Zaktualizuj konfigurację MCP, aby uwzględnić flagę --autoConnect:

    {
      "mcpServers": {
        "chrome-devtools": {
          "command": "npx",
          "args": ["chrome-devtools-mcp@latest", "--autoConnect"]
        }
      }
    }
    
  3. Poproś agenta o interakcję z otwartą aplikacją Chrome. Gdy Chrome poprosi o zezwolenie na sesję, kliknij Zezwól.

Agent używa teraz serwera MCP do interakcji z działającą aplikacją Chrome. Więcej informacji o opcjach konfiguracji znajdziesz w przewodniku po konfiguracji.

Przypadki użycia automatycznego łączenia

Automatyczne łączenie umożliwia korzystanie z narzędzi lub stanów, których nie można używać w sesjach Chrome w piaskownicy. Na przykład zamiast prosić agenta o zalogowanie się (co często się nie udaje), możesz samodzielnie przejść na stronę i się zalogować. Następnie poproś agenta o przejęcie rozmowy.

W sekcjach poniżej znajdziesz kilka przykładów zastosowań funkcji automatycznego łączenia.

Debugowanie uwierzytelnionych paneli

Narzędzia wewnętrzne i prywatne panele często znajdują się za złożonymi warstwami logowania jednokrotnego (SSO) lub wirtualnej sieci prywatnej (VPN). Przeglądarka w piaskownicy zwykle wymaga logowania, którego agent nie może pominąć. Dzięki automatycznemu łączeniu agent przejmuje aktywną sesję.

Przykładowy prompt:

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?

Przykład działania agenta: agent identyfikuje istniejący proces Chrome, znajduje aktywną kartę i sprawdza drzewo ułatwień dostępu, aby zlokalizować elementy. Może też używać interfejsów JavaScript API do oceny konkretnych konfliktów.

Poprawianie bieżącej karty na żywo

Unikaj ręcznego odtwarzania błędów. Zamiast tłumaczyć kroki odtwarzania na nowy prompt dla agenta w środowisku piaskownicy, możesz poprosić agenta o naprawienie błędu na aktywnej stronie, na której już wystąpił.

Przykładowy prompt:

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.

Przykład działania agenta: ponieważ jest on połączony z aktywnym oknem, analizuje układ i natychmiast wprowadza poprawkę. Na ekranie zobaczysz przycisk, który potwierdzi, że poprawka działa, zanim zaktualizujesz kod źródłowy.