Os agentes de programação de IA, como o Antigravity, agora podem gerar código de extensão com uma precisão impressionante. No entanto, para aproveitar todo o potencial delas e garantir resultados de alta qualidade, é necessário fornecer o contexto e as ferramentas certas.
Este guia explica como configurar as ferramentas certas nos seus 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, a Orientação para a Web Moderna, 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 assistentes de programação de IA depurem extensões diretamente no Chrome e aproveitem os recursos de depuração do DevTools e insights de desempenho.
Configuração
Orientação para a Web moderna
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 aparecerem, selecione seus 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. Outra opção é adicionar o plug-in em Personalizações > Criar com plug-ins do Google > Modern Web Guidance.
Chrome DevTools para agentes de programação
É possível adicionar o Chrome DevTools para agentes ao seu agente de programação preferido como um plug-in, uma extensão ou um 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 seus fluxos de trabalho com agentes, adicione o seguinte às instruções do sistema do agente (por exemplo, ~/.gemini/GEMINI.md para Antigravity ou ~/.claude/CLAUDE.md para 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 de APIs:ensina aos agentes sobre as APIs mais recentes, que podem ter sido lançadas depois que o modelo usado foi treinado.
- 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.
- Prontidão para envio:acompanha as informações que você pode precisar para enviar sua extensão à Chrome Web Store, facilitando a distribuição.
A orientação sobre a Web moderna também inclui habilidades que abrangem tudo o que você precisa para oferecer uma excelente experiência do usuário, como desempenho, acessibilidade e APIs modernas. Por exemplo, as habilidades integradas da API de IA garantem que os agentes de programação de IA sempre usem a versão mais recente da API com informações adicionais sobre regras arquitetônicas explícitas e restrições de hardware para usar essas APIs. Isso permite o gerenciamento eficiente de downloads de modelos, o foco na segurança e estratégias de substituição elegantes.
A habilidade também ajuda seu agente a rastrear as informações necessárias para publicação, incluindo justificativas para cada permissão solicitada no código. Por exemplo, se você pedir ao seu agente de programação para criar uma extensão usando a API do painel lateral 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, revise essa justificativa, faça os ajustes necessários e copie direto para o Painel de controle do desenvolvedor.
O Chrome DevTools para agentes permite que 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.
- Liste todas as extensões instaladas e recarregue-as.
- Acionar ações de extensão.
- Inspecione todas as superfícies da extensão (pop-up, painel lateral, service worker).
Confira um comando e um vídeo mostrando 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 de manifesto 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 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, confira nosso guia sobre engenharia de comando.
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 seu agente façam a maior parte do trabalho, ser específico nos comandos pode produzir resultados melhores para a etapa de desenvolvimento em que você está. Confira um guia rápido sobre como pedir ao seu agente para criar, atualizar e manter o arquivo CHROMEWEBSTORE.md.
- Publicação pela primeira vez: quando a extensão está completa e você quer 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 seu
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 revisão, você poderá informar o motivo da rejeição diretamente ao agente e pedir que ele atualize os metadados de compliance.
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
Combinar as habilidades do Modern Web Guidance com o Chrome DevTools para agentes ajuda a criar recursos de alta qualidade mais rápido, além de garantir que sua extensão esteja estável e 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.