O Chrome DevTools para agentes permite que o agente inicie uma sessão do navegador e instale ou interaja com extensões do Chrome usando um servidor MCP. Isso permite que o agente de programação controle o ciclo de vida da extensão: instalação, recarregamento e acionamento de ações.
Em vez de carregar manualmente uma extensão descompactada, clicar no botão de recarregamento na página de gerenciamento de extensões sempre que você mudar o código e acionar manualmente a extensão para testá-la, instrua o agente de IA a gerenciar todo o processo de forma autônoma. Isso preenche a lacuna entre a geração de código estático e o teste de extensão em tempo real.
É possível usar as ferramentas de extensões para fazer o seguinte:
- Instalar extensões do Chrome:instale uma extensão descompactada do Chrome de um caminho de diretório local.
- Listar extensões:recupere uma lista de todas as extensões do Chrome instaladas, incluindo o nome, o ID, a versão e o status ativado.
- Recarregar extensões:recarregue uma extensão do Chrome descompactada pelo ID para aplicar instantaneamente as mudanças de código.
- Acionar ações:acione a ação padrão de uma extensão pelo ID,
como abrir um menu ou executar uma ação de script em segundo plano (consulte
chrome.action na documentação da API
).
- Desinstalar extensões:remova uma extensão do Chrome da sessão do navegador pelo ID.
Pré-requisitos
Antes de usar as ferramentas de extensão, verifique se você tem o seguinte:
- Flag experimental:a categoria "Extensões" não está ativa por padrão no DevTools para agentes. É necessário configurar o servidor MCP com a
--categoryExtensionsflag. - Extensões descompactadas:ferramentas como
install_extensionexigem um caminho absoluto para a pasta de extensão descompactada, o que as torna ideais para o desenvolvimento local.
Casos de uso para ferramentas de extensões do Chrome
Instrua o agente a gerenciar o ciclo de vida da extensão durante o desenvolvimento e a correção de bugs.
Observação:as etapas de execução do agente são exemplos de comportamento potencial. O agente pode agir de maneira diferente.
Iterar e recarregar rapidamente uma extensão
Recarregar manualmente uma extensão após cada mudança de arquivo atrasa o desenvolvimento. Instrua o agente a aplicar uma correção de código e recarregar imediatamente a extensão para verificar o novo comportamento sem intervenção manual.
Exemplo de comando:
Você pode usar uma abordagem geral:
Verify the extension has access to the active tab.
Ou você pode ser mais detalhado:
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.
Exemplo de execução do agente:o agente edita o arquivo manifest.json no sistema de arquivos. Em seguida, ele invoca a ferramenta reload_extension usando o ID fornecido.
Por fim, ele chama a ferramenta trigger_extension_action para ativar a extensão e verificar se nenhum erro de permissão é gerado no console.
Testar a ação padrão de uma extensão em uma página de destino
Muitas vezes, é necessário testar como um script de conteúdo ou uma ação de extensão interage com um site específico. Automatize esse processo instruindo o agente a navegar até o site, instalar a extensão e acioná-la.
Exemplo de comando:
Você pode usar uma abordagem geral:
Test my extension on example.com and verify it works correctly.
Ou você pode ser mais detalhado:
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.
Exemplo de execução do agente:o agente navega até o URL de destino usando navigate_page. Em seguida, ele usa install_extension com o caminho absoluto fornecido. Depois que a extensão é carregada, ela executa trigger_extension_action para simular um clique do usuário. Por fim, ele usa list_console_messages para confirmar que o script de conteúdo foi executado e produziu a saída esperada.
Verificar as extensões instaladas e limpar
Durante os testes automatizados, talvez seja necessário verificar se uma extensão foi carregada corretamente com a versão certa ou removê-la para garantir um estado limpo para o próximo teste.
Exemplo de comando:
Uninstall 'My Test Extension' from the browser.
Exemplo de execução do agente:o agente usa a ferramenta list_extensions para recuperar a lista de extensões instaladas e os metadados delas. Ele analisa a saída para identificar o ID associado a "Minha extensão de teste". Em seguida, ele usa a ferramenta uninstall_extension com esse ID para removê-la com segurança do navegador.
Criar uma nova extensão e testá-la
Para iniciar uma nova extensão do Chrome do zero, geralmente é necessário criar arquivos de modelo e carregar manualmente o diretório descompactado no navegador para testá-lo. Pule essa configuração manual instruindo o agente a gerar o código inicial, carregar a extensão e verificar a funcionalidade básica dela de ponta a ponta em uma única etapa.
Exemplo de comando:
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.
Exemplo de execução do agente:o agente cria um manifest.json básico do Manifest V3 e um service worker em segundo plano que fica à escuta do evento chrome.action.onClicked. Em seguida, ele navega até a página de teste, invoca install_extension e usa trigger_extension_action para simular um clique do usuário. Por fim, ele inspeciona o DOM ou faz uma captura de tela para confirmar que o plano de fundo ficou cinza, comprovando que o modelo é funcional.