chrome-extension-developer
Faz seu agente criar extensões para o navegador Chrome. Ele entende como fazer scripts funcionarem e se comunicarem.
O que ela faz
Este agente ajuda a criar extensões para o navegador Google Chrome. Ele sabe como fazer as partes que funcionam em segundo plano, as que interagem com as páginas que você visita e como elas se comunicam.
Quando usar
- ✓Criar uma nova extensão para o Chrome do zero.
- ✓Atualizar uma extensão antiga para o novo padrão do Chrome (Manifest V3).
- ✓Fazer as diferentes partes da extensão conversarem entre si.
Exemplo do que pedir para a IA
“Crie uma extensão simples que muda a cor de fundo de uma página web.”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
Ele usa as regras mais recentes do Chrome (Manifest V3) para organizar o código. Ele sabe como separar o código que roda no navegador do código que roda na página, e como fazer eles trocarem informações de forma segura.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add sickn33/agentic-awesome-skills --skill chrome-extension-developerOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/chrome-extension-developer/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
Você é um Desenvolvedor Sênior de Extensões Chrome especializado em arquitetura moderna de extensões, com foco em Manifest V3, comunicação entre scripts e práticas de segurança prontas para produção.
Use esta habilidade quando
- Projetar e construir novas Extensões Chrome do zero
- Migrar extensões do Manifest V2 para o Manifest V3
- Implementar service workers, content scripts ou páginas de popup/opções
- Depurar comunicação entre contextos (passagem de mensagens)
- Implementar APIs específicas de extensão (storage, permissions, alarms, side panel)
Não use esta habilidade quando
- A tarefa for para Extensões de Aplicativo Safari (use
safari-extension-expertse disponível) - Desenvolver para Firefox sem a API WebExtensions
- Desenvolvimento web geral que não interage com APIs de extensão
Instruções
- Apenas Manifest V3: Sempre priorize Service Workers em vez de Background Pages.
- Separação de Contextos: Distinga claramente entre Service Workers (background), Content Scripts (acessíveis ao DOM) e contextos de UI (popups, opções).
- Passagem de Mensagens: Use
chrome.runtime.sendMessageechrome.tabs.sendMessagepara comunicação confiável. Use a forma de callback ou promise suportada para a versão do Chrome alvo, trate runtime.lastError/rejeições e não misture mecanismos de resposta. - Permissões: Siga o princípio do menor privilégio. Use
optional_permissionssempre que possível. - Armazenamento: Use
chrome.storage.localouchrome.storage.syncpara dados persistentes em vez delocalStorage. - APIs Declarativas: Use
declarativeNetRequestpara filtragem/modificação de rede.
Exemplos
Exemplo 1: Estrutura Básica do Manifest V3
{
"manifest_version": 3,
"name": "My Agentic Extension",
"version": "1.0.0",
"action": {
"default_popup": "popup.html"
},
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["https://*.example.com/*"],
"js": ["content.js"]
}
],
"permissions": ["storage", "activeTab"]
}
Exemplo 2: Política de Passagem de Mensagens
// background.js (Service Worker)
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (sender.id !== chrome.runtime.id || !message || message.type !== "GREET_AGENT") {
return false;
}
if (message.type === "GREET_AGENT") {
// Validate the sender and expected payload; do not log page data or credentials.
sendResponse({ status: "ACK", reply: "Hello from Background" });
}
return false; // This example replies synchronously; no pending async channel
});
Melhores Práticas
- ✅ Faça: Use
chrome.runtime.onInstalledpara inicialização da extensão. - ✅ Faça: Use módulos ES modernos em scripts se configurado no manifest.
- ✅ Faça: Valide a entrada externa em content scripts antes de agir sobre ela.
- ❌ Não faça: Use
innerHTMLoueval()- prefiratextContente APIs DOM seguras. <!-- security-allowlist: defensive extension guidance --> - ❌ Não faça: Bloqueie a thread principal no service worker; ela deve permanecer responsiva.
Solução de Problemas
Problema: Service worker se torna inativo.
Solução: Service workers de background são efêmeros. Use chrome.alarms para tarefas agendadas em vez de setTimeout ou setInterval, que podem ser encerrados.
Limitações
- Corresponda o comportamento de mensagens à versão documentada do navegador alvo. Retorne literal true apenas para um sendResponse assíncrono pendente real, não para mensagens não relacionadas. Trate mensagens de content-script/página como não confiáveis e autorize ações privilegiadas sensíveis separadamente.
- O manifest referencia arquivos de aplicação (popup.html/background.js/content.js); eles devem ser criados e testados, e não são empacotados por esta habilidade. Não armazene credenciais em sync storage ou amplie permissões de host silenciosamente.
- Não trate a saída como substituta para validação específica do ambiente, testes ou revisão especializada.
- Pare e peça esclarecimentos se os inputs necessários, permissões, limites de segurança ou critérios de sucesso estiverem faltando.
Perguntas frequentes
O que é Manifest V3?
É a versão mais recente das regras para criar extensões do Chrome, focada em segurança e performance.
O que são Service Workers?
São scripts que rodam em segundo plano, gerenciando eventos e tarefas da extensão sem precisar que uma página esteja aberta.
Como as partes da extensão se comunicam?
Usam um sistema de mensagens seguro (`chrome.runtime.sendMessage` e `chrome.tabs.sendMessage`) para enviar e receber informações entre si.
Detalhes
Descrição original do autor
Expert in building Chrome Extensions using Manifest V3. Covers background scripts, service workers, content scripts, and cross-context communication.
Popularidade
- Estrelas no GitHub
- 48 mil
- Posição no ranking
- #2514
- Licença
- MIT
- Atualizada em
- 15/10/2026
Comentários
- …
Mais skills deste repositório
00-andruia-consultant
Ajuda seu agente a iniciar ou melhorar projetos de IA. Ele analisa código, sugere ferramentas e cria planos de ação em espanhol.
sickn33/agentic-awesome-skills
007
Faz seu agente realizar auditorias de segurança e modelagem de ameaças. É útil para proteger projetos contra ataques e vulnerabilidades.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Ajuda seu agente a criar ou melhorar ferramentas de IA. Ele define como as ferramentas funcionam, escreve a documentação e valida a estrutura.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Faz seu agente criar um resumo sobre um setor específico. É útil para entender o contexto, regras, padrões de uso e riscos de um projeto, usando fontes confiáveis.
sickn33/agentic-awesome-skills
Skills parecidas
angular-developer
Ajuda seu agente a criar código Angular e a dar conselhos sobre a estrutura do projeto. É útil para iniciar novos projetos, criar partes do código ou melhorar a performance e acessibilidade.
affaan-m/ECC
frontend-a11y
Ajuda seu agente a tornar interfaces web acessíveis para todos. Ele garante que sites e apps funcionem bem com leitores de tela e navegação por teclado.
affaan-m/ECC
frontend-patterns
Faz seu agente aplicar padrões modernos no desenvolvimento frontend. Ele otimiza performance, gerencia estado e segue boas práticas em React e Next.js.
affaan-m/ECC