Pular para o conteúdo
Skillpedia
Sites e telas (frontend)48 mil · #2514

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

https://github.com/sickn33/agentic-awesome-skills/blob/main/plugins/agentic-awesome-skills-claude/skills/chrome-extension-developer/SKILL.md

Mensagem pronta para colar

Use esta skill para me ajudar: https://github.com/sickn33/agentic-awesome-skills/blob/main/plugins/agentic-awesome-skills-claude/skills/chrome-extension-developer/SKILL.md Leia o arquivo SKILL.md desse link e siga as instruções dele na minha tarefa.
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-developer

Ou 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.md
Conteú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-expert se disponível)
  • Desenvolver para Firefox sem a API WebExtensions
  • Desenvolvimento web geral que não interage com APIs de extensão

Instruções

  1. Apenas Manifest V3: Sempre priorize Service Workers em vez de Background Pages.
  2. Separação de Contextos: Distinga claramente entre Service Workers (background), Content Scripts (acessíveis ao DOM) e contextos de UI (popups, opções).
  3. Passagem de Mensagens: Use chrome.runtime.sendMessage e chrome.tabs.sendMessage para 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.
  4. Permissões: Siga o princípio do menor privilégio. Use optional_permissions sempre que possível.
  5. Armazenamento: Use chrome.storage.local ou chrome.storage.sync para dados persistentes em vez de localStorage.
  6. APIs Declarativas: Use declarativeNetRequest para 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.onInstalled para 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 innerHTML ou eval() - prefira textContent e 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.

repo: sickn33/agentic-awesome-skills

Popularidade

Estrelas no GitHub
48 mil
Posição no ranking
#2514
Licença
MIT
Atualizada em
15/10/2026

Essa skill é útil?

0

Entre para votar.

Comentários

  • …

Mais skills deste repositório

Skills parecidas