Agenty AI do kodowania, 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 do kodowania i jak mogą one pomóc w szybszym tworzeniu lepszych rozszerzeń.
Stworzyliśmy umiejętność dla agentów do kodowania, która jest przeznaczona specjalnie do tworzenia rozszerzeń. Ta umiejętność jest częścią naszej szerszej inicjatywy Modern Web Guidance, która zapewnia agentom AI do kodowania wiedzę o platformie internetowej, sprawdzone metody i nowoczesne wzorce interfejsu API.
Tworzenie rozszerzenia to jednak 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 AI do kodowania debugowanie rozszerzeń bezpośrednio w Chrome oraz korzystanie z funkcji debugowania i statystyk skuteczności Narzędzi deweloperskich.
Konfiguracja
Przewodnik po współczesnych technologiach internetowych
Aby korzystać z pakietu umiejętności, zainstaluj przewodnik po współczesnych technologiach internetowych w preferowanym środowisku i dodaj do niego umiejętność rozszerzeń. Oto instrukcje dotyczące niektórych popularnych narzędzi.
CLI
Zalecana instalacja w przypadku większości agentów do kodowania (w tym interfejsu wiersza poleceń Gemini, Claude Code i Codex) odbywa się za pomocą interfejsu wiersza poleceń modern-web-guidance utworzonego przez zespół Chrome. Instalowanie umiejętności za pomocą interfejsu wiersza poleceń modern-web-guidance spowoduje automatyczne aktualizowanie umiejętności.
npx modern-web-guidance@latest install --choose
Spowoduje to uruchomienie interaktywnego kreatora, który zainstaluje umiejętności zgodnie z Twoimi preferencjami. Gdy pojawią się opcje, wybierz agentów do kodowania i wybierz zarówno chrome-extensions, jak i modern-web-guidance.
Antigravity
Podczas instalowania Antigravity możesz wybrać wtyczkę Modern Web Guidance , która zawiera umiejętność rozszerzeń, lub dodać ją, wybierając kolejno Dostosowania > Wtyczki Build With Google > Modern Web Guidance.
Narzędzia deweloperskie w Chrome dla agentów do kodowania
Narzędzia deweloperskie w Chrome dla agentów możesz dodać do wybranego agenta do kodowania jako wtyczkę, rozszerzenie lub serwer MCP.
Oto instrukcje dotyczące niektórych najpopularniejszych agentów.
Antigravity
Aby używać serwera MCP Narzędzi deweloperskich w Chrome, postępuj zgodnie z instrukcjami z dokumentacji Antigravity, aby zainstalować niestandardowy serwer MCP. Dodaj do konfiguracji serwerów MCP te informacje:
{
"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 dotyczące konfigurowania innych agentów znajdziesz w dokumentacji na GitHub Narzędzi deweloperskich w Chrome MCP.
Instrukcje dla agenta CHROMEWEBSTORE.md
Ważną częścią publikowania rozszerzenia jest wypełnienie panelu dewelopera. Umiejętność rozwiązuje ten problem, ponieważ agent do kodowania tworzy i utrzymuje plik CHROMEWEBSTORE.md, który zawiera niezbędne informacje, w tym uzasadnienia każdego uprawnienia wymaganego w kodzie.
Umiejętność zostanie wywołana, gdy użyjesz fraz takich jak „Opublikujmy to” lub „Przygotuj to rozszerzenie do sklepu”, ale aby usprawnić przepływy pracy agenta, dodaj te informacje do instrukcji systemowych agenta (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 do kodowania
Umiejętność rozszerzeń zawarta w przewodniku po współczesnych technologiach internetowych pomaga agentom na 3 sposoby:
- Aktualna wiedza o interfejsie API: uczy agentów o najnowszych interfejsach API, które mogły zostać wydane po wytrenowaniu używanego modelu.
- Sprawdzone metody: zapewnia agentom dostęp do wszystkich sprawdzonych metod, których nasz zespół nauczył się przez lata tworzenia rozszerzeń 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ę.
Przewodnik po współczesnych technologiach internetowych zawiera też umiejętności, które obejmują wszystko, co jest potrzebne do zapewnienia doskonałej obsługi, np. wydajność, ułatwienia dostępu i nowoczesne interfejsy API. Na przykład wbudowane umiejętności interfejsu AI API zapewniają, że agenci AI do kodowania 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, aby umożliwić 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 do kodowania o utworzenie rozszerzenia za pomocą interfejsu API panelu bocznego 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 do przesłania, możesz przejrzeć to 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 uruchomionej instancji Chrome, a konkretnie:
- Instalowanie i odinstalowywanie rozszerzeń.
- Wyświetlanie listy wszystkich zainstalowanych rozszerzeń i ich ponowne wczytywanie.
- Wywoływanie działań rozszerzenia.
- Sprawdzanie każdej 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 tym przypadku agent powinien utworzyć plik (platforma) Manifest V3 i poprosić o uprawnienie storage, ponieważ wie, że musi utrwalać 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. Aby dowiedzieć się więcej o różnych technikach promptów i znaleźć najlepsze rozwiązanie dla swojego przypadku użycia, zapoznaj się z naszym przewodnikiem po inżynierii promptów.
Przykłady promptów, które usprawniają dystrybucję za pomocą CHROMEWEBSTORE.md
Chociaż zainstalowanie umiejętności rozszerzeń i dodanie instrukcji do agenta wykona większość pracy, 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.
- Pierwsza publikacja: gdy rozszerzenie jest w pełni funkcjonalne i chcesz wygenerować 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ń każdego uprawnienia wymaganego w pliku
manifest.json.
We just added the 'declarativeNetRequest' and 'storage' permissions to our manifest. Let's update our store listing.
- Obsługa odrzucenia w sklepie: jeśli rozszerzenie zostanie odrzucone lub oznaczone podczas procesu sprawdzania, możesz podać agentowi przyczynę 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 przewodnika po współczesnych technologiach internetowych z Narzędziami deweloperskimi w Chrome dla agentów pomaga szybciej tworzyć wysokiej jakości funkcje, ale też zapewnia, że rozszerzenie jest stabilne i gotowe do przesłania do Chrome Web Store.
Zacznij eksperymentować z tymi narzędziami w następnym projekcie, aby zobaczyć, jak mogą one usprawnić tworzenie rozszerzeń od początkowego prototypu do publikacji.