Criar extensões com agentes de programação

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 realmente liberar o potencial deles e garantir resultados de alta qualidade, é preciso 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 com mais rapidez.

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 fornece aos agentes de programação de IA a experiência na plataforma da Web, as práticas recomendadas e os padrões de API modernos.

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 aproveitem os recursos de depuração e os insights de desempenho do DevTools.

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) é pela CLI modern-web-guidance criada pela equipe do Chrome. A instalação das habilidades pela CLI do 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 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, ou adicioná-lo em Personalizações > Plug-ins do Build With Google > Modern Web Guidance.

Chrome DevTools para agentes de programação

Você pode 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

1. Baixe o IDE do Antigravity (não recomendamos o Antigravity porque ele não permite editar manualmente a configuração do servidor MCP).

2. Na inicialização ou em Configurações > Personalizações, em Criar com o Google, ative o Chrome DevTools. Isso vai instalar apenas a habilidade do Chrome DevTools, não o servidor MCP.

   

3. Para adicionar o servidor MCP do Chrome DevTools, acesse Configurações > Personalização, clique no botão Adicionar servidor MCP e pesquise por Chrome DevTools.

   

   

   

4. Clique em Abrir configuração do MCP para abrir a configuração do servidor MCP. Para ver o arquivo de configuração no ambiente de desenvolvimento integrado, feche as configurações.

   

5. Adicione os dois parâmetros de configuração a seguir: --categoryExtensions (para ativar as ferramentas de extensões) e --autoConnect (para permitir a conexão com um perfil do Chrome, o que é necessário ao usar as APIs de IA integradas do Chrome ou exigir login).

   {
    "mcpServers": {
      "chrome-devtools-mcp": {
        "args": [
          "-y",
          "chrome-devtools-mcp@latest",
          "--categoryExtensions",
          "--autoConnect"
        ],
        "command": "npx"
      }
    }
   }
   

6. Para ativar a depuração remota, abra o Chrome, acesse chrome://inspect/#remote-debugging e selecione Permitir depuração remota para esta instância do navegador.

   

7. Reinicie o IDE do Antigravity.

8. Crie um novo espaço de trabalho e um comando de teste: "Crie uma extensão Hello World do Chrome. Teste usando o Chrome DevTools." Quando o agente iniciar o teste da extensão no navegador, o Chrome vai mostrar uma caixa de diálogo solicitando permissão de depuração remota. Selecione Permitir. Enquanto a sessão de depuração remota estiver ativada, o Chrome vai mostrar o banner "O Chrome está sendo controlado por um software de teste automatizado".

<figure>
  <img src="image/antigravityide--u84rk62f5t9.png" alt="The remote debugging warning banner and approval popup dialog in Chrome." class="screenshot" width="800">
  <figcaption>The remote debugging banner indicating automated browser control is active.</figcaption>
</figure>

Claude Code

  claude mcp add chrome-devtools --scope project -- npx chrome-devtools-mcp@latest --categoryExtensions --autoConnect

Outros agentes

Para instruções sobre como configurar outros agentes, consulte a documentação no GitHub do MCP do Chrome DevTools.

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 solicitação de 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". No entanto, para simplificar seus Agentic Workflows, adicione o seguinte às instruções do sistema do seu 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 sobre APIs:ensina aos 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.
• Prontidão para envio:ele monitora 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 desempenho, acessibilidade e APIs modernas. Por exemplo, as habilidades integradas da API AI 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 o uso dessas APIs. Isso permite 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 solicitação de 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, ele 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 o envio, revise essa justificativa, faça os ajustes necessários e copie-a diretamente no 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.
• Liste todas as extensões instaladas e as recarregue.
• 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 do Manifest V3 e solicitar a permissão storage porque sabe que precisa manter os dados. Agora, o agente 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 as diferentes técnicas de comando e descobrir 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 o estágio de desenvolvimento em que você está. Confira um guia rápido sobre como pedir ao agente para criar, atualizar e manter seu 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 solicitação de 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, informe o motivo da rejeição diretamente ao agente e peça para ele atualizar 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 você a criar recursos de alta qualidade mais rapidamente, além de garantir que sua extensão esteja estável e pronta para ser enviada à 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.