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, dziedzicząc bieżące karty, rozszerzenia przeglądarki i stan aplikacji na żywo.

Dziedziczenie kontekstu przepływu pracy umożliwia agentowi przejście od pisania kodu do debugowania stanu przeglądarki na żywo 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 wykonywania 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 jest procesem lokalnym i nie wysyła do Google danych przeglądania, 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 umieszczasz w promptach.

Wymagania wstępne

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

  • Chrome 144 lub nowszy: automatyczne łączenie wymaga nowoczesnych protokołów debugowania, które są dostępne w aktualnych wersjach Chrome.
  • Prawidłowy kanał Chrome: domyślnie agent łączy się z wersją stabilną Chrome. Aby używać wersji Canary lub Beta, określ kanał w konfiguracji.
  • Włączone debugowanie zdalne: ręcznie włącz połączenie między przeglądarką a agentem.
  • Prawidłowa konfiguracja: musisz zaktualizować konfigurację MCP, aby uwzględnić flagę --autoConnect.

Konfigurowanie automatycznego łączenia

Aby skonfigurować funkcję automatycznego łączenia na serwerze MCP, wykonaj te czynności:

  1. W uruchomionej przeglądarce Chrome otwórz 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 pozwolenie na sesję, kliknij Zezwól.

Agent używa teraz serwera MCP do interakcji z uruchomioną aplikacją Chrome.

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 kontroli.

W kolejnych sekcjach znajdziesz kilka przykładów przypadków użycia funkcji automatycznego łączenia.

Debugowanie paneli informacyjnych wymagających uwierzytelnienia

Narzędzia wewnętrzne i prywatne panele informacyjne 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 dziedziczy 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ładowe wykonanie przez agenta: agent identyfikuje istniejący proces Chrome, znajduje aktywną kartę i sprawdza drzewo dostępności, aby zlokalizować elementy. Może też używać interfejsów API JavaScript 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 piaskownicy, możesz poprosić agenta o naprawienie błędu na aktywnej stronie, na której już go napotkałeś.

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ładowe wykonanie przez agenta: ponieważ agent jest połączony z aktywnym oknem, analizuje układ i natychmiast stosuje poprawkę. Na ekranie zobaczysz, jak przycisk się przesuwa, co potwierdza, że poprawka działa, zanim zaktualizujesz kod źródłowy.