Gli agenti di programmazione AI, come Antigravity, ora possono generare codice di estensione con una precisione 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 negli agenti di programmazione e come possono aiutarti a creare estensioni migliori più velocemente.
Abbiamo creato una competenza per gli agenti di codifica progettata appositamente per lo sviluppo di estensioni. Questa competenza fa parte della nostra iniziativa più ampia, Modern Web Guidance, che fornisce agli agenti di programmazione AI le competenze, le best practice e i pattern API moderni della piattaforma web.
Ma 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 e delle informazioni sul rendimento di DevTools.
Configurazione
Indicazioni per il web moderno
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ù usati.
Interfaccia a riga di comando
L'installazione consigliata per la maggior parte degli agenti di programmazione (inclusi Gemini CLI, Claude Code e Codex) avviene tramite la CLI modern-web-guidance creata dal team di Chrome. L'installazione delle skill tramite la CLI modern-web-guidance le manterrà aggiornate automaticamente.
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.
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.
Chrome DevTools per gli agenti di programmazione
Puoi aggiungere Chrome DevTools per gli agenti al tuo agente di codifica preferito come plug-in, estensione o server MCP.
Di seguito sono riportate le istruzioni per alcuni degli agenti più popolari.
Antigravity
Per utilizzare il server MCP di Chrome DevTools, segui le istruzioni riportate nella documentazione di Antigravity per installare un server MCP personalizzato. Aggiungi quanto segue alla configurazione dei server MCP:
{
"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
Altri agenti
Per istruzioni sulla configurazione di altri agenti, consulta la documentazione su Chrome DevTools MCP GitHub.
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 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 viene attivata quando utilizzi frasi come "Pubblichiamo questo" o"Preparare questa estensione per lo store ", ma per semplificare i flussi di lavoro dell'agente, 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 competenza dell'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 durante la creazione di estensioni di Chrome.
- Preparazione all'invio:tiene traccia delle informazioni che potresti dover inviare al Chrome Web Store per la tua estensione, semplificandone la distribuzione.
La guida al web moderno include anche competenze che coprono tutto ciò che ti serve per offrire un'esperienza utente eccellente, come prestazioni, accessibilità e API moderne. Ad esempio, le competenze API AI integrate assicurano che gli agenti di codifica 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, concentrarsi sulla sicurezza e strategie di fallback controllate.
La skill aiuta anche l'agente a monitorare le informazioni necessarie per la pubblicazione, incluse le giustificazioni per ogni autorizzazione richiesta nel codice. Ad esempio, se chiedi al tuo agente di codifica di creare un'estensione utilizzando l'API Side Panel e di pubblicarla sul Chrome Web Store, l'agente riconoscerà che è necessaria l'autorizzazione sidePanel. Verrà quindi creato un file CHROMEWEBSTORE.md con una motivazione. Quando è tutto pronto per l'invio, puoi rivedere 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.
- Elenca tutte le estensioni installate e ricaricale.
- Attivare le azioni di estensione.
- Controlla ogni superficie dell'estensione (popup, riquadro laterale, service worker).
Ecco un prompt e un video che mostrano come funziona nella 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 rendere persistenti 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 sull'ingegneria dei prompt.
Esempi di prompt per semplificare la distribuzione con CHROMEWEBSTORE.md
Sebbene l'installazione della skill di estensione e l'aggiunta di istruzioni all'agente facciano 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 e vuoi generare la tua presenza iniziale nello store.
Prepare the extension for publication on the Chrome Web Store.
- Aggiornamento di autorizzazioni e giustificazioni: il Chrome Web Store applica la norma relativa alla finalità singola e richiede giustificazioni granulari per ogni autorizzazione richiesta nel tuo
manifest.json.
We just added the 'declarativeNetRequest' and 'storage' permissions to our manifest. Let's update our store listing.
- Gestione del rifiuto di uno store: se la tua estensione viene rifiutata o segnalata durante la procedura di revisione, puoi comunicare direttamente all'agente il motivo del rifiuto 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 gli agenti ti aiuta a creare funzionalità di alta qualità più rapidamente, ma garantisce anche che la tua 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.