Creare estensioni con agenti di programmazione

Gli agenti di codifica AI, come Antigravity, ora possono generare codice di estensione con una precisione impressionante. Tuttavia, per sbloccare veramente 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 negli agenti di codifica e come possono aiutarti a creare estensioni migliori più velocemente.

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

La creazione dell'estensione è solo il primo passo. Per aiutarti a verificare che il codice funzioni come previsto, Chrome DevTools per gli agenti consente agli assistenti di codifica AI di eseguire il debug delle estensioni direttamente in Chrome e di usufruire delle funzionalità di debug di DevTools e degli insight sul rendimento.

Configurazione

Modern Web Guidance

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

CLI

L'installazione consigliata per la maggior parte degli agenti di codifica (inclusi Gemini CLI, Claude Code e Codex) avviene 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à automaticamente aggiornate.

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

Viene eseguita una procedura guidata interattiva per installare le skill in base alle tue preferenze. Quando ti vengono presentate le opzioni, seleziona gli agenti di codifica e scegli sia chrome-extensions che modern-web-guidance.

Prompt di selezione della CLI di Modern Web Guidance.
Selezione di chrome-extensions e modern-web-guidance nella procedura guidata di installazione.

Antigravity

Quando installi Antigravity, puoi selezionare il plug-in Modern Web Guidance che include la skill delle estensioni oppure puoi aggiungerlo tramite Personalizzazioni > Crea con i plug-in di 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 (Crea con i plug-in di Google) nelle personalizzazioni di Antigravity.
Aggiunta di Modern Web Guidance tramite Personalizzazioni dopo l'installazione.

Chrome DevTools per gli agenti di codifica

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

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

Antigravity

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

  2. All'avvio o in Impostazioni > Personalizzazioni, in Crea con Google attiva Chrome DevTools. Verrà installata solo la skill di 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 Antigravity.
    Installazione del server MCP di Chrome DevTools.
    L'elenco di personalizzazione 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 delle 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, necessario quando utilizzi le API AI integrate di Chrome o richiedi 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 spazio di lavoro e un prompt di test: "Crea un'estensione di Chrome Hello World. Esegui il test utilizzando Chrome DevTools." Quando l'agente avvia il test dell'estensione nel browser, Chrome ti mostrerà una finestra di dialogo che richiede l'autorizzazione per il debug remoto. Seleziona Consenti. Durante la sessione di debug remoto, Chrome visualizzerà un banner "Chrome è attualmente 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 Chrome DevTools MCP GitHub.

Istruzioni dell'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 codifica crei e gestisca un file CHROMEWEBSTORE.md che tiene traccia delle informazioni necessarie, incluse le giustificazioni per ogni autorizzazione richiesta nel codice.

La skill verrà attivata quando utilizzi frasi come "Pubblichiamo questa estensione" o "Prepara questa estensione per lo store", ma per semplificare i flussi di lavoro degli agenti, 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.

Creare e testare l'estensione con gli agenti di codifica

La skill delle estensioni inclusa in Modern Web Guidance aiuta gli agenti in tre modi principali:

  • Conoscenza delle API aggiornata: 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 durante la creazione di estensioni di Chrome.
  • Preparazione per l'invio: tiene traccia delle informazioni che potrebbero essere necessarie per inviare l'estensione al Chrome Web Store, semplificando la distribuzione.

Modern Web Guidance include anche skill che coprono tutto ciò di cui hai bisogno per offrire un'esperienza utente eccellente, come rendimento, accessibilità e API moderne. Ad esempio, le skill delle API AI integrate assicurano che gli agenti di codifica AI utilizzino sempre l'ultima versione dell'API insieme a informazioni aggiuntive sulle regole architettoniche esplicite e sui vincoli hardware per l'utilizzo di queste API, per consentire una gestione efficiente dei download dei modelli, concentrarsi sulla sicurezza e strategie di fallback graduali.

La skill aiuta anche l'agente a tenere traccia delle informazioni necessarie per la pubblicazione, incluse le giustificazioni per ogni autorizzazione richiesta nel codice. Ad esempio, se chiedi all'agente di codifica di creare un'estensione utilizzando l'API del riquadro laterale 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 esaminare questa giustificazione, apportare le modifiche necessarie e copiarla direttamente nella Dashboard per sviluppatori.

Chrome DevTools per gli agenti consente agli assistenti di codifica AI di installare ed eseguire il debug delle estensioni in un'istanza di Chrome in esecuzione, in particolare:

  • Installare e disinstallare le estensioni.
  • Elencare tutte le estensioni installate e ricaricarle.
  • Attivare le azioni delle estensioni.
  • Esaminare 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 che deve conservare i dati. L'agente può ora creare un'estensione, installarla, osservarla in esecuzione e verificarne la stabilità senza che tu debba mai uscire dall'interfaccia di 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 su Prompt engineering.

Esempi di prompt per semplificare la distribuzione con CHROMEWEBSTORE.md

Sebbene l'installazione della skill delle estensioni e l'aggiunta di istruzioni all'agente svolgano la maggior parte del lavoro, l'utilizzo di prompt specifici può produrre risultati migliori nella 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 e vuoi generare la tua presenza iniziale nello store.
Prepare the extension for publication on the Chrome Web Store.
  • Aggiornamento delle autorizzazioni e delle giustificazioni: il Chrome Web Store applica la norma relativa alla finalità singola e richiede giustificazioni granulari per ogni autorizzazione richiesta in 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 contrassegnata 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 skill di Modern Web Guidance con Chrome DevTools per gli 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 questi strumenti nel tuo prossimo progetto per scoprire come possono semplificare lo sviluppo delle estensioni dal prototipo iniziale alla pubblicazione.