Creare estensioni con agenti di programmazione

Gli agenti di programmazione AI, come Antigravity, ora possono generare codice di estensione con un'accuratezza impressionante. Tuttavia, per sfruttare appieno il loro potenziale e garantire risultati di alta qualità, devi fornire loro il contesto e gli strumenti giusti.

Questa guida spiega come configurare gli strumenti giusti nei tuoi agenti di programmazione e come possono aiutarti a creare estensioni migliori più velocemente.

Abbiamo creato una skill per gli agenti di programmazione progettata specificamente per lo sviluppo di estensioni. Questa skill fa parte della nostra iniziativa più ampia, Modern Web Guidance, che fornisce agli agenti di programmazione AI l'esperienza sulla piattaforma web, le best practice e i pattern API moderni.

Ma la creazione dell'estensione è solo il primo passo. Per aiutarti a verificare che il codice funzioni come previsto, Chrome DevTools per agenti consente agli assistenti di assistenza al coding AI di eseguire il debug delle estensioni direttamente in Chrome e di usufruire delle funzionalità di debug e degli insight sulle prestazioni di DevTools.

Configurazione

Modern Web Guidance

Per utilizzare il pacchetto di competenze, installa Modern Web Guidance nell'ambiente che preferisci e aggiungi la competenza delle estensioni. Di seguito sono riportate le istruzioni per alcuni degli strumenti più utilizzati.

Interfaccia a riga di comando

L'installazione consigliata per la maggior parte degli agenti di programmazione (tra cui Gemini CLI, Claude Code e Codex) è tramite l'interfaccia a riga di comando modern-web-guidance creata dal team di Chrome. L'installazione delle skill tramite l'interfaccia a riga di comando modern-web-guidance le manterrà aggiornate automaticamente.

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

In questo modo viene eseguita una procedura guidata interattiva per installare le skill in base alle tue preferenze. Quando ti vengono presentate le opzioni, seleziona i tuoi agenti di programmazione e scegli sia chrome-extensions che modern-web-guidance.

Prompt del selettore dell'interfaccia a riga di comando di Modern Web Guidance.
Selezione di chrome-extensions e modern-web-guidance nella procedura guidata del programma di installazione.

Antigravity

Durante l'installazione di Antigravity, puoi selezionare il plug-in Modern Web Guidance, che include la skill delle estensioni, oppure puoi aggiungerlo tramite Personalizzazioni > Plug-in Build with Google > Modern Web Guidance.

Il plug-in Modern Web Guidance nella schermata di installazione di Antigravity.
Selezione del plug-in Modern Web Guidance durante l'installazione di Antigravity.

Modern Web Guidance in Build With Google Plugins nelle personalizzazioni di Antigravity.
Aggiunta di Modern Web Guidance tramite le personalizzazioni dopo l'installazione.

Chrome DevTools per agenti di programmazione

Puoi aggiungere Chrome DevTools per agenti all'agente di programmazione che preferisci come plug-in, estensione o server MCP.

Di seguito sono riportate le istruzioni per alcuni degli agenti più utilizzati.

