Met Chrome DevTools voor agenten kan je agent een browsersessie starten en Chrome-extensies installeren of ermee werken via een MCP-server. Hiermee kan je coderingsagent de levenscyclus van de extensie beheren: installeren, opnieuw laden en acties activeren.
In plaats van handmatig een uitgepakte extensie te laden, elke keer dat je de code wijzigt op de pagina voor extensiebeheer op de knop voor opnieuw laden te klikken en de extensie handmatig te activeren om deze te testen, geef je je AI-agent de opdracht om het hele proces zelfstandig te beheren. Dit overbrugt de kloof tussen statische codegeneratie en live extensietests.
U kunt de extensietools gebruiken om het volgende te doen:
- Extensies installeren: Installeer een uitgepakte Chrome-extensie via een lokaal directorypad.
- Extensies vermelden: Haal een lijst op van alle geïnstalleerde Chrome-extensies, inclusief de naam, ID, versie en status (aan of uit).
- Extensies opnieuw laden: Laad een uitgepakte Chrome-extensie opnieuw op basis van de ID om code-wijzigingen onmiddellijk toe te passen.
- Acties activeren: Activeer de standaardactie van een extensie op basis van de ID, zoals een menu openen of een achtergrondscriptactie uitvoeren (zie chrome.action in de API-documentatie).
- Extensies verwijderen: Verwijder een Chrome-extensie uit de browsersessie op basis van de ID.
Vereisten
Zorg dat je het volgende hebt voordat je de extensietools gebruikt:
- Experimentele flag: 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 extensie, waardoor ze ideaal zijn voor lokale ontwikkeling. Bestandstoegang tot de extensiemap: De server kan alleen bestanden lezen in de werkruimteroots. Dit zijn de wortels die uw MCP-client biedt, zoals uw projectmap. Als je client geen roots biedt, heeft de server alleen toegang tot de tijdelijke directory van het OS. Op macOS is deze directory niet
/tmp. Als de extensiemap zich buiten deze roots bevindt, misluktinstall_extensionmet de foutAccess denied. Als je een andere map wilt toestaan, voeg je de vlag--filesystemRoot(alias--workspace) toe aan je serverargumenten:"args": ["chrome-devtools-mcp@latest", "--categoryExtensions", "--filesystemRoot=/path/to/extensions"]Ga naar Bestandstoegang buiten de tijdelijke directory toestaan voor meer informatie.
Use cases voor tools voor Chrome-extensies
Geef je agent de opdracht om de levenscyclus van je extensie te beheren terwijl je bugs ontwikkelt en oplost.
Opmerking: De uitvoeringsstappen van de agent zijn voorbeelden van mogelijk gedrag. Je agent kan zich anders gedragen.
Snel een extensie herhalen en opnieuw laden
Als je een extensie na elke bestandswijziging handmatig opnieuw laadt, vertraagt dit de ontwikkeling. Vraag je agent om een codefix toe te passen en de extensie onmiddellijk opnieuw te laden om het nieuwe gedrag te verifiëren zonder handmatige tussenkomst.
Voorbeeldprompt:
Je kunt een algemene aanpak gebruiken:
Verify the extension has access to the active tab.
Je kunt ook 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: Je agent bewerkt het bestand manifest.json in je bestandssysteem. Daarna wordt de reload_extension-tool aangeroepen met de verstrekte ID.
Tot slot roept de tool trigger_extension_action aan om de extensie te activeren en te verifiëren dat er geen rechtenfouten worden weergegeven in de console.
De standaardactie van een extensie testen op een doelpagina
Je moet vaak testen hoe een contentscript of extensieactie samenwerkt met een specifieke website. Automatiseer dit proces door je agent te instrueren naar de site te gaan, de extensie te installeren en deze te activeren.
Voorbeeldprompt:
Je kunt een algemene aanpak gebruiken:
Test my extension on example.com and verify it works correctly.
Je kunt ook 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 uitvoering door de agent: De agent gaat naar de doel-URL met navigate_page. Daarna wordt install_extension gebruikt met het verstrekte absolute pad. Nadat de extensie is geladen, voert deze trigger_extension_action uit om een gebruikersklik te simuleren. Tot slot gebruikt de extensie list_console_messages om te bevestigen dat het contentscript is uitgevoerd en de verwachte uitvoer heeft opgeleverd.
Geïnstalleerde extensies controleren en opschonen
Tijdens geautomatiseerde tests moet je misschien nagaan of een extensie correct is geladen met de juiste versie of de extensie verwijderen om een schone status te garanderen voor de volgende test.
Voorbeeldprompt:
Uninstall 'My Test Extension' from the browser.
Voorbeeld van uitvoering door de agent: Je agent gebruikt de tool list_extensions om de lijst met geïnstalleerde extensies en de bijbehorende metadata op te halen. De uitvoer wordt geparseerd om de ID te identificeren die is gekoppeld aan My Test Extension. Daarna wordt de tool uninstall_extension met die ID gebruikt om de ID veilig uit de browser te verwijderen.
Een nieuwe extensie maken en testen
Als je een nieuwe Chrome-extensie helemaal zelf wilt maken, moet je meestal boilerplate-bestanden maken en de uitgepakte directory handmatig in de browser laden om deze te testen. Sla deze handmatige instelling over door je agent te instrueren de eerste code te genereren, de extensie te laden en de basisfuncties end-to-end te verifiëren in één stap.
Voorbeeldprompt:
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.
Voorbeeld van agentuitvoering: Je agent maakt een basis Manifest V3manifest.json en een achtergrondservice worker die luistert naar de gebeurtenis chrome.action.onClicked. Daarna gaat het naar de testpagina, roept het install_extension aan en gebruikt het trigger_extension_action om een gebruikersklik te simuleren. Tot slot inspecteert de test de DOM of maakt deze een screenshot om te bevestigen dat de achtergrond grijs is geworden. Dit bewijst dat de boilerplate werkt.