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

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 specjalnie zaprojektowana do tworzenia rozszerzeń. Ta umiejętność jest częścią naszej szerszej inicjatywy Przewodnik po współczesnych technologiach internetowych, która zapewnia agentom AI do kodowania wiedzę o platformie internetowej, sprawdzone metody i nowoczesne wzorce interfejsów 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ść dotyczącą rozszerzeń. Oto instrukcje dotyczące niektórych popularnych narzędzi.

CLI

W przypadku większości agentów do kodowania (w tym interfejsu wiersza poleceń Gemini, Claude Code i Codex) zalecamy instalację za pomocą interfejsu wiersza poleceń modern-web-guidance stworzonego 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

Spowoduje to uruchomienie interaktywnego kreatora, który zainstaluje umiejętności zgodnie z Twoimi preferencjami. Gdy pojawią się opcje, wybierz agenta lub agentów do kodowania i wybierz zarówno chrome-extensions, jak i modern-web-guidance.

Antigravity

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

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

1. Pobierz Antigravity IDE (nie zalecamy Antigravity, ponieważ nie pozwala na ręczną edycję 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ędzi deweloperskich w Chrome, ale nie serwera MCP.

   

3. Aby dodać serwer MCP Narzędzi deweloperskich w Chrome, otwórz Ustawienia > Dostosowanie, 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 konfiguracyjny w IDE, musisz zamknąć ustawienia.

   

5. Dodaj te 2 parametry konfiguracji: --categoryExtensions (aby włączyć narzędzia do rozszerzeń) i --autoConnect (aby włączyć łączenie z istniejącym profilem Chrome, co jest wymagane podczas 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ź do 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 utwórz prompt testowy: „Utwórz rozszerzenie do Chrome „Hello World”. Testuj za pomocą Narzędzi deweloperskich w Chrome”. Gdy agent rozpocznie testowanie rozszerzenia w przeglądarce, Chrome wyświetli okno z prośbą o zgodę na zdalne debugowanie. Wybierz Zezwól. Gdy sesja zdalnego debugowania jest włączona, Chrome wyświetli 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 dotyczące konfigurowania innych agentów znajdziesz w dokumentacji na GitHubie 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 śledzi 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ść dotycząca rozszerzeń zawarta w przewodniku po współczesnych technologiach internetowych pomaga agentom na 3 główne sposoby:

• Aktualna wiedza o interfejsach API: uczy agentów o najnowszych interfejsach API, które mogły zostać opublikowane 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 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 API AI zapewniają, że agenty 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, co umożliwia 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 działającej 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 promptowania 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

Instalowanie umiejętności dotyczącej rozszerzeń i dodawanie instrukcji do agenta wykona 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.

• Publikowanie po raz pierwszy: 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 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ą one usprawnić tworzenie rozszerzeń od początkowego prototypu do publikacji.