Tutorial · 2026-07-12

Criando uma Extensão Chrome com Agentes de IA

Tutorial completo para criar uma extensão para Chrome usando Claude Code e Codex, do manifesto à publicação na Chrome Web Store.

Extensões para Chrome são ferramentas poderosas que podem modificar a experiência de navegação, automatizar tarefas repetitivas e integrar serviços diretamente no navegador. Com agentes de IA, criar uma extensão completa — do manifest.json ao popup.js — se torna um processo acelerado e acessível. Neste tutorial, você vai aprender a criar uma extensão Chrome com agentes de IA usando Claude Code e Codex no Windows 11.

O que vamos construir

Vamos desenvolver uma extensão de gerenciamento de abas e favoritos que permite:

Visualizar e pesquisar abas abertas
Salvar sessões de abas como grupos
Gerenciar favoritos por categorias
Sincronizar dados entre dispositivos via Chrome Storage Sync
Interface moderna com React (via popup HTML)

Imagem sugerida: Mockup da extensão aberta mostrando o popup com lista de abas, campo de pesquisa e botões de ação.

Manifest V3 e estrutura com Claude Code

O Manifest V3 é a versão mais recente da plataforma de extensões Chrome. Claude Code conhece suas APIs e restrições.

Criação da estrutura

Peça ao Claude Code para criar a estrutura completa:

claude "Crie a estrutura de uma extensão Chrome Manifest V3 para gerenciamento de abas e favoritos. Crie os arquivos: manifest.json com: - manifest_version: 3 - name: 'Tab Manager Pro' - permissions: tabs, bookmarks, storage, alarms - host_permissions: <all_urls> - action: default_popup popup.html, default_icon - background: service_worker background.js, type module - options_page: options.html Estrutura de pastas: - src/popup/ (popup.html, popup.js, popup.css) - src/background/ (background.js) - src/content/ (content.js) - src/options/ (options.html, options.js) - src/icons/ - tests/"

Claude Code cria todo o scaffolding em segundos, com as permissões corretas e a estrutura de diretórios.

Manifest.json detalhado

Para um controle mais fino, peça ajustes específicos:

claude "Atualize o manifest.json para incluir: 1. Ícones em tamanhos 16, 48, 128 2. Commands de teclado: Ctrl+Shift+T para abrir popup, Ctrl+Shift+S para salvar sessão 3. DeclarativeNetRequest para bloquear sites distrativos (opcional) 4. Content security policy adequada para extensões V3"

Content scripts com Codex

Content scripts são scripts que rodam no contexto da página. Codex é ideal para gerar esse tipo de código padronizado.

Content script principal

opencode "Crie src/content/content.js com as funcionalidades: 1. Destacar elementos da página quando recebe mensagem HIGHLIGHT_ELEMENT 2. Extrair metadados da página (título, descrição, og:image) quando recebe EXTRACT_META 3. Injetar um botão flutuante em páginas de documentação para salvar rápido 4. Observar mudanças no DOM via MutationObserver para detectar SPAs 5. Comunicar título e URL atualizados via chrome.runtime.sendMessage O content script não deve interferir com o layout original da página (use shadow DOM quando possível)."

Utilitários

opencode "Crie src/utils/storage.js com funções auxiliares para chrome.storage.sync e chrome.storage.local: - getSession(name): recupera sessão salva - saveSession(name, tabs): salva sessão atual - listSessions(): lista todas as sessões - deleteSession(name): deleta sessão - getSettings(): recupera configurações do usuário - saveSettings(settings): salva configurações Use async/await e trate erros de quota excedida."

Armazenamento e configurações

Vamos usar Claude Code para criar a página de opções da extensão.

claude "Crie src/options/options.html e src/options/options.js com: 1. Seção de preferências: tema (claro/escuro), número máximo de abas por sessão, atalhos de teclado customizados 2. Seção de sincronização: status da conta, botão de sincronizar agora 3. Seção de dados: botão de exportar dados (JSON), botão de importar, botão de limpar dados 4. Seção sobre: versão da extensão, links para documentação e reportar bug Use chrome.storage.sync para preferências e chrome.storage.local para dados volumosos."

Testes e publicação

Antes de publicar, vamos testar a extensão e preparar o pacote.

Testes com Puppeteer

opencode "Crie tests/extension.test.js com Puppeteer para testar a extensão Chrome: 1. Carregar extensão não empacotada no Chromium 2. Abrir popup e verificar se a lista de abas aparece 3. Clicar em 'Salvar Sessão' e verificar se foi salva 4. Pesquisar aba por título 5. Fechar aba pelo popup Use jest e @puppeteer/test com --headed para debug."

Preparando para publicação

claude "Crie um script de build que: 1. Minifica popup.js, background.js e content.js com terser 2. Otimiza imagens dos ícones 3. Gera o arquivo .zip para upload na Chrome Web Store 4. Valida o manifest.json com chrome-webstore-validator-cli Adicione o script 'build:ext' no package.json."

Sua extensão Chrome com agentes de IA está pronta para uso e publicação.

FAQ — Perguntas Frequentes

Preciso saber JavaScript para criar extensões Chrome com IA?

Sim, conhecimento de JavaScript/TypeScript é essencial. Os agentes geram o código, mas você precisa entender a arquitetura de extensões Chrome para revisar e depurar.

O Manifest V3 é suportado pelos agentes de IA?

Sim. Claude Code e Codex conhecem as APIs do Manifest V3, incluindo service workers, declarativeNetRequest e offscreen documents.

Consigo publicar na Chrome Web Store uma extensão gerada por IA?

Sim. A extensão gerada segue os padrões da Chrome Web Store. Revise as permissões do manifest.json e garanta que o código não viola as políticas de privacidade.

Como testar uma extensão Chrome gerada por IA?

Carregue a extensão não empacotada em chrome://extensions com o modo desenvolvedor ativado. Claude Code pode gerar também testes com Puppeteer.

Dá para usar Claude Code e Codex simultaneamente em uma extensão Chrome?

Sim. Com o Orquestra, Claude Code cria o popup e background scripts enquanto Codex gera os content scripts e utilitários — tudo em paralelo no mesmo canvas.

Comece a criar extensões Chrome com agentes hoje

Neste tutorial, você aprendeu a criar uma extensão Chrome com agentes de IA usando Claude Code e Codex. Do manifesto à publicação, cada etapa foi acelerada pelos agentes.

Quer levar essa orquestração para o próximo nível? O Orquestra conecta Claude Code, Codex e outros agentes no mesmo canvas infinito no Windows 11. Baixe o Orquestra e comece seu teste grátis de 7 dias.

Links internos recomendados

APIs REST com Agentes de IA — crie uma API para sua extensão se conectar
TypeScript React com Agentes de IA — aprofunde-se em componentes React para o popup
Testes Automatizados com Agentes de IA — aprenda a testar extensões com Puppeteer

Pronto para orquestrar seus agentes?

Baixe o Orquestra para Windows 11 e comece a coordenar seus agentes de IA em um canvas infinito. Grátis por 7 dias.

Começar teste grátis