Cinthia Andrade

Posted on Oct 1

Criando uma extensão do Chrome em minutos com ChatGPT

#webdev #programming #ai #javascript

Recentemente precisei de algo bem simples, mas que poderia aumentar muito minha produtividade:
uma extensão do Chrome que recarregasse automaticamente a aba atual a cada X segundos.

Em vez de gastar horas pesquisando e montando tudo manualmente, decidi experimentar algo: usar o ChatGPT para gerar a base da extensão.
E o resultado foi muito bomm!

O desafio

Criar uma extensão para recarregar automaticamente a aba atual.
Ter opções de intervalos personalizados e presets.
Possibilidade de ignorar o cache (como um Ctrl+F5).
UI simples e funcional.
Segura (CSP correta, sem inline scripts).
Que eu pudesse testar localmente.

O prompt inicial que usei

Quero criar uma extensão de Chrome (de forma segura e rapida) para que recarregue automaticamente a aba atual a cada X segundos. 

Requisitos:
- Estrutura separada em arquivos.
- Segurança: Manter requisitos de segurança, para não sofrer nenhum tipo de ataque.
- UI:
  - Dark theme moderno, acessível (labels, aria-live para status).
  - CSS separado e bem estruturado.
- Código organizado, claro e comentado.
- Ícones simples, sugira os icones.

Por favor, me entregue o código de cada arquivo em blocos separados, prontos para copiar e colar.

O ChatGPT me retornou toda a estrutura básica de arquivos:

manifest.json
background.js
popup.html
popup.js

Pronto para ser copiado e carregado via chrome://extensions.

Estrutura final

Depois de algumas iterações e melhorias, minha extensão ficou assim:

auto-reloader/
├── manifest.json
├── background.js
├── popup.html
├── popup.css
├── popup.js
├── icons/
│   ├── 16.png
│   ├── 32.png
│   ├── 48.png
│   └── 128.png

✨ Funcionalidades que adicionei

Presets rápidos: 5s, 10s, 30s, 60s, 2m.
Input customizado com botão Aplicar/Atualizar.
Enter no campo já ativa a mudança (sem precisar parar).
Switch “ignorar cache” (recarrega sempre do servidor).
Atalho global: Ctrl+Shift+L (Win/Linux) ou Cmd+Shift+L (Mac).
Contagem regressiva: mostra em tempo real quanto falta para o próximo reload.
CSP segura configurada no manifest.json.

Segurança e boas práticas

Nada de unsafe-inline.
CSP rígida definida no manifest.json.
Permissões mínimas: tabs, storage, alarms, activeTab.
Intervalo validado entre 1 segundo e 24 horas.
Limpeza automática de alarms quando a aba fecha.

Testando localmente

Crie a pasta auto-reloader/ e adicione os arquivos.
Abra chrome://extensions → Modo do desenvolvedor → Carregar sem compactação.
Selecione a pasta.
O ícone aparecerá na barra de extensões → clique e configure.

Extras: ícones

Para os ícones, pedi ao ChatGPT sugestões visuais e até a geração de um círculo com seta em loop (símbolo de reload).
Depois só redimensionei para os tamanhos necessários (16, 32, 48, 128).

Reflexão final

Esse experimento me mostrou o poder de usar IA como parceiro de desenvolvimento.
O ChatGPT não apenas me entregou código pronto, como também ajudou a:

pensar na UX,
reforçar a segurança,
organizar melhor o projeto,
gerar ícones e documentação.

O resultado: em poucas horas, na verdade em 30min no máximo kkkk, tive uma extensão funcional que eu estava precisando.

Prompts úteis (prontos para você usar)

Aqui estão alguns dos prompts que usei ao longo do processo:

Criar a extensão básica:

Quero criar uma extensão de Chrome (Manifest V3) que faça o seguinte:

Objetivo:
- [Descreva aqui o que a extensão deve fazer, ex.: recarregar a aba atual automaticamente a cada X segundos]

Requisitos técnicos:
- Estrutura separada em arquivos: manifest.json, background.js, popup.html, popup.css, popup.js
- Permissões mínimas necessárias: [tabs, storage, alarms, activeTab, etc.]
- Validar entradas do usuário: [ex.: intervalo mínimo e máximo permitido]
- Garantir segurança:
  - CSP definida apenas no manifest.json
  - Nada de inline scripts
  - Limpeza de dados/alarms quando aba for fechada

Interface (popup):
- Deve conter: [inputs, botões, presets, mensagens de status, switches, etc.]
- Funcionalidades extras: [atalho de teclado, contagem regressiva, notificações, etc.]
- Estilo visual: [dark/light theme, minimalista, moderno, acessível com aria-labels]

Extras:
- Ícones em diferentes tamanhos (16, 32, 48, 128) na pasta `icons/`
- Código organizado, claro e comentado
- Entregar cada arquivo em blocos separados, prontos para copiar e colar

Por favor, me entregue o código de cada arquivo (manifest.json, background.js, popup.html, popup.css, popup.js) em blocos separados.

Conclusão

A IA já está ai, fazendo muita coisa, então porque não aproveitar ao máximo do seu potencial para aumentarmos nossa produtividade? o que eu mais gosto na IA é isso, o poder que ela tem de potencializar a produtividade, sem substituir o papel do desenvolvedor: eu continuo no controle, mas com um copiloto super poderoso ao meu lado.

E você, já criou alguma ferramenta própria com ajuda de IA?
Conta aqui nos comentários!

DEV Community