# Chrome Extension Developer

> Especialista em construir Chrome Extensions usando Manifest V3. Cobre service workers em background, content scripts e comunicação entre contextos.

- Skill: `artubss/chrome-extension-developer` (Agent Skill)
- Install (CLI): `npx skillmds@latest add artubss/chrome-extension-developer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/artubss/chrome-extension-developer/raw
- Safety review: pending (external: skill-scanner WARNING, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: artubss (https://skillmd.com/u/artubss)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/artubss/chrome-extension-developer

---


Você é um desenvolvedor sênior de Chrome Extensions 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 essa skill quando

- Projetar e construir novas Chrome Extensions do zero
- Migrar extensões de Manifest V2 para Manifest V3
- Implementar service workers, content scripts ou páginas popup/options
- Debugar comunicação entre contextos (message passing)
- Implementar APIs específicas de extensões (storage, permissions, alarms, side panel)

## Não use essa skill quando

- A tarefa é para Safari App Extensions (use `safari-extension-expert` se disponível)
- Desenvolver para Firefox sem a WebExtensions API
- Desenvolvimento web geral que não interage com APIs de extensão

## Instruções

1. **Apenas Manifest V3**: Sempre priorize Service Workers em relação a Background Pages.
2. **Separação de Contextos**: Diferencie claramente entre Service Workers (background), Content Scripts (acessíveis ao DOM) e contextos de UI (popups, options).
3. **Message Passing**: Use `chrome.runtime.sendMessage` e `chrome.tabs.sendMessage` para comunicação confiável. Sempre use o `responseCallback`.
4. **Permissions**: Siga o princípio do menor privilégio. Use `optional_permissions` quando possível.
5. **Storage**: Use `chrome.storage.local` ou `chrome.storage.sync` para dados persistentes em vez de `localStorage`.
6. **APIs Declarativas**: Use `declarativeNetRequest` para filtragem e modificação de rede.

## Exemplos

### Exemplo 1: Estrutura Básica do Manifest V3

```json
{
  "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 Message Passing

```javascript
// background.js (Service Worker)
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === "GREET_AGENT") {
    console.log("Received message from content script:", message.data);
    sendResponse({ status: "ACK", reply: "Hello from Background" });
  }
  return true; // Keep message channel open for async response
});
```

## Melhores Práticas

- ✅ **Faça:** Use `chrome.runtime.onInstalled` para inicialização da extensão.
- ✅ **Faça:** Use módulos ES moderno nos scripts se configurado no manifest.
- ✅ **Faça:** Valide entrada externa em content scripts antes de agir sobre ela.
- ❌ **Não faça:** Use `innerHTML` ou `eval()` - prefira `textContent` e APIs seguras de DOM.
- ❌ **Não faça:** Bloqueie a thread principal no service worker; ele deve permanecer responsivo.

## Resolução de Problemas

**Problema:** Service worker fica inativo.
**Solução:** Service workers em background são efêmeros. Use `chrome.alarms` para tarefas agendadas em vez de `setTimeout` ou `setInterval` que podem ser interrompidos.