Tworzenie rozszerzeń za pomocą agentów kodujących

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 uzyskać wysokiej jakości wyniki, musisz zapewnić im odpowiedni kontekst i narzędzia.

Z tego przewodnika dowiesz się, jak skonfigurować odpowiednie narzędzia w agentach kodowania i jak mogą one pomóc w szybszym tworzeniu lepszych rozszerzeń.

Stworzyliśmy umiejętność dla agentów kodowania, która została zaprojektowana specjalnie do tworzenia rozszerzeń. Ta umiejętność jest częścią naszej szerszej inicjatywy Przewodnik po współczesnych technologiach internetowych, 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 wspomagania kodowania opartym na AI debugowanie rozszerzeń bezpośrednio w Chrome i korzystanie z funkcji debugowania oraz statystyk wydajności Narzędzi deweloperskich.

Konfiguracja

Przewodnik po współczesnych technologiach internetowych

Aby używać pakietu umiejętności, zainstaluj Przewodnik po współczesnych technologiach internetowych w preferowanym środowisku i dodaj do niego umiejętność rozszerzeń. Poniżej znajdziesz instrukcje dotyczące niektórych popularnych narzędzi.

Interfejs wiersza poleceń

W przypadku większości agentów kodujących (w tym interfejsu wiersza poleceń Gemini, Claude Code i Codex) zalecamy instalację za pomocą interfejsu wiersza poleceń modern-web-guidance utworzonego przez zespół Chrome. Instalowanie umiejętności za pomocą interfejsu wiersza poleceń modern-web-guidance będzie automatycznie aktualizować umiejętności.

  npx modern-web-guidance@latest install --choose

Uruchomi się interaktywny kreator, który pomoże Ci zainstalować umiejętności zgodnie z Twoimi preferencjami. Gdy pojawią się opcje, wybierz agentów kodowania oraz chrome-extensions i modern-web-guidance.

Antigravity

Podczas instalowania Antigravity możesz wybrać wtyczkę Przewodnik po współczesnych technologiach internetowych, która zawiera umiejętność rozszerzeń, lub dodać ją, klikając Dostosowania > Wtyczki Build with Google > Przewodnik po współczesnych technologiach internetowych.

Narzędzia deweloperskie w Chrome dla agentów kodujących

Narzędzia deweloperskie w Chrome dla agentów możesz dodać do wybranego agenta kodowania jako wtyczkę, rozszerzenie lub serwer MCP.

Poniżej znajdziesz instrukcje dotyczące niektórych z najpopularniejszych agentów.

Antigravity

1. Pobierz Antigravity IDE (nie zalecamy korzystania z Antigravity, ponieważ nie pozwala na ręczne edytowanie konfiguracji serwera MCP).

2. Podczas uruchamiania lub w sekcji Ustawienia > Dostosowania w sekcji Build with Google włącz Narzędzia deweloperskie w Chrome. Spowoduje to zainstalowanie tylko umiejętności Narzędzia deweloperskie w Chrome, ale nie serwera MCP.

   

3. Aby dodać serwer MCP Narzędzi deweloperskich w Chrome, kliknij Ustawienia > Dostosowywanie, kliknij przycisk Dodaj serwer MCP i wyszukaj Narzędzia deweloperskie w Chrome.

   

   

   

4. Kliknij Otwórz konfigurację MCP, aby otworzyć konfigurację serwera MCP. Pamiętaj, że aby zobaczyć plik konfiguracji w IDE, musisz zamknąć ustawienia.

   

5. Dodaj te 2 parametry konfiguracji: --categoryExtensions (aby włączyć narzędzia rozszerzeń) i --autoConnect (aby umożliwić połączenie z istniejącym profilem Chrome, co jest wymagane w przypadku korzystania z wbudowanych interfejsów API AI w Chrome lub wymagania logowania).

   {
    "mcpServers": {
      "chrome-devtools-mcp": {
        "args": [
          "-y",
          "chrome-devtools-mcp@latest",
          "--categoryExtensions",
          "--autoConnect"
        ],
        "command": "npx"
      }
    }
   }
   

6. Aby włączyć zdalne debugowanie, otwórz Chrome, przejdź na stronę chrome://inspect/#remote-debugging i wybierz Zezwalaj na zdalne debugowanie w tej instancji przeglądarki.

   

7. Uruchom ponownie Antigravity IDE.

