Os agentes de programação de IA, como o Antigravity, agora podem gerar código de extensão com precisão impressionante. No entanto, para realmente liberar o potencial deles e garantir resultados de alta qualidade, você precisa fornecer o contexto e as ferramentas certas.
Este guia explica como configurar as ferramentas certas nos agentes de programação e como elas podem ajudar você a criar extensões melhores mais rapidamente.
Criamos uma habilidade para agentes de programação projetada especificamente para o desenvolvimento de extensões. Essa habilidade faz parte da nossa iniciativa mais ampla, Modern Web Guidance, que oferece aos agentes de programação de IA a experiência da plataforma da Web, as práticas recomendadas e os padrões modernos de API.
Mas criar a extensão é apenas o primeiro passo. Para ajudar você a verificar se o código funciona como esperado, o Chrome DevTools para agentes permite que os assistentes de programação de IA depurem extensões diretamente no Chrome e se beneficiem dos recursos de depuração do DevTools e dos insights de performance.
Configuração
Modern Web Guidance
Para usar o pacote de habilidades, instale o Modern Web Guidance no ambiente de sua preferência e adicione a habilidade de extensões a ele. Confira as instruções para algumas das ferramentas mais usadas.
CLI
A instalação recomendada para a maioria dos agentes de programação (incluindo a CLI do Gemini, o Claude Code e o Codex) é feita pela CLI modern-web-guidance criada pela equipe do Chrome. A instalação das habilidades pela CLI modern-web-guidance as mantém atualizadas automaticamente.
npx modern-web-guidance@latest install --choose
Isso executa um assistente interativo para instalar as habilidades de acordo com suas preferências. Quando as opções forem apresentadas, selecione os agentes de programação e escolha chrome-extensions e modern-web-guidance.
Antigravity
Ao instalar o Antigravity, você pode selecionar o plug-in Modern Web Guidance , que inclui a habilidade de extensões, ou adicioná-lo em Personalizações > Criar com plug-ins do Google > Modern Web Guidance.
Chrome DevTools para agentes de programação
Você pode adicionar o Chrome DevTools para agentes ao agente de programação de sua escolha como um plug-in, extensão ou servidor MCP.
Confira as instruções para alguns dos agentes mais usados.
Antigravity
Para usar o servidor MCP do Chrome DevTools, siga as instruções da documentação do Antigravity para instalar um servidor MCP personalizado. Adicione o seguinte à configuração dos servidores MCP:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--category-extensions",
"-y"
]
}
}
}
Claude Code
claude mcp add chrome-devtools --scope project -- npx chrome-devtools-mcp@latest --categoryExtensions
Outros agentes
Para instruções sobre como configurar outros agentes, consulte a documentação no GitHub do Chrome DevTools MCP.
Instruções do agente CHROMEWEBSTORE.md
Uma parte importante da publicação de uma extensão é preencher o Painel de controle do desenvolvedor. A habilidade resolve isso fazendo com que o agente de programação crie e mantenha um arquivo CHROMEWEBSTORE.md que rastreia as informações necessárias, incluindo justificativas para cada permissão solicitada no código.
A habilidade será acionada quando você usar frases como "Vamos publicar isso" ou "Prepare esta extensão para a loja", mas, para simplificar os fluxos de trabalho agênticos, adicione o seguinte às instruções do sistema do agente (por exemplo, ~/.gemini/GEMINI.md para o Antigravity ou ~/.claude/CLAUDE.md para o Claude):
Whenever you are creating or making changes to a Chrome extension, create and manage a CHROMEWEBSTORE.md file. You can use the chrome-extensions skill to learn about the format of this file.
Criar e testar sua extensão com agentes de programação
A habilidade de extensão incluída no Modern Web Guidance ajuda os agentes de três maneiras principais:
- Conhecimento atualizado da API:ensina os agentes sobre as APIs mais recentes, que podem ter sido lançadas após o treinamento do modelo que você está usando.
- Práticas recomendadas:garante que os agentes tenham acesso a todas as práticas recomendadas que nossa equipe aprendeu ao longo dos anos criando extensões do Chrome.
- Preparação para envio:acompanha as informações necessárias para enviar sua extensão à Chrome Web Store, facilitando a distribuição.
O Modern Web Guidance também inclui habilidades que abrangem tudo o que você precisa para oferecer uma excelente experiência do usuário, como performance, acessibilidade e APIs modernas. Por exemplo, as habilidades de API de IA integradas garantem que os agentes de programação de IA sempre usem a versão mais recente da API, além de informações adicionais sobre regras arquitetônicas explícitas e restrições de hardware para usar essas APIs, para permitir o gerenciamento eficiente de downloads de modelos, o foco na segurança e estratégias de fallback adequadas.
A habilidade também ajuda o agente a rastrear as informações necessárias para a publicação, incluindo justificativas para cada permissão solicitada no código. Por exemplo, se você pedir ao agente de programação para criar uma extensão usando a API Side Panel e publicá-la na Chrome Web Store, o agente vai reconhecer que precisa da permissão sidePanel. Em seguida, ele vai criar um arquivo CHROMEWEBSTORE.md com uma justificativa. Quando estiver tudo pronto para enviar, você poderá revisar essa justificativa, fazer ajustes, se necessário, e copiá-la diretamente para o Painel de controle do desenvolvedor.
O Chrome DevTools para agentes permite que os assistentes de programação de IA instalem e depurem extensões em uma instância do Chrome em execução, especificamente:
- Instalar e desinstalar extensões.
- Listar todas as extensões instaladas e recarregá-las.
- Acionar ações de extensão.
- Inspecionar todas as superfícies da extensão (pop-up, painel lateral, service worker).
Confira um comando e um vídeo que mostram como isso funciona na prática:
Build a simple "Quick notes" extension that opens a popup text area to save notes and test it in the browser.
Nesse caso, o agente precisa criar um arquivo Manifest V3 e solicitar a permissão storage porque sabe que precisa manter os dados. O agente agora pode criar uma extensão, instalá-la, assistir à execução e verificar a estabilidade dela sem que você precise sair da interface de chat.
Este é um exemplo de comando simples. Para saber mais sobre diferentes técnicas de comando e encontrar o que funciona melhor para seu caso de uso, consulte nosso guia sobre engenharia de comandos.
Exemplos de comandos para simplificar a distribuição com CHROMEWEBSTORE.md
Embora a instalação da habilidade de extensão e a adição de instruções ao agente façam a maior parte do trabalho, ser específico nos comandos pode produzir resultados melhores para a fase de desenvolvimento em que você está. Confira um guia rápido sobre como pedir ao agente para criar, atualizar e manter o arquivo CHROMEWEBSTORE.md.
- Primeira publicação: quando a extensão estiver completa e você quiser gerar sua presença inicial na loja.
Prepare the extension for publication on the Chrome Web Store.
- Atualização de permissões e justificativas: a Chrome Web Store aplica a política de propósito único e exige justificativas detalhadas para cada permissão solicitada no
manifest.json.
We just added the 'declarativeNetRequest' and 'storage' permissions to our manifest. Let's update our store listing.
- Como lidar com uma rejeição da loja: se a extensão for rejeitada ou sinalizada durante o processo de análise, você poderá informar o motivo da rejeição diretamente ao agente e pedir que ele atualize os metadados de conformidade.
Our extension submission was rejected because our privacy policy doesn't explicitly mention how we handle user data locally. Let's update the privacy policy section in CHROMEWEBSTORE.md to resolve this.
Conclusão
A combinação das habilidades do Modern Web Guidance com o Chrome DevTools para agentes ajuda você a criar recursos de alta qualidade mais rapidamente, mas também garante que sua extensão seja estável e esteja pronta para envio à Chrome Web Store.
Comece a testar essas ferramentas no seu próximo projeto para ver como elas podem simplificar o desenvolvimento de extensões, desde o protótipo inicial até a publicação.