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 kodujący może kontrolować cykl życia rozszerzenia: instalowanie, ponowne wczytywanie i wyzwalanie działań.
Zamiast ręcznie wczytywać rozpakowane rozszerzenie, klikać przycisk ponownego wczytania na stronie zarządzania rozszerzeniami za każdym razem, gdy zmieniasz kod, i ręcznie wyzwalać rozszerzenie, aby je przetestować, poproś agenta AI o samodzielne zarządzanie całym procesem. Pozwala to zmniejszyć różnicę między statycznym generowaniem kodu a testowaniem rozszerzeń na żywo.
Za pomocą narzędzi do obsługi rozszerzeń możesz wykonać te czynności:
- Instalowanie rozszerzeń do Chrome: zainstaluj rozpakowane rozszerzenie do Chrome z lokalnej ścieżki katalogu.
- Wyświetlanie listy rozszerzeń do Chrome: pobierz listę wszystkich zainstalowanych rozszerzeń do Chrome, w tym ich nazwę, identyfikator, wersję i stan włączenia.
- Ponowne wczytywanie rozszerzeń do Chrome: ponownie wczytaj rozpakowane rozszerzenie do Chrome według jego identyfikatora, aby natychmiast zastosować zmiany w kodzie aplikacji.
- Wyzwalanie 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 (patrz
chrome.action w dokumentacji interfejsu 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. Dostęp do folderu rozszerzenia: serwer może odczytywać tylko pliki znajdujące się w jego katalogach głównych obszaru roboczego. Są to katalogi główne udostępniane przez klienta MCP, np. katalog projektu. Jeśli klient nie udostępnia katalogów głównych, serwer może uzyskać dostęp tylko do katalogu tymczasowego systemu operacyjnego. W macOS ten katalog nie jest
/tmp. Jeśli folder rozszerzenia znajduje się poza tymi katalogami głównymi, polecenieinstall_extensionzakończy się niepowodzeniem z powodu błęduAccess denied. Aby zezwolić na dostęp do innego folderu, dodaj do argumentów serwera flagę--filesystemRoot(alias--workspace):"args": ["chrome-devtools-mcp@latest", "--categoryExtensions", "--filesystemRoot=/path/to/extensions"]Więcej informacji znajdziesz w artykule Zezwalanie na dostęp do plików poza katalogiem tymczasowym.
Przypadki użycia narzędzi do obsługi rozszerzeń do 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 ponowne wczytywanie rozszerzenia
Ręczne ponowne wczytywanie rozszerzenia po każdej zmianie pliku spowalnia programowanie. Poproś agenta o zastosowanie poprawki kodu i natychmiastowe ponowne wczytanie rozszerzenia, aby sprawdzić nowe zachowanie bez ręcznej interwencji.
Przykładowe polecenie:
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ładowe polecenie:
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ą polecenia navigate_page. Następnie używa polecenia install_extension z podaną ścieżką bezwzględną. Po wczytaniu rozszerzenia wykonuje polecenie trigger_extension_action, aby zasymulować kliknięcie użytkownika. Na koniec używa polecenia list_console_messages, aby potwierdzić, że skrypt treści został uruchomiony i wygenerował oczekiwane dane wyjściowe.
Sprawdzanie zainstalowanych rozszerzeń i czyszczenie
Podczas testów automatycznych może być konieczne sprawdzenie, czy rozszerzenie zostało prawidłowo wczytane z odpowiednią wersją, lub usunięcie go, aby zapewnić czysty stan na potrzeby następnego testu.
Przykładowe polecenie:
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 do Chrome od zera zwykle wymaga utworzenia plików szablonowych 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 podstawowej funkcjonalności w jednym kroku.
Przykładowe polecenie:
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.
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 polecenie install_extension i używa polecenia 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 szablon działa.