Chrome DevTools per gli 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, ricarica e attivazione delle azioni.
Invece di caricare manualmente un'estensione non compressa, fare clic sul pulsante di ricarica 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 live delle estensioni.
Puoi utilizzare gli strumenti per le estensioni per svolgere le seguenti operazioni:
- Installare le estensioni: installa un'estensione di Chrome non compressa 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 dell'applicazione.
- 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. Accesso ai file alla cartella dell'estensione: il server può leggere solo i file all'interno delle radici dello spazio di lavoro. Queste sono le radici fornite dal client MCP, ad esempio la directory del progetto. Se il client non fornisce radici, il server può accedere solo alla directory temporanea del sistema operativo. Su macOS, questa directory non è
/tmp. Se la cartella dell'estensione si trova al di fuori di queste radici,install_extensionnon riesce a essere eseguito e viene visualizzato un erroreAccess denied. Per consentire l'accesso a un'altra cartella, aggiungi il flag--filesystemRoot(alias--workspace) agli argomenti del server:"args": ["chrome-devtools-mcp@latest", "--categoryExtensions", "--filesystemRoot=/path/to/extensions"]Per maggiori dettagli, vedi Consentire l'accesso ai file al di fuori della directory.
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. L'agente potrebbe agire in modo diverso.
Eseguire rapidamente l'iterazione e ricaricare un'estensione
La ricarica 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.
Esempio di prompt:
Puoi utilizzare un approccio generale:
Verify the extension has access to the active tab.
Oppure puoi essere più dettagliato:
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.
Esempio di esecuzione dell'agente: 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.
Esempio di prompt:
Puoi utilizzare un approccio generale:
Test my extension on example.com and verify it works correctly.
Oppure puoi essere più dettagliato:
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.
Esempio di esecuzione dell'agente: 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, potresti dover verificare se un'estensione è stata caricata correttamente con la versione giusta o rimuoverla per garantire uno stato pulito per il test successivo.
Esempio di prompt:
Uninstall 'My Test Extension' from the browser.
Esempio di esecuzione dell'agente: 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
In genere, per avviare una nuova estensione di Chrome da zero è necessario creare file boilerplate e caricare manualmente la directory non compressa 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.
Esempio di prompt:
Build a Chrome extension that turns the page background gray when I click its icon. Save the files to a 'gray-bg-ext' folder in my project, navigate to example.com, load the extension, and verify that it works.
Esempio di esecuzione dell'agente: 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.