8. Utwórz nowy obszar roboczy i prompt testowy: „Utwórz rozszerzenie do Chrome Hello World. Testowanie za pomocą Narzędzi deweloperskich w Chrome”. Gdy pracownik obsługi klienta rozpocznie testowanie rozszerzenia w przeglądarce, Chrome wyświetli okno z prośbą o uprawnienia do zdalnego debugowania. Wybierz Zezwól. Gdy sesja zdalnego debugowania jest włączona, Chrome wyświetla baner „Przeglądarką Chrome steruje zautomatyzowane oprogramowanie testowe”.

<figure>
  <img src="image/antigravityide--u84rk62f5t9.png" alt="The remote debugging warning banner and approval popup dialog in Chrome." class="screenshot" width="800">
  <figcaption>The remote debugging banner indicating automated browser control is active.</figcaption>
</figure>

Claude Code

  claude mcp add chrome-devtools --scope project -- npx chrome-devtools-mcp@latest --categoryExtensions --autoConnect

Inni agenci

Instrukcje konfigurowania innych agentów znajdziesz w dokumentacji na stronie Chrome DevTools MCP GitHub.

Instrukcje dla agenta CHROMEWEBSTORE.md

Ważną częścią publikowania rozszerzenia jest wypełnienie Panelu dewelopera. Umiejętność rozwiązuje ten problem, ponieważ agent kodowania tworzy i utrzymuje plik 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 jednak usprawnić Agentic Workflows, dodaj do instrukcji systemowych agenta (np. ~/.gemini/GEMINI.md w przypadku Antigravity lub ~/.claude/CLAUDE.md w przypadku Claude) te informacje:

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 kodowania

Umiejętność rozszerzenia zawarta w Przewodniku po współczesnych technologiach internetowych pomaga agentom na 3 kluczowe sposoby:

• Aktualna wiedza o interfejsach API: uczy agentów o najnowszych interfejsach API, które mogły zostać wydane po wytrenowaniu używanego modelu.
• Sprawdzone metody: agenci mają dostęp do wszystkich sprawdzonych metod, które nasz zespół opracował przez lata tworzenia rozszerzeń do Chrome.
• Gotowość do przesłania: śledzi informacje, które mogą być potrzebne do przesłania rozszerzenia do Chrome Web Store, co ułatwia dystrybucję.

Przewodnik po współczesnych technologiach internetowych obejmuje też umiejętności, które pozwalają zapewnić użytkownikom doskonałe wrażenia, takie jak wydajność, ułatwienia dostępu i nowoczesne interfejsy API. Na przykład wbudowane umiejętności interfejsu AI API zapewniają, że agenty kodowania AI zawsze używają najnowszej wersji interfejsu API wraz z dodatkowymi informacjami o jednoznacznych regułach architektonicznych i ograniczeniach sprzętowych dotyczących korzystania z tych interfejsów API, aby umożliwić efektywne zarządzanie pobieraniem modeli, skupić się na bezpieczeństwie i strategiach łagodnego przechodzenia na tryb awaryjny.

Ta umiejętność pomaga też agentowi śledzić informacje niezbędne do publikacji, w tym uzasadnienia każdej prośby o uprawnienia 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 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 wspomagania kodowania AI instalowanie i debugowanie rozszerzeń w działającej instancji Chrome, a konkretnie:

• instalować i odinstalowywać rozszerzenia;
• Wyświetl listę wszystkich zainstalowanych rozszerzeń i ponownie je załaduj.
• wywoływać działania rozszerzeń,
• Sprawdź wszystkie elementy 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 trwale przechowywać dane. Agent może teraz utworzyć rozszerzenie, zainstalować je, obserwować jego działanie i sprawdzać jego stabilność bez opuszczania interfejsu czatu.

To jest prosty przykład prompta. Aby dowiedzieć się więcej o różnych technikach tworzenia promptów i znaleźć te, które najlepiej sprawdzą się w Twoim przypadku, zapoznaj się z naszym przewodnikiem na temat inżynierii promptów.

Przykłady promptów usprawniających dystrybucję za pomocą pliku CHROMEWEBSTORE.md

Zainstalowanie umiejętności rozszerzenia i dodanie instrukcji do agenta wykona większość pracy, ale podanie konkretnych informacji w promptach może przynieść lepsze wyniki na danym etapie rozwoju. Oto krótki przewodnik, jak poprosić agenta o utworzenie, zaktualizowanie i utrzymanie pliku CHROMEWEBSTORE.md.

• Pierwsza publikacja: gdy rozszerzenie jest gotowe i chcesz wygenerować jego 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żdej prośby o uprawnienia 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 bezpośrednio 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 Przewodnika po współczesnych technologiach internetowych 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.

Zacznij eksperymentować z tymi narzędziami w następnym projekcie, aby zobaczyć, jak mogą usprawnić proces tworzenia rozszerzenia od początkowego prototypu do publikacji.