Antigravity

  1. Scarica Antigravity IDE (Antigravity non è consigliato perché non consente di modificare manualmente la configurazione del server MCP).

  2. All'avvio o in Impostazioni > Personalizzazioni, nella sezione Build with Google, attiva Chrome DevTools. In questo modo verrà installata solo la skill Chrome DevTools, ma non il server MCP.

    Opzioni delle caselle di controllo Strumenti per sviluppatori e Modern Web Guidance nell'interfaccia di configurazione di Antigravity.
    Attivazione di Modern Web Guidance e Chrome DevTools durante l'avvio o le personalizzazioni.

  3. Per aggiungere il server MCP di Chrome DevTools, vai a Impostazioni > Personalizzazione, fai clic sul pulsante Aggiungi server MCP e cerca Chrome DevTools.

    La finestra di dialogo di ricerca Aggiungi server MCP in Antigravity che mostra Chrome DevTools nei risultati di ricerca.
    Ricerca di Chrome DevTools nella finestra Aggiungi server MCP.
    Installazione del server MCP di Chrome DevTools nell'interfaccia di Antigravity.
    Installazione del server MCP di Chrome DevTools.
    L'elenco personalizzato che mostra Chrome DevTools aggiunto ai server MCP attivi.
    Server MCP di Chrome DevTools elencato in Personalizzazioni.

  4. Fai clic su Apri configurazione MCP per aprire la configurazione del server MCP. Tieni presente che devi chiudere le impostazioni per visualizzare il file di configurazione nell'IDE.

    La finestra Impostazioni di personalizzazione che mostra il pulsante Apri configurazione MCP.
    Individuazione del pulsante Apri configurazione MCP nelle impostazioni.

  5. Aggiungi i seguenti due parametri di configurazione: --categoryExtensions (per attivare gli strumenti delle estensioni) e --autoConnect (per attivare la connessione a un profilo Chrome esistente, necessaria quando si utilizzano le API AI integrate di Chrome o quando è richiesto l'accesso).

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

  6. Per attivare il debug remoto, apri Chrome, vai a chrome://inspect/#remote-debugging e seleziona Consenti il debug remoto per questa istanza del browser.

    La pagina chrome://inspect che mostra le caselle di controllo per il debug remoto.
    Attivazione dell'impostazione Consenti il debug remoto per questa istanza del browser in Chrome.

  7. Riavvia Antigravity IDE.

  8. Crea un nuovo workspace e un prompt di test: "Crea un'estensione di Chrome Hello World. Esegui test utilizzando Chrome DevTools." Quando l'agente avvia il test dell'estensione nel browser, Chrome mostrerà una finestra di dialogo che richiede l'autorizzazione per il debug remoto. Seleziona Consenti. Mentre la sessione di debug remoto è attiva, Chrome mostrerà il banner "Chrome è controllato da software di test automatizzato".

<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

Altri agenti

Per istruzioni sulla configurazione di altri agenti, consulta la documentazione su GitHub di Chrome DevTools MCP.

Istruzioni per l'agente CHROMEWEBSTORE.md

Una parte importante della pubblicazione di un'estensione è la compilazione della Dashboard per sviluppatori. La skill risolve questo problema facendo in modo che l'agente di programmazione crei e gestisca un file CHROMEWEBSTORE.md che tiene traccia delle informazioni necessarie, incluse le giustificazioni per ogni richiesta di autorizzazione nel codice.

La skill verrà attivata quando utilizzi frasi come "Pubblichiamo questo" o "Prepara questa estensione per lo store", ma per semplificare gli Agentic Workflows, aggiungi quanto segue alle istruzioni di sistema dell'agente (ad esempio, ~/.gemini/GEMINI.md per Antigravity o ~/.claude/CLAUDE.md per 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.

Crea e testa l'estensione con gli agenti di programmazione

La skill di estensione inclusa in Modern Web Guidance aiuta gli agenti in tre modi principali:

  • Conoscenza aggiornata delle API: insegna agli agenti le API più recenti, che potrebbero essere state rilasciate dopo l'addestramento del modello che stai utilizzando.
  • Best practice: garantisce che gli agenti abbiano accesso a tutte le best practice che il nostro team ha appreso nel corso degli anni creando estensioni di Chrome.
  • Idoneità all'invio:tiene traccia delle informazioni che potresti dover inviare per pubblicare l'estensione nel Chrome Web Store, semplificando la distribuzione.

Modern Web Guidance include anche competenze che coprono tutto ciò di cui hai bisogno per offrire un'esperienza utente eccellente, come prestazioni, accessibilità e API moderne. Ad esempio, le competenze integrate dell'API AI assicurano che gli agenti di programmazione AI utilizzino sempre l'ultima versione dell'API insieme a informazioni aggiuntive su regole architetturali esplicite e vincoli hardware per l'utilizzo di queste API, per consentire una gestione efficiente dei download dei modelli, un'attenzione alla sicurezza e strategie di fallback fluide.

La skill aiuta anche l'agente a monitorare le informazioni necessarie per la pubblicazione, incluse le giustificazioni per ogni richiesta di autorizzazione richiesta nel codice. Ad esempio, se chiedi all'agente di programmazione di creare un'estensione utilizzando l'API Side Panel e di pubblicarla nel Chrome Web Store, l'agente riconoscerà che ha bisogno dell'autorizzazione sidePanel. Verrà quindi creato un file CHROMEWEBSTORE.md con una giustificazione. Quando è tutto pronto per l'invio, puoi rivedere questa motivazione, apportare eventuali modifiche, se necessario, e copiarla direttamente nella Dashboard per sviluppatori.

Chrome DevTools per agenti consente l'assistenza al coding AI di installare ed eseguire il debug delle estensioni in un'istanza di Chrome in esecuzione, in particolare:

  • Installare e disinstallare le estensioni.
  • Elenca tutte le estensioni installate e ricaricale.
  • Attivare le azioni delle estensioni.
  • Ispeziona ogni superficie dell'estensione (popup, riquadro laterale, service worker).

Ecco un prompt e un video che mostrano come funziona in pratica:

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

In questo caso, l'agente deve creare un file manifest V3 e richiedere l'autorizzazione storage perché sa di dover rendere persistenti i dati. L'agente può ora creare un'estensione, installarla, osservarne l'esecuzione e verificarne la stabilità senza che tu debba mai uscire dall'interfaccia della chat.

Questo è un semplice esempio di prompt. Per scoprire di più sulle diverse tecniche di prompt e trovare quella più adatta al tuo caso d'uso, consulta la nostra guida sul prompt engineering.

Esempi di prompt per semplificare la distribuzione con CHROMEWEBSTORE.md

Anche se l'installazione della skill dell'estensione e l'aggiunta di istruzioni all'agente faranno la maggior parte del lavoro, essere specifici nei prompt può produrre risultati migliori per la fase di sviluppo in cui ti trovi. Ecco una guida rapida su come chiedere all'agente di creare, aggiornare e gestire il file CHROMEWEBSTORE.md.

  • Prima pubblicazione: quando l'estensione è completa di tutte le funzionalità e vuoi generare la presenza iniziale nello store.
Prepare the extension for publication on the Chrome Web Store.
  • Aggiornamento delle autorizzazioni e delle motivazioni: il Chrome Web Store applica la norma relativa alla finalità singola e richiede motivazioni granulari per ogni richiesta di autorizzazione nel file manifest.json.
We just added the 'declarativeNetRequest' and 'storage' permissions to our manifest. Let's update our store listing.
  • Gestione di un rifiuto dello store: se l'estensione viene rifiutata o segnalata durante la procedura di revisione, puoi fornire il motivo del rifiuto direttamente all'agente e chiedergli di aggiornare i metadati di conformità.
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.

Conclusione

La combinazione delle competenze di Modern Web Guidance con Chrome DevTools per agenti ti aiuta a creare funzionalità di alta qualità più velocemente, ma garantisce anche che l'estensione sia stabile e pronta per l'invio al Chrome Web Store.

Inizia a sperimentare con questi strumenti nel tuo prossimo progetto per scoprire come possono semplificare lo sviluppo delle estensioni, dal prototipo iniziale alla pubblicazione.