Met Chrome DevTools voor agents kan uw agent een browsersessie starten en Chrome-extensies installeren of ermee interageren via een MCP-server. Hierdoor kan uw codeeragent de levenscyclus van de extensie beheren: installeren, herladen en acties uitvoeren.
In plaats van handmatig een uitgepakte extensie te laden, telkens op de herlaadknop in het extensiebeheer te klikken wanneer u de code wijzigt, en de extensie handmatig te activeren om deze te testen, kunt u uw AI-agent de opdracht geven het hele proces autonoom te beheren. Dit overbrugt de kloof tussen statische codegeneratie en live testen van extensies.
Met de extensietools kunt u het volgende doen:
- Extensies installeren: Installeer een uitgepakte Chrome-extensie vanuit een lokale map.
- Extensies weergeven: Haal een lijst op van alle geïnstalleerde Chrome-extensies, inclusief hun naam, ID, versie en inschakelstatus.
- Extensies opnieuw laden: Laad een uitgepakte Chrome-extensie opnieuw via de ID om codewijzigingen direct toe te passen.
- Acties activeren: Activeer de standaardactie van een extensie aan de hand van de ID, zoals het openen van een menu of het uitvoeren van een achtergrondscript (zie chrome.action in de API-documentatie ).
- Extensies verwijderen: Verwijder een Chrome-extensie uit de browsersessie aan de hand van de ID.
Voorwaarden
Voordat u de uitbreidingstools gebruikt, moet u ervoor zorgen dat u over het volgende beschikt:
- Experimentele vlag: De categorie Extensies is standaard niet actief in DevTools voor Agents. U moet de MCP-server configureren met de vlag
--categoryExtensions. - Uitgepakte extensies: Tools zoals
install_extensionvereisen een absoluut pad naar de map met de uitgepakte extensies, waardoor ze ideaal zijn voor lokale ontwikkeling.
Gebruiksscenario's voor Chrome-extensietools
Geef uw agent de opdracht om de levenscyclus van uw extensie te beheren tijdens het ontwikkelen en oplossen van bugs.
Let op: De stappen die de agent uitvoert, zijn voorbeelden van mogelijk gedrag. Uw agent kan zich anders gedragen.
Een extensie snel herhalen en opnieuw laden.
Het handmatig opnieuw laden van een extensie na elke bestandswijziging vertraagt de ontwikkeling. Geef uw agent de opdracht om een codecorrectie toe te passen en de extensie direct opnieuw te laden om het nieuwe gedrag te verifiëren zonder handmatige tussenkomst.
Voorbeeld van een prompt:
Je kunt een algemene aanpak gebruiken:
Verify the extension has access to the active tab.
Of je kunt gedetailleerder zijn:
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.
Voorbeeld van agentuitvoering: Uw agent bewerkt het manifest.json bestand op uw bestandssysteem. Vervolgens roept de agent de tool reload_extension aan met behulp van de opgegeven ID. Ten slotte roept de agent de tool trigger_extension_action aan om de extensie te activeren en te controleren of er geen permissiefouten in de console worden weergegeven.
Test de standaardactie van een extensie op een doelpagina.
Je moet vaak testen hoe een contentscript of extensieactie samenwerkt met een specifieke website. Automatiseer dit proces door je agent de opdracht te geven naar de site te navigeren, de extensie te installeren en deze te activeren.
Voorbeeld van een prompt:
Je kunt een algemene aanpak gebruiken:
Test my extension on example.com and verify it works correctly.
Of je kunt gedetailleerder zijn:
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.
Voorbeeld van agentuitvoering: Uw agent navigeert naar de doel-URL met behulp van navigate_page . Vervolgens gebruikt de agent install_extension met het opgegeven absolute pad. Nadat de extensie is geladen, voert de trigger_extension_action uit om een gebruikersklik te simuleren. Ten slotte gebruikt de list_console_messages om te bevestigen dat het contentscript is uitgevoerd en de verwachte output heeft geproduceerd.
Controleer de geïnstalleerde extensies en ruim ze op.
Tijdens geautomatiseerde tests kan het nodig zijn om te controleren of een extensie correct is geladen met de juiste versie, of om deze te verwijderen om een schone start voor de volgende test te garanderen.
Voorbeeld van een prompt:
Uninstall 'My Test Extension' from the browser.
Voorbeeld van agentuitvoering: Uw agent gebruikt de tool list_extensions om de lijst met geïnstalleerde extensies en hun metadata op te halen. De agent analyseert de uitvoer om de ID te identificeren die is gekoppeld aan "Mijn testextensie". Vervolgens gebruikt de agent de tool uninstall_extension met die ID om de extensie veilig uit de browser te verwijderen.
Maak een nieuwe extensie aan en test deze.
Het ontwikkelen van een nieuwe Chrome-extensie vanaf nul vereist doorgaans het aanmaken van standaardbestanden en het handmatig laden van de uitgepakte map in de browser om deze te testen. Sla deze handmatige configuratie over door uw agent de opdracht te geven de initiële code te genereren, de extensie te laden en de basisfunctionaliteit ervan van begin tot eind in één stap te verifiëren.
Voorbeeld van een prompt:
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.
Voorbeeld van agentuitvoering: Uw agent maakt een basis Manifest V3 manifest.json en een achtergrondservice die luistert naar de chrome.action.onClicked -gebeurtenis. Vervolgens navigeert de agent naar de testpagina, roept install_extension aan en gebruikt trigger_extension_action om een gebruikersklik te simuleren. Ten slotte inspecteert de agent de DOM of maakt een screenshot om te bevestigen dat de achtergrond grijs is geworden, waarmee bewezen wordt dat de boilerplate functioneel is.