Extensies maken met programmeeragents

AI-programmeeragents, zoals Antigravity, kunnen nu extensiecode genereren met indrukwekkende nauwkeurigheid. Maar als je het potentieel van deze modellen echt wilt benutten en resultaten van hoge kwaliteit wilt krijgen, moet je ze de juiste context en tools geven.

In deze handleiding leggen we uit hoe je de juiste tools instelt in je programmeeragents en hoe ze je kunnen helpen sneller betere extensies te maken.

We hebben een vaardigheid voor programmeeragents gemaakt die speciaal is ontworpen voor de ontwikkeling van extensies. Deze vaardigheid maakt deel uit van ons bredere initiatief, Modern Web Guidance, dat AI-programmeeragents voorziet van expertise over webplatforms, best practices en moderne API-patronen.

Maar de extensie bouwen is nog maar de eerste stap. Met Chrome DevTools voor agents kunnen AI-programmeerhulp extensies rechtstreeks in Chrome debuggen en de foutopsporingsmogelijkheden en prestatie-inzichten van DevTools gebruiken om te verifiëren of je code werkt zoals verwacht.

Instellen

Modern Web Guidance

Als je het vaardigheidspakket wilt gebruiken, installeer je Modern Web Guidance in de gewenste omgeving en voeg je de vaardigheid voor extensies toe. Hieronder staan de instructies voor een aantal populaire tools.

CLI

De aanbevolen installatie voor de meeste programmeer-agents (waaronder Gemini CLI, Claude Code en Codex) is via de modern-web-guidance CLI die is ontwikkeld door het Chrome-team. Als je de vaardigheden installeert via de modern-web-guidance CLI, worden ze automatisch up-to-date gehouden.

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

Hiermee wordt een interactieve wizard uitgevoerd om de vaardigheden volgens je voorkeuren te installeren. Als je opties krijgt, selecteer je je programmeeragent(en) en kies je zowel chrome-extensions als modern-web-guidance.

Prompt voor de CLI-kiezer van Modern Web Guidance.
Chrome-extensies en Modern Web Guidance selecteren in de installatiewizard.

Antigravity

Als je Antigravity installeert, kun je de plug-in Modern Web Guidance selecteren. Deze bevat de vaardigheid voor extensies. Je kunt deze ook toevoegen via Aanpassingen > Gebouwd met Google-plug-ins > Modern Web Guidance.

De plug-in Modern Web Guidance in het installatiescherm van Antigravity.
De plug-in Modern Web Guidance selecteren tijdens de installatie van Antigravity.

Modern Web Guidance onder Gebouwd met Google-plug-ins in Antigravity-aanpassingen.
Modern Web Guidance toevoegen via aanpassingen na de installatie.

Chrome DevTools voor programmeeragents

Je kunt Chrome DevTools voor agents toevoegen aan de programmeeragent van je keuze als plug-in, extensie of MCP-server.

Hieronder staan de instructies voor een aantal van de populairste agents.

