Chrome DevTools per agenti consente all'agente di avviare una sessione del browser e installare o interagire con le estensioni di Chrome utilizzando un server MCP. In questo modo, l'agente di coding può controllare il ciclo di vita dell'estensione: installazione, ricaricamento e attivazione delle azioni.
Invece di caricare manualmente un'estensione non pacchettizzata, fare clic sul pulsante di ricaricamento nella pagina di gestione delle estensioni ogni volta che modifichi il codice e attivare manualmente l'estensione per testarla, chiedi all'agente AI di gestire l'intero processo in autonomia. In questo modo si colma il divario tra la generazione di codice statico e il test delle estensioni live.
Puoi utilizzare gli strumenti per le estensioni per:
- Installare le estensioni: installa un'estensione di Chrome non pacchettizzata da un percorso di directory locale.
- Elencare le estensioni: recupera un elenco di tutte le estensioni di Chrome installate, inclusi nome, ID, versione e stato di attivazione.
- Ricaricare le estensioni: ricarica un'estensione di Chrome non pacchettizzata in base al suo ID per applicare immediatamente le modifiche al codice.
- Attivare le azioni: attiva l'azione predefinita di un'estensione in base al suo ID,
ad esempio aprendo un menu o eseguendo un'azione dello script di sfondo (vedi,
chrome.action nella documentazione
dell'API).
- Disinstallare le estensioni: rimuovi un'estensione di Chrome dalla sessione del browser in base al suo ID.
Prerequisiti
Prima di utilizzare gli strumenti per le estensioni, assicurati di avere quanto segue:
- Flag sperimentale: la categoria Estensioni non è attiva per impostazione predefinita in DevTools per gli agenti. Devi configurare il server MCP con il
--categoryExtensionsflag. - Estensioni non compresse: strumenti come
install_extensionrichiedono un percorso assoluto alla cartella dell'estensione non compressa, il che li rende ideali per lo sviluppo locale.
Casi d'uso degli strumenti per le estensioni di Chrome
Chiedi all'agente di gestire il ciclo di vita dell'estensione durante lo sviluppo e la correzione dei bug.
Nota: i passaggi di esecuzione dell'agente sono esempi di potenziali comportamenti. Il tuo agente potrebbe agire in modo diverso.
Eseguire rapidamente l'iterazione e ricaricare un'estensione
Il ricaricamento manuale di un'estensione dopo ogni modifica del file rallenta lo sviluppo. Chiedi all'agente di applicare una correzione del codice e ricaricare immediatamente l'estensione per verificare il nuovo comportamento senza intervento manuale.
Testo di esempio:
Puoi utilizzare un approccio generale:
Verify the extension has access to the active tab.
Oppure puoi fornire informazioni più dettagliate:
Update the manifest.json to include the "activeTab" permission. Then, reload the extension with ID 'abc123xyz' and trigger its default action to ensure it works.
Esecuzione dell'agente di esempio: l'agente modifica il file manifest.json nel file system. Poi richiama lo strumento reload_extension utilizzando l'ID fornito.
Infine, chiama lo strumento trigger_extension_action per attivare l'estensione e verificare che non vengano generati errori di autorizzazione nella console.
Testare l'azione predefinita di un'estensione su una pagina di destinazione
Spesso devi testare il modo in cui uno script di contenuti o un'azione di estensione interagisce con un sito web specifico. Automatizza questo processo chiedendo all'agente di navigare nel sito, installare l'estensione e attivarla.
Testo di esempio:
Puoi utilizzare un approccio generale:
Test my extension on example.com and verify it works correctly.
Oppure puoi fornire informazioni più dettagliate:
Navigate to example.com, install the unpacked extension located at '/Users/dev/my-extension', and trigger the extension action. Check the console logs to verify the content script executed correctly.
Esecuzione dell'agente di esempio: l'agente naviga all'URL di destinazione utilizzando navigate_page. Poi utilizza install_extension con il percorso assoluto fornito. Dopo aver caricato l'estensione, esegue trigger_extension_action per simulare un clic dell'utente. Infine, utilizza list_console_messages per verificare che lo script di contenuti sia stato eseguito e abbia prodotto l'output previsto.
Verificare le estensioni installate ed eseguire la pulizia
Durante i test automatici, potrebbe essere necessario verificare se un'estensione è stata caricata correttamente con la versione corretta o rimuoverla per garantire uno stato pulito per il test successivo.
Testo di esempio:
Uninstall 'My Test Extension' from the browser.
Esecuzione dell'agente di esempio: l'agente utilizza lo strumento list_extensions per recuperare l'elenco delle estensioni installate e i relativi metadati. Analizza l'output per identificare l'ID associato a "My Test Extension". Poi utilizza lo strumento uninstall_extension con questo ID per rimuoverlo in sicurezza dal browser.
Creare una nuova estensione e testarla
Per iniziare una nuova estensione di Chrome da zero, in genere è necessario creare file boilerplate e caricare manualmente la directory non pacchettizzata nel browser per testarla. Salta questa configurazione manuale chiedendo all'agente di generare il codice iniziale, caricare l'estensione e verificarne la funzionalità di base, end-to-end, in un unico passaggio.
Testo di esempio:
Build a Chrome extension that turns the page background gray when I click its icon. Save the files to '/tmp/gray-bg-ext', navigate to example.com, load the extension, and verify that it works.
Esecuzione dell'agente di esempio: l'agente crea un file manifest.json di base di Manifest V3 e un service worker in background che ascolta l'evento chrome.action.onClicked. Poi naviga alla pagina di test, richiama install_extension e utilizza trigger_extension_action per simulare un clic dell'utente. Infine, ispeziona il DOM o acquisisce uno screenshot per verificare che lo sfondo sia diventato grigio, dimostrando che il boilerplate è funzionale.