browser-extension-builder
Desenvolva Extensões de Navegador com Claude
Desenvolver extensões de navegador requer compreender APIs complexas, requisitos do Manifest V3 e compatibilidade entre navegadores. Esta skill oferece orientação especializada sobre arquitetura de extensões, content scripts, padrões de armazenamento e publicação em lojas web.
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“browser-extension-builder”。 Help me create a browser extension that changes the background color of all paragraphs on a page.
预期结果:
Vou ajudá-lo a criar uma extensão de navegador para modificar fundos de parágrafos. Aqui está a estrutura do projeto: manifest.json para configuração, content.js com código de manipulação DOM usando querySelectorAll e permissões adequadas no manifesto. O content script injetará uma mudança de estilo no carregamento da página usando document.addEventListener('DOMContentLoaded').
正在使用“browser-extension-builder”。 How do I save user preferences in my extension?
预期结果:
Use as APIs chrome.storage.local.set() e chrome.storage.local.get(). Vou mostrar o padrão de wrapper async com Promises para código mais limpo. Isso persiste dados localmente no navegador com limite de 5MB. Para configurações que sincronizam entre dispositivos, use chrome.storage.sync.
正在使用“browser-extension-builder”。 What's the difference between content scripts and background scripts?
预期结果:
Content scripts rodam no contexto de páginas web e podem acessar o DOM, enquanto background service workers rodam independentemente e gerenciam eventos, mantêm estado e coordenam entre componentes. Content scripts veem a página; background workers veem o navegador. A comunicação acontece via chrome.runtime.sendMessage e chrome.runtime.onMessage.
安全审计
安全Static analysis detected 36 potential issues, all of which are false positives from code examples in documentation. The flagged patterns (shell command syntax, innerHTML usage, URLs, storage keys) appear exclusively within markdown code blocks as educational examples for browser extension development. No executable code or security threats were found. This is a legitimate documentation skill.
低风险问题 (1)
质量评分
你能构建什么
Desenvolva uma Extensão de Produtividade
Crie uma extensão do Chrome que aprimora sua experiência de navegação com ferramentas úteis e atalhos.
Desenvolva Extensões Multi-Navegador
Construa extensões que funcionam perfeitamente no Chrome, Firefox e outros navegadores usando APIs padrão.
Monetize Extensões de Navegador
Crie e publique extensões de navegador com estratégias de monetização para a Chrome Web Store.
试试这些提示
Ajude-me a criar uma extensão de navegador simples que destaca texto específico em páginas web. Preciso dos arquivos manifest.json, content script e interface popup.
Tenho uma extensão de navegador básica. Ajude-me a adicionar a Chrome Storage API para que os usuários possam salvar suas configurações entre sessões.
Mostre-me como configurar troca de mensagens entre o popup, background service worker e content scripts da minha extensão. Preciso enviar dados do popup para modificar o conteúdo da página.
Tenho uma extensão de navegador concluída. Guie-me pelo processo de preparação para publicação na Chrome Web Store, incluindo empacotamento, screenshots e requisitos de listagem da loja.
最佳实践
- Solicite permissões mínimas necessárias para sua extensão funcionar e use permissões opcionais para recursos que podem ser habilitados posteriormente
- Mantenha background service workers leves pois o Manifest V3 encerra workers ociosos para economizar recursos
- Use seletores DOM estáveis e adicione tratamento de erros para evitar quebras quando sites atualizarem sua estrutura
避免
- Solicitar permissões amplas como <all_urls> ou abas quando você só precisa acesso a sites específicos
- Realizar processamento pesado em background workers em vez de delegar para content scripts ou usar alarms
- Usar seletores frágeis que quebram quando sites mudam, sem tratamento de erros ou monitoramento