Caricare un’estensione da disco, aprirne il popup e automatizzare verifiche UI: un workflow più completo per chi sviluppa estensioni e usa agenti.
Sviluppare un’estensione Chrome oggi significa spesso alternare tre modalità: codice “a mano”, generazione assistita da un coding agent e una fase di verifica nel browser che resta comunque imprescindibile.
Il problema è che molti agenti riescono ad aprire pagine e cliccare elementi, ma si fermano quando entrano in gioco le estensioni: installazione, gestione del popup, interazioni con la UI dell’estensione, verifica rapida dei cambiamenti.
Chrome DevTools for agents colma proprio quel vuoto: aggiunge al set di strumenti dell’agente la possibilità di installare e pilotare un’estensione durante i test, oltre a renderne più pratico il debugging.
Quando è davvero utile Ci sono alcuni scenari tipici in cui il supporto “estensioni-aware” fa la differenza: Ciclo di feedback più rapido: compili/packi l’estensione, la carichi in Chrome e verifichi subito il popup o una content script UI.
Test end-to-end più realistici: invece di simulare una UI in una pagina fittizia, testi l’estensione nel suo contesto reale (action popup, permessi, storage, ecc.).
Validazione automatizzata: l’agente può controllare che l’estensione si installi correttamente, che il popup si apra e che i componenti principali siano presenti e interagibili.
In pratica: se il tuo agente sa “guidare” il browser ma non sa “gestire” le estensioni, la qualità del test rimane limitata.
Setup: abilitare esplicitamente gli strumenti per le estensioni Un dettaglio importante: per ragioni di sicurezza e controllo (in particolare per l’uso dei token e del contesto in cui operano gli agenti), le funzionalità specifiche per estensioni non sono abilitate di default.
Dopo aver installato Chrome DevTools for agents, serve quindi un passaggio esplicito nella configurazione MCP: individua il tuo file di configurazione MCP; abilita la categoria dedicata alle estensioni aggiungendo il flag: Una volta fatto, l’agente può accedere agli strumenti necessari per caricare e controllare un’estensione.
Un workflow tipico: installare, aprire il popup, verificare la UI Con gli strumenti attivi, il flusso diventa molto lineare: Caricamento da disco tramite uno strumento di tipo install extension, l’agente può caricare l’estensione direttamente dalla directory locale (come faresti in modalità “Load unpacked”).
Apertura dell’extension action (popup) con uno strumento tipo trigger extension action, l’agente può aprire il popup dell’estensione (cioè l’UI che appare cliccando l’icona nella toolbar).
Snapshot e ispezione dei contenuti con uno strumento più generale tipo take snapshot, l’agente ottiene una rappresentazione della UI corrente, utile per: verificare che tutto si sia caricato; individuare pulsanti, checkbox, testi e stati; decidere la prossima azione.
Interazione (click, ecc.) una volta identificato l’elemento target, può interagire (es. click) per completare il caso di test.
Questo approccio è particolarmente efficace per popup “piccoli ma critici” (to-do list, switch, menu, quick actions) dove un test manuale ripetuto diventa rapidamente noioso e soggetto a errori.
Cosa c’è sotto al cofano: Chrome DevTools Protocol La parte interessante, per chi fa frontend tooling, è che tutto questo non è una “magia” isolata: Chrome DevTools for agents è costruito sopra il Chrome DevTools Protocol (CDP), lo stesso protocollo su cui si appoggiano: Chrome DevTools (il tooling che usi ogni giorno) strumenti di automazione come Puppeteer Di recente sono state esposte nel CDP nuove capacità legate alle estensioni.
Questo ha già avuto un impatto su Puppeteer (installazione estensioni nei test automatizzati) e, di riflesso, permette ora di portare funzionalità equivalenti anche in DevTools for agents.
Il vantaggio pratico è che l’ecosistema tende ad evolvere “in blocco”: una capability nuova (per esempio, in futuro, azioni come pin/unpin dell’estensione) può essere ag