Ontwikkel extensies met codeeragents

AI-codeerprogramma's, zoals Antigravity, kunnen nu met indrukwekkende nauwkeurigheid extensiecode genereren. Om hun potentieel echter volledig te benutten en resultaten van hoge kwaliteit te garanderen, moet je ze wel de juiste context en tools bieden.

Deze handleiding legt uit hoe u de juiste tools in uw codeeromgeving configureert en hoe deze u kunnen helpen om sneller betere extensies te ontwikkelen.

We hebben een vaardigheid ontwikkeld voor AI-programmeurs, specifiek ontworpen voor de ontwikkeling van extensies. Deze vaardigheid maakt deel uit van ons bredere initiatief ' Modern Web Guidance' , dat AI-programmeurs voorziet van expertise op het gebied van webplatformen, best practices en moderne API-patronen.

Maar het bouwen van de extensie is slechts de eerste stap. Om je te helpen controleren of je code naar behoren werkt, stelt Chrome DevTools voor agents AI-codeerassistenten in staat om extensies rechtstreeks in Chrome te debuggen en te profiteren van de debugmogelijkheden en prestatie-inzichten van DevTools.

Instellen

Moderne webrichtlijnen

Om het vaardighedenpakket te gebruiken, installeer je Modern Web Guidance in je favoriete omgeving en voeg je de extensievaardigheid eraan toe. Hier vind je instructies voor enkele populaire tools.

CLI

De aanbevolen installatiemethode voor de meeste codeeragents (waaronder Gemini CLI, Claude Code en Codex) is via de modern-web-guidance CLI, ontwikkeld door het Chrome-team. Door de skills via de modern-web-guidance CLI te installeren, worden ze automatisch up-to-date gehouden.

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

Hiermee start een interactieve wizard om de vaardigheden naar uw voorkeuren te installeren. Selecteer bij de getoonde opties uw codeeragent(en) en kies zowel chrome-extensions als modern-web-guidance .

Moderne webbegeleiding CLI-kiezerprompt.
Het selecteren van chrome-extensions en modern-web-guidance in de installatiewizard.

Antizwaartekracht

Bij het installeren van Antigravity kunt u de Modern Web Guidance -plug-in selecteren, die de extensiefunctionaliteit bevat, of u kunt deze toevoegen via Aanpassen > Bouwen met Google-plug-ins > Modern Web Guidance .

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

Moderne webrichtlijnen onder 'Bouwen met Google-plug-ins' in de Antigravity-aanpassingen.
Moderne webbegeleiding toevoegen via aanpassingen na installatie.

Chrome DevTools voor codeeragents

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

Hieronder vindt u de instructies voor enkele van de meest populaire agentschappen.

Antizwaartekracht

Om de Chrome DevTools MCP-server te gebruiken, volg je de instructies in de documentatie van Antigravity om een ​​aangepaste MCP-server te installeren . Voeg het volgende toe aan de configuratie van de MCP-server:

  {
    "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

Andere agenten

Voor instructies over het instellen van andere agents, raadpleeg de documentatie op de Chrome DevTools MCP GitHub-pagina .

instructies voor de CHROMEWEBSTORE.md-agent

Een belangrijk onderdeel van het publiceren van een extensie is het invullen van het ontwikkelaarsdashboard. Deze functionaliteit pakt dit aan door uw codeeragent een CHROMEWEBSTORE.md bestand te laten aanmaken en bijhouden. Dit bestand bevat alle benodigde informatie, inclusief een onderbouwing voor elke in de code aangevraagde machtiging.

De vaardigheid wordt geactiveerd wanneer je zinnen gebruikt zoals "Laten we dit publiceren" of "Bereid deze extensie voor op de store", maar om je agentworkflows te 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.

Ontwikkel en test uw extensie met behulp van codeeragents.

De uitbreidingsfunctie die is opgenomen in Modern Web Guidance helpt agenten op drie belangrijke manieren:

  • Actuele API-kennis: Agenten leren over de nieuwste API's, die mogelijk zijn uitgebracht nadat het model dat u gebruikt is getraind.
  • Beste werkwijzen: Het zorgt ervoor dat agenten toegang hebben tot alle beste werkwijzen die ons team in de loop der jaren heeft geleerd bij het ontwikkelen van Chrome-extensies.
  • Klaar voor indiening: Het houdt bij welke informatie je nodig hebt om je extensie in te dienen bij de Chrome Web Store, waardoor de distributie eenvoudiger wordt.

Moderne webrichtlijnen omvatten ook vaardigheden die alles dekken wat je nodig hebt om een ​​uitstekende gebruikerservaring te leveren, zoals prestaties, toegankelijkheid en moderne API's. Ingebouwde AI API-vaardigheden zorgen er bijvoorbeeld voor dat AI-codeagents altijd de nieuwste versie van de API gebruiken, samen met aanvullende informatie over expliciete architectuurregels en hardwarebeperkingen voor het gebruik van deze API's, om efficiënt beheer van modeldownloads mogelijk te maken, de focus op beveiliging te leggen en soepele terugvalstrategieën te implementeren.

Deze functie helpt je agent ook bij het bijhouden van de benodigde informatie voor publicatie, inclusief de rechtvaardiging voor elke gevraagde machtiging in de code. Als je je codeeragent bijvoorbeeld vraagt ​​om een ​​extensie te bouwen met behulp van de Side Panel API en deze te publiceren in de Chrome Web Store, herkent de agent dat de sidePanel -machtiging nodig is. Vervolgens maakt de agent een CHROMEWEBSTORE.md -bestand aan met een rechtvaardiging. Wanneer je klaar bent om de extensie in te dienen, kun je deze rechtvaardiging bekijken, indien nodig aanpassen en direct kopiëren naar het ontwikkelaarsdashboard.

Chrome DevTools voor agents stelt AI-codeerassistenten in staat om extensies te installeren en te debuggen in een actieve Chrome-instantie, met name:

  • Extensies installeren en verwijderen.
  • Lijst alle geïnstalleerde extensies op en herlaad ze.
  • Activeer extensieacties.
  • Controleer elk oppervlak van uw aanbouw (pop-up, zijpaneel, servicemedewerker).

Hier is een voorbeeld en een video die laten zien 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 aanmaken en de storage aanvragen, omdat hij weet dat hij gegevens moet opslaan. De agent kan nu een extensie bouwen, installeren, de werking ervan volgen en de stabiliteit controleren zonder dat u de chatinterface hoeft te verlaten.

Dit is een eenvoudig promptvoorbeeld. Om meer te weten te komen over verschillende prompttechnieken en te ontdekken wat het beste werkt voor jouw specifieke situatie, raadpleeg je onze handleiding over promptontwikkeling .

Snelle voorbeelden om de distributie te stroomlijnen met CHROMEWEBSTORE.md

Hoewel het installeren van de extensie en het toevoegen van instructies aan je agent het meeste werk al doet, kunnen specifieke prompts betere resultaten opleveren, afhankelijk van de ontwikkelingsfase waarin je je bevindt. Hier is een korte handleiding over hoe je je agent kunt instrueren om je CHROMEWEBSTORE.md -bestand aan te maken, bij te werken en te onderhouden.

  • Eerste publicatie : Wanneer uw extensie volledig functioneel is en u uw eerste online aanwezigheid in de webwinkel wilt genereren. 
Prepare the extension for publication on the Chrome Web Store.
  • Machtigingen en rechtvaardigingen bijwerken : De Chrome Web Store hanteert een beleid waarbij elke machtiging slechts één doel heeft en vereist gedetailleerde rechtvaardigingen voor elke aangevraagde machtiging in uw manifest.json . 
We just added the 'declarativeNetRequest' and 'storage' permissions to our manifest. Let's update our store listing.
  • Een afwijzing door de store afhandelen : Als uw extensie tijdens het beoordelingsproces wordt afgewezen of gemarkeerd, kunt u de reden van de afwijzing direct aan de agent doorgeven en vragen om uw compliance-metadata bij te werken. 
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

Door de vaardigheden van Modern Web Guidance te combineren met Chrome DevTools voor agents, kunt u sneller hoogwaardige functionaliteiten ontwikkelen en ervoor zorgen dat uw extensie stabiel is en klaar voor indiening bij de Chrome Web Store.

Begin in je volgende project te experimenteren met deze tools en ontdek hoe ze de ontwikkeling van je extensies kunnen stroomlijnen, van het eerste prototype tot de publicatie.