Agenty kodowania AI, takie jak Antigravity, mogą teraz generować kod rozszerzenia z imponującą dokładnością. Aby jednak w pełni wykorzystać ich potencjał i zapewnić wysoką jakość wyników, musisz dostarczyć im odpowiedni kontekst i narzędzia.
Z tego przewodnika dowiesz się, jak skonfigurować odpowiednie narzędzia w agentach kodujących i jak mogą one pomóc w szybszym tworzeniu lepszych rozszerzeń.
Stworzyliśmy umiejętność kodowania agentów zaprojektowaną specjalnie z myślą o tworzeniu rozszerzeń. Ta umiejętność jest częścią naszej szerszej inicjatywy Modern Web Guidance, która zapewnia agentom kodowania AI wiedzę o platformie internetowej, sprawdzone metody i nowoczesne wzorce interfejsów API.
Jednak utworzenie rozszerzenia to dopiero pierwszy krok. Aby pomóc Ci sprawdzić, czy kod działa zgodnie z oczekiwaniami, narzędzia deweloperskie w Chrome dla agentów umożliwiają asystentom kodowania opartym na AI debugowanie rozszerzeń bezpośrednio w Chrome oraz korzystanie z funkcji debugowania i statystyk wydajności narzędzi deweloperskich.
Konfiguracja
Wskazówki dotyczące nowoczesnych stron internetowych
Aby użyć pakietu umiejętności, zainstaluj w wybranym środowisku Modern Web Guidance i dodaj do niego umiejętność rozszerzeń. Poniżej znajdziesz instrukcje dotyczące kilku popularnych narzędzi.
Interfejs wiersza poleceń
Zalecana instalacja większości agentów do kodowania (w tym interfejsu wiersza poleceń Gemini, Claude Code i Codex) odbywa się za pomocą modern-web-guidanceinterfejsu wiersza poleceń stworzonego przez zespół Chrome. Zainstalowanie umiejętności za pomocą interfejsu modern-web-guidance CLI spowoduje, że będą one automatycznie aktualizowane.
npx modern-web-guidance@latest install --choose
Uruchomi to interaktywnego kreatora, który zainstaluje umiejętności zgodnie z Twoimi preferencjami. Gdy pojawią się opcje, wybierz agentów kodujących i kliknij chrome-extensions oraz modern-web-guidance.
Antigravity
Podczas instalowania Antigravity możesz wybrać wtyczkę Modern Web Guidance, która obejmuje umiejętność rozszerzeń, lub dodać ją, wybierając Dostosowywanie > Wtyczki Google > Modern Web Guidance.
Narzędzia deweloperskie w Chrome dla agentów kodujących
Narzędzia deweloperskie w Chrome dla agentów możesz dodać do wybranego agenta kodującego jako wtyczkę, rozszerzenie lub serwer MCP.
Poniżej znajdziesz instrukcje dotyczące kilku najpopularniejszych agentów.
Antigravity
Aby używać serwera MCP w Narzędziach deweloperskich w Chrome, postępuj zgodnie z instrukcjami z dokumentacji Antigravity dotyczącymi instalowania niestandardowego serwera MCP. Dodaj do konfiguracji serwerów MCP te elementy:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--category-extensions",
"-y"
]
}
}
}
Claude Code
claude mcp add chrome-devtools --scope project -- npx chrome-devtools-mcp@latest --categoryExtensions
Inni agenci
Instrukcje konfigurowania innych agentów znajdziesz w dokumentacji na GitHubie MCP Narzędzi deweloperskich w Chrome.
Instrukcje dla agenta CHROMEWEBSTORE.md
Ważnym elementem publikowania rozszerzenia jest wypełnienie Panelu dewelopera. Umiejętność ta rozwiązuje ten problem, umożliwiając agentowi kodowania tworzenie i aktualizowanie pliku CHROMEWEBSTORE.md, który śledzi niezbędne informacje, w tym uzasadnienia każdej prośby o uprawnienia w kodzie.
Umiejętność zostanie aktywowana, gdy użyjesz wyrażeń takich jak „Opublikujmy to” lub „Przygotuj to rozszerzenie do sklepu”. Aby usprawnić przepływy pracy agenta, dodaj do instrukcji systemowych agenta te informacje (np. ~/.gemini/GEMINI.md w przypadku Antigravity lub ~/.claude/CLAUDE.md w przypadku Claude):
Whenever you are creating or making changes to a Chrome extension, create and manage a CHROMEWEBSTORE.md file. You can use the chrome-extensions skill to learn about the format of this file.
Tworzenie i testowanie rozszerzenia za pomocą agentów kodujących
Rozszerzenie umiejętności zawarte w przewodniku po nowoczesnych stronach internetowych pomaga pracownikom obsługi klienta na 3 kluczowe sposoby:
- Aktualna wiedza o interfejsach API: uczy agentów o najnowszych interfejsach API, które mogły zostać udostępnione po wytrenowaniu używanego przez Ciebie modelu.
- Sprawdzone metody: dzięki temu agenci mają dostęp do wszystkich sprawdzonych metod, których nasz zespół nauczył się przez lata tworzenia rozszerzeń do Chrome.
- Gotowość do przesłania: śledzi informacje, które mogą być potrzebne do przesłania rozszerzenia do [sklepu] Chrome Web Store, co ułatwia dystrybucję.
W przewodniku po nowoczesnych stronach internetowych znajdziesz też umiejętności, które obejmują wszystko, co jest potrzebne do zapewnienia doskonałej wygody użytkownikom, np. wydajność, ułatwienia dostępu i nowoczesne interfejsy API. Na przykład wbudowane umiejętności interfejsu AI API zapewniają, że agenci kodowania AI zawsze używają najnowszej wersji interfejsu API wraz z dodatkowymi informacjami o wyraźnych regułach architektury i ograniczeniach sprzętowych dotyczących korzystania z tych interfejsów API. Umożliwia to efektywne zarządzanie pobieraniem modeli, skupienie się na bezpieczeństwie i płynne strategie rezerwowe.
Umiejętność pomaga też agentowi śledzić informacje niezbędne do publikowania, w tym uzasadnienia każdego uprawnienia wymaganego w kodzie. Jeśli na przykład poprosisz agenta kodującego o utworzenie rozszerzenia za pomocą interfejsu Side Panel API i opublikowanie go w Chrome Web Store, agent rozpozna, że potrzebuje uprawnienia sidePanel. Następnie utworzy plik CHROMEWEBSTORE.md z uzasadnieniem. Gdy wszystko będzie gotowe, możesz sprawdzić uzasadnienie, wprowadzić ewentualne zmiany i skopiować je bezpośrednio do panelu dewelopera.
Narzędzia deweloperskie w Chrome dla agentów umożliwiają asystentom AI do kodowania instalowanie i debugowanie rozszerzeń w działającej instancji Chrome, a w szczególności:
- instalować i odinstalowywać rozszerzenia;
- Wyświetl wszystkie zainstalowane rozszerzenia i załaduj je ponownie.
- wywoływać działania rozszerzeń,
- Sprawdź każdą powierzchnię rozszerzenia (wyskakujące okienko, panel boczny, skrypt service worker).
Oto prompt i film pokazujący, jak to działa w praktyce:
Build a simple "Quick notes" extension that opens a popup text area to save notes and test it in the browser.
W takim przypadku agent powinien utworzyć plik (platforma) Manifest V3 i poprosić o uprawnienie storage, ponieważ wie, że musi przechowywać dane. Agent może teraz utworzyć rozszerzenie, zainstalować je, obserwować jego działanie i sprawdzić jego stabilność bez opuszczania interfejsu czatu.
To prosty przykład prompta. Więcej informacji o różnych technikach promptowania i o tym, co najlepiej sprawdzi się w Twoim przypadku, znajdziesz w naszym przewodniku po inżynierii promptów.
Przykłady promptów ułatwiające dystrybucję za pomocą pliku CHROMEWEBSTORE.md
Instalacja rozszerzenia i dodanie instrukcji do agenta wykonają większość pracy, ale precyzyjne prompty mogą przynieść lepsze wyniki na danym etapie rozwoju. Oto krótki przewodnik po tym, jak poprosić agenta o utworzenie, zaktualizowanie i utrzymanie pliku CHROMEWEBSTORE.md.
- Pierwsze opublikowanie: gdy rozszerzenie jest w pełni funkcjonalne i chcesz utworzyć początkową obecność w sklepie.
Prepare the extension for publication on the Chrome Web Store.
- Aktualizowanie uprawnień i uzasadnień: Chrome Web Store egzekwuje zasadę jednego celu i wymaga szczegółowych uzasadnień dla każdego uprawnienia, o które prosisz w
manifest.json.
We just added the 'declarativeNetRequest' and 'storage' permissions to our manifest. Let's update our store listing.
- Postępowanie w przypadku odrzucenia w sklepie: jeśli rozszerzenie zostanie odrzucone lub oznaczone podczas procesu sprawdzania, możesz podać agentowi powód odrzucenia i poprosić go o zaktualizowanie metadanych zgodności.
Our extension submission was rejected because our privacy policy doesn't explicitly mention how we handle user data locally. Let's update the privacy policy section in CHROMEWEBSTORE.md to resolve this.
Podsumowanie
Połączenie umiejętności z zakresu nowoczesnych wskazówek dotyczących internetu z narzędziami deweloperskimi w Chrome dla agentów pomaga szybciej tworzyć wysokiej jakości funkcje, a także zapewnia stabilność rozszerzenia i jego gotowość do przesłania do Chrome Web Store.
Wypróbuj te narzędzia w kolejnym projekcie, aby sprawdzić, jak mogą usprawnić tworzenie rozszerzeń od początkowego prototypu po publikację.