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 precisão impressionante. No entanto, para realmente liberar o potencial deles e garantir resultados de alta qualidade, é necessário 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, o 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 conforme o 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 preferido e adicione a habilidade de extensões a ele. Confira as instruções de 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 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 Customizaçõ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 de alguns dos agentes mais usados.

Antigravity

1. Faça o download do IDE do Antigravity (não recomendado, porque não permite editar manualmente a configuração do servidor MCP).

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

   

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

   

   

   

4. Clique em Abrir configuração do MCP para abrir a configuração do servidor MCP. É necessário fechar as configurações para ver o arquivo de configuração no IDE.

   

5. Adicione os dois parâmetros de configuração a seguir: --categoryExtensions (para ativar as ferramentas de extensões) e --autoConnect (para ativar a conexão a um perfil do Chrome atual, que é necessária 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 do Chrome Hello World. 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 um 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 os documentos 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 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 do agente, 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 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 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 a criar recursos de alta qualidade mais rapidamente, mas também garante que a 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.