Narzędzia deweloperskie w Chrome dla agentów umożliwiają agentowi rozpoczęcie sesji w przeglądarce oraz instalowanie rozszerzeń do Chrome i wchodzenie z nimi w interakcje za pomocą serwera MCP. Dzięki temu agent kodowania może kontrolować cykl życia rozszerzenia: instalować je, przeładowywać i wywoływać działania.
Zamiast ręcznie wczytywać rozszerzenie bez pakietu, klikać przycisk przeładowania na stronie zarządzania rozszerzeniami za każdym razem, gdy zmieniasz kod, i ręcznie wywoływać rozszerzenie, aby je przetestować, możesz poprosić agenta AI o samodzielne zarządzanie całym procesem. Dzięki temu można połączyć statyczne generowanie kodu z testowaniem rozszerzeń na żywo.
Za pomocą narzędzi do obsługi rozszerzeń możesz wykonywać te czynności:
- Instalowanie rozszerzeń: zainstaluj rozpakowane rozszerzenie Chrome z lokalnej ścieżki katalogu.
- Wyświetlanie listy rozszerzeń: pobierz listę wszystkich zainstalowanych rozszerzeń Chrome, w tym ich nazwę, identyfikator, wersję i stan włączenia.
- Przeładowywanie rozszerzeń: przeładuj rozpakowane rozszerzenie Chrome według jego identyfikatora, aby natychmiast zastosować zmiany w kodzie.
- Wywoływanie działań: wywołaj domyślne działanie rozszerzenia według jego identyfikatora,
np. otwórz menu lub wykonaj działanie skryptu działającego w tle (zobacz
chrome.action w dokumentacji
API).
- Odinstalowywanie rozszerzeń: Usuń rozszerzenie do Chrome z sesji przeglądarki według jego identyfikatora.
Wymagania wstępne
Zanim zaczniesz korzystać z narzędzi do obsługi rozszerzeń, upewnij się, że masz:
- Flaga eksperymentalna: kategoria Rozszerzenia nie jest domyślnie aktywna w Narzędziach deweloperskich dla agentów. Musisz skonfigurować serwer MCP za pomocą flagi
--categoryExtensions. - Rozpakowane rozszerzenia: narzędzia takie jak
install_extensionwymagają bezwzględnej ścieżki do rozpakowanego folderu rozszerzenia, co sprawia, że idealnie nadają się do lokalnego programowania.
Przypadki użycia narzędzi do obsługi rozszerzeń Chrome
Poproś agenta o zarządzanie cyklem życia rozszerzenia podczas programowania i naprawiania błędów.
Uwaga: kroki wykonywane przez agenta to przykłady potencjalnego zachowania. Twój agent może działać inaczej.
Szybkie iterowanie i przeładowywanie rozszerzenia
Ręczne przeładowywanie rozszerzenia po każdej zmianie pliku spowalnia programowanie. Poproś agenta o zastosowanie poprawki kodu i natychmiastowe przeładowanie rozszerzenia, aby sprawdzić nowe działanie bez ręcznej interwencji.
Przykładowy prompt:
Możesz zastosować ogólne podejście:
Verify the extension has access to the active tab.
Możesz też podać więcej szczegółów:
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.
Przykładowe wykonanie przez agenta: agent edytuje plik manifest.json w systemie plików. Następnie wywołuje narzędzie reload_extension za pomocą podanego identyfikatora.
Na koniec wywołuje narzędzie trigger_extension_action, aby aktywować rozszerzenie i sprawdzić, czy w konsoli nie występują błędy uprawnień.
Testowanie domyślnego działania rozszerzenia na stronie docelowej
Często trzeba sprawdzić, jak skrypt treści lub działanie rozszerzenia wchodzi w interakcje z konkretną witryną. Zautomatyzuj ten proces, prosząc agenta o przejście do witryny, zainstalowanie rozszerzenia i jego wywołanie.
Przykładowy prompt:
Możesz zastosować ogólne podejście:
Test my extension on example.com and verify it works correctly.
Możesz też podać więcej szczegółów:
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.
Przykładowe wykonanie przez agenta: agent przechodzi do docelowego adresu URL za pomocą narzędzia navigate_page. Następnie używa narzędzia install_extension z podaną ścieżką bezwzględną. Po wczytaniu rozszerzenia wykonuje narzędzie trigger_extension_action, aby zasymulować kliknięcie użytkownika. Na koniec używa narzędzia list_console_messages, aby potwierdzić, że skrypt treści został uruchomiony i wygenerował oczekiwane dane wyjściowe.
Sprawdzanie zainstalowanych rozszerzeń i zwalnianie miejsca
Podczas testowania automatycznego może być konieczne sprawdzenie, czy rozszerzenie jest prawidłowo wczytane w odpowiedniej wersji, lub usunięcie go, aby zapewnić czysty stan do następnego testu.
Przykładowy prompt:
Uninstall 'My Test Extension' from the browser.
Przykładowe wykonanie przez agenta: agent używa narzędzia list_extensions, aby pobrać listę zainstalowanych rozszerzeń i ich metadanych. Analizuje dane wyjściowe, aby znaleźć identyfikator powiązany z rozszerzeniem „My Test Extension”. Następnie używa narzędzia uninstall_extension z tym identyfikatorem, aby bezpiecznie usunąć rozszerzenie z przeglądarki.
Tworzenie nowego rozszerzenia i jego testowanie
Zaczynanie nowego rozszerzenia Chrome od zera zwykle wymaga utworzenia plików boilerplate i ręcznego wczytania rozpakowanego katalogu do przeglądarki w celu przetestowania. Pomiń tę ręczną konfigurację, prosząc agenta o wygenerowanie kodu początkowego, wczytanie rozszerzenia i sprawdzenie jego podstawowych funkcji w jednym kroku.
Przykładowy prompt:
Build a Chrome extension that turns the page background gray when I click its icon. Save the files to '/tmp/gray-bg-ext', navigate to example.com, load the extension, and verify that it works.
Przykładowe wykonanie przez agenta: agent tworzy podstawowy plik manifest.json w formacie Manifest V3 oraz skrypt service worker działający w tle, który nasłuchuje zdarzenia chrome.action.onClicked. Następnie przechodzi do strony testowej, wywołuje narzędzie install_extension i używa narzędzia trigger_extension_action, aby zasymulować kliknięcie użytkownika. Na koniec sprawdza DOM lub robi zrzut ekranu, aby potwierdzić, że tło zmieniło kolor na szary, co oznacza, że kod boilerplate działa.