Antigravity

  1. Download Antigravity IDE (Antigravity wordt niet aanbevolen omdat je de MCP-serverconfiguratie niet handmatig kunt bewerken).

  2. Zet bij het opstarten of in Instellingen > Aanpassingen onder Gebouwd met Google de optie Chrome DevTools aan. Hiermee wordt alleen de Chrome DevTools-vaardigheid geïnstalleerd, niet de MCP-server.

    Selectievakjes voor Ontwikkelaarstools en Modern Web Guidance in de installatie-interface van Antigravity.
    Modern Web Guidance en Chrome DevTools aanzetten tijdens het opstarten of aanpassen.

  3. Als je de Chrome DevTools MCP-server wilt toevoegen, ga je naar Instellingen > Aanpassen, klik je op de knop MCP-server toevoegen en zoek je naar Chrome DevTools.

    Het zoekdialoogvenster MCP-server toevoegen in Antigravity met Chrome DevTools in de zoekresultaten.
    Zoeken naar Chrome DevTools in het venster MCP-server toevoegen.
    De Chrome DevTools MCP-server installeren in de Antigravity-interface.
    De Chrome DevTools MCP-server installeren.
    De aanpassingslijst met Chrome DevTools toegevoegd aan actieve MCP-servers.
    De Chrome DevTools MCP-server staat vermeld onder aanpassingen.

  4. Klik op MCP-configuratie openen om de configuratie van de MCP-server te openen. Sluit de instellingen om het configuratiebestand in de IDE te bekijken.

    Het venster Aanpassingsinstellingen met de knop MCP-configuratie openen.
    De knop MCP-configuratie openen vinden in de instellingen.

  5. Voeg de volgende 2 configuratieparameters toe: --categoryExtensions (om de extensietools aan te zetten) en --autoConnect (om verbinding te maken met een bestaand Chrome-profiel, wat vereist is als je de ingebouwde AI API's van Chrome gebruikt of als inloggen vereist is).

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

  6. Als je foutopsporing op afstand wilt aanzetten, open je Chrome, ga je naar chrome://inspect/#remote-debugging en selecteer je Foutopsporing op afstand toestaan voor deze browserinstantie.

    De pagina chrome://inspect met de selectievakjes voor foutopsporing op afstand.
    De instelling 'Externe foutopsporing toestaan voor deze browserinstantie' aanzetten in Chrome.

  7. Start Antigravity IDE opnieuw op.

  8. Maak een nieuwe werkruimte en maak een testprompt: 'Maak een Chrome-extensie met de tekst Hello World. Test met Chrome DevTools.' Als de medewerker de extensie in de browser gaat testen, toont Chrome een dialoogvenster waarin je wordt gevraagd om toestemming voor foutopsporing op afstand. Selecteer Toestaan. Als de sessie voor foutopsporing op afstand aanstaat, toont Chrome de banner Chrome wordt op dit moment beheerd door geautomatiseerde testsoftware.

<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

Andere agents

Ga naar de documenten op Chrome DevTools MCP GitHub voor instructies om andere agents in te stellen.

Instructies voor de agent in CHROMEWEBSTORE.md

Een belangrijk onderdeel van het publiceren van een extensie is het invullen van het Ontwikkelaarsdashboard. De vaardigheid pakt dit aan door je programmeeragent een CHROMEWEBSTORE.md-bestand te laten maken en onderhouden waarin de nodige informatie wordt bijgehouden, waaronder de redenen voor elk verzoek om rechten dat in de code wordt gevraagd.

De skill wordt geactiveerd als je zinnen gebruikt zoals 'Laten we dit publiceren' of 'Bereid deze extensie voor op de Store'. Als je je agentische workflows wilt stroomlijnen, voeg je het volgende toe aan de systeeminstructies van je agent (bijvoorbeeld ~/.gemini/GEMINI.md voor Antigravity of ~/.claude/CLAUDE.md voor 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.

Je extensie maken en testen met programmeeragents

De extensievaardigheid in Modern Web Guidance helpt agents op 3 belangrijke manieren:

  • Actuele API-kennis: De tool leert agents over de nieuwste API's, die misschien zijn uitgebracht nadat het model dat je gebruikt is getraind.
  • Best practices: De agenten hebben toegang tot alle best practices die ons team in de loop der jaren heeft geleerd bij het maken van Chrome-extensies.
  • Gereedheid voor inzending: De tool houdt informatie bij die je misschien nodig hebt om je extensie in te dienen bij de Chrome Web Store, waardoor de distributie makkelijker wordt.

Modern Web Guidance omvat ook vaardigheden die alles omvatten wat je nodig hebt om een uitstekende gebruikerservaring te bieden, zoals prestaties, toegankelijkheid en moderne API's. Ingebouwde AI API-vaardigheden zorgen er bijvoorbeeld voor dat AI-coderingsagents altijd de nieuwste versie van de API gebruiken, samen met aanvullende informatie over expliciete architectuurregels en hardwarebeperkingen voor het gebruik van deze API's. Zo kunnen ze modeldownloads efficiënt beheren, zich richten op beveiliging en elegante fallback-strategieën gebruiken.

De vaardigheid helpt je agent ook om de nodige informatie voor publicatie bij te houden, waaronder de redenen voor elk verzoek om rechten dat in de code wordt gevraagd. Als je je programmeeragent bijvoorbeeld vraagt om een extensie te maken met de Side Panel API en deze te publiceren in de Chrome Web Store, herkent de agent dat deze het recht sidePanel nodig heeft. Er wordt dan een CHROMEWEBSTORE.md-bestand met een motivering gemaakt. Als je klaar bent om je app in te dienen, kun je deze motivering controleren, zo nodig aanpassingen aanbrengen en de motivering rechtstreeks naar het Ontwikkelaarsdashboard kopiëren.

Met Chrome DevTools voor agents kunnen AI-programmeerhulp extensies installeren en fouten opsporen in een actieve Chrome-instantie, met name:

  • Extensies installeren en verwijderen.
  • Maak een lijst van alle geïnstalleerde extensies en laad ze opnieuw.
  • Extensieacties activeren.
  • Inspecteer elk oppervlak van je extensie (pop-up, zijvenster, servicemedewerker).

Hier is een prompt en een video die toont hoe dat in de praktijk werkt:

Build a simple "Quick notes" extension that opens a popup text area to save notes and test it in the browser.

In dit geval moet de agent een Manifest V3-bestand maken en het recht storage aanvragen, omdat de agent weet dat deze gegevens moet bewaren. De agent kan nu een extensie maken, installeren, de uitvoering ervan bekijken en de stabiliteit ervan verifiëren zonder dat je de chatinterface hoeft te verlaten.

Dit is een voorbeeld van een eenvoudige prompt. In onze gids over prompt-engineering vind je meer informatie over verschillende prompttechnieken en ontdek je wat het beste werkt voor jouw use case.

Voorbeelden van prompts om de distributie te stroomlijnen met CHROMEWEBSTORE.md

Hoewel de installatie van de extensievaardigheid en de toevoeging van instructies aan je agent het meeste werk doen, kun je betere resultaten krijgen voor de ontwikkelingsfase waarin je je bevindt door specifiek te zijn in je prompts. Hier is een korte handleiding over hoe je je agent vraagt om je CHROMEWEBSTORE.md-bestand te maken, te updaten en te onderhouden.

  • Eerste keer publiceren: Als je extensie alle functies bevat en je de eerste aanwezigheid in de Store wilt genereren.
Prepare the extension for publication on the Chrome Web Store.
  • Rechten en rechtvaardigingen updaten: De Chrome Web Store handhaaft het beleid voor één doel en vereist gedetailleerde rechtvaardigingen voor elk verzoek om rechten dat wordt aangevraagd in je manifest.json.
We just added the 'declarativeNetRequest' and 'storage' permissions to our manifest. Let's update our store listing.
  • Omgaan met een afwijzing van de Store: Als je extensie tijdens het beoordelingsproces wordt afgewezen of gemarkeerd, kun je de reden voor de afwijzing rechtstreeks aan de agent doorgeven en deze vragen de nalevingsmetadata te updaten.
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.

Conclusie

Als je de vaardigheden van Modern Web Guidance combineert met Chrome DevTools voor agents, kun je sneller functies van hoge kwaliteit ontwikkelen. Ook zorg je dat je extensie stabiel is en klaar is voor indiening bij de Chrome Web Store.

Experimenteer met deze tools in je volgende project om te ontdekken hoe ze de ontwikkeling van je extensie kunnen stroomlijnen, van het eerste prototype tot de publicatie.