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ù rapidamente.
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 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 approfondimenti 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 sia 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 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
Per utilizzare il server MCP di Chrome DevTools, segui le istruzioni della 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 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 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 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 API AI integrate assicurano che gli agenti di codifica AI utilizzino sempre la versione più recente 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.
- Ispezionare 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, guardarla 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, essere specifici nei prompt 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 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ù rapidamente, 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.