Forem: Cinthia Andrade

Criando uma extensão do Chrome em minutos com ChatGPT

Cinthia Andrade — Wed, 01 Oct 2025 02:39:01 +0000

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!

Bem-vindo ao desenvolvimento Web: Um guia prático para quem está começando do zero

Cinthia Andrade — Mon, 06 Jan 2025 19:51:25 +0000

Tópicos

Introdução
O Que é a Web e Como Ela Funciona?
Como Deixar Seu Site Disponível para o Mundo
Ferramentas Essenciais para Desenvolvedores
Quanto Dá para Ganhar no Desenvolvimento Web?
Dicas para Quem Está Começando
Conclusão: Comece Hoje Mesmo

Introdução

Se você está aqui, é porque quer entender como funciona o mundo do desenvolvimento web e, quem sabe, dar seus primeiros passos em uma nova carreira. Este guia é para você que não sabe nada sobre a área e quer começar do começo, entendendo os fundamentos antes de mergulhar em linguagens e ferramentas. Vamos explorar juntos, de forma prática e acessível, como iniciar nessa jornada.

O Que é a Web e Como Ela Funciona?

A web é uma rede global que conecta milhões de dispositivos e sistemas, permitindo que informações sejam acessadas e compartilhadas em tempo real. Ou seja, a web é como uma grande biblioteca digital. Quando você acessa um site, está pedindo informações que estão armazenadas em algum lugar do mundo. O navegador (como o Google Chrome ou Firefox) é como o "bibliotecário" que busca e organiza essas informações para você.

Aqui estão os elementos principais que fazem tudo funcionar:

1. Navegador e Servidor
Vamos entender o que acontece quando você acessa o site https://www.pudim.com.br/. O navegador faz uma solicitação, um pedido ao servidor, que responde com os arquivos necessários para exibir a página. No caso do Pudim, o servidor retorna um arquivo HTML contendo uma estrutura básica do site, que inclui um título, uma imagem e um link de e-mail.

O navegador é o programa que você usa para acessar a internet (Chrome, Firefox e etc). Ele faz pedidos de informações e exibe as páginas de forma organizada.
O servidor é o computador que armazena os arquivos do site (textos, imagens, vídeos) e os envia ao seu navegador quando você, usuário, solicita. Pense no servidor como um "computador especializado" que guarda os arquivos do site (textos, imagens, vídeos) e atende aos pedidos do navegador enviando esses arquivos. Ele é essencial para que o site fique acessível na web.
No caso do Pudim, o servidor retorna um arquivo HTML contendo uma estrutura básica do site, que inclui um título, uma imagem e um link de e-mail.

2. Como o Navegador e o Servidor se Comunicam?
Quando você acessa um site, como o Pudim, o navegador e o servidor precisam "conversar" para que o conteúdo seja exibido corretamente. Essa comunicação ocorre através do HTTP (HyperText Transfer Protocol), um conjunto de regras que define como as informações devem ser enviadas e recebidas. O navegador envia uma solicitação ao servidor (chamada de requisição HTTP), e o servidor responde com os arquivos necessários (como o HTML, CSS, e JavaScript) para montar a página no navegador. Essa troca de informações é rápida e eficiente, garantindo que o site seja exibido corretamente.

Exemplo Prático: Digite "https://www.pudim.com.br/" no navegador e pressione Enter. Você verá uma página simples com uma imagem de pudim e um link de e-mail.

3. O Que é uma API e Como Ela se Encaixa Aqui?
Agora imagine que o site Pudim também quer mostrar a previsão do tempo. Para isso, ele poderia usar uma API (Interface de Programação de Aplicativos). APIs funcionam como pontes que permitem que diferentes sistemas troquem informações.
Por exemplo: Imagine que o site Pudim também mostrasse uma mensagem como "Hoje é um bom dia para comer pudim!" baseada no clima atual. O navegador enviaria um pedido/requisição para uma API de clima, que retornaria as informações sobre a temperatura e condição climática. O site poderia então exibir essa mensagem de forma dinâmica.

Resumo: APIs são ferramentas essenciais no desenvolvimento web moderno porque permitem adicionar funcionalidades dinâmicas, como dados, de qualquer coisa, atualizados em tempo real.
Agora que você entende os fundamentos, vamos começar a aprender as ferramentas básicas para criar um site.

1. HTML: A Estrutura do Site
O HTML (HyperText Markup Language) define a estrutura da página. Ele é formado por tags, que são elementos que indicam como o conteúdo será organizado e exibido no navegador. Cada tag tem uma função específica e pode conter texto, imagens, links, entre outros elementos.
Exemplo de Tags:

<h1>: Define um título principal.
<p>: Define um parágrafo de texto.
<img>: Insere uma imagem na página.
<a>: Cria um link.

Exemplo Prático: Crie um arquivo chamado index.html e cole o seguinte código:

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Meu Primeiro Site</title>
</head>
<body>
  <h1>Olá, mundo!</h1>
  <p>Este é o meu primeiro site usando HTML.</p>
</body>
</html>

Abra o arquivo no navegador e veja sua primeira página web!

2. CSS: O Estilo da Página
O CSS (Cascading Style Sheets) é usado para dar cor, forma e estilo ao site, deixar ele bonitinho.
Como o CSS funciona:

Seletores: Identificam os elementos que você deseja estilizar. Por exemplo, body para o corpo da página ou h1 para títulos.
Propriedades e valores: Especificam o estilo aplicado. Por exemplo, color: blue; muda a cor do texto para azul.

Exemplo de regras CSS:

body { background-color: #f0f0f0; } define a cor de fundo da página.
h1 { font-size: 24px; color: #0066cc; } altera o tamanho e a cor do título.

Exemplo Prático: Crie um arquivo chamado styles.css e adicione o seguinte:

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  color: #333;
  text-align: center;
}
h1 {
  color: #0066cc;
}

Conecte o CSS ao HTML adicionando a linha abaixo dentro da tag <head> do arquivo index.html:

 <link rel="stylesheet" href="styles.css">

Atualize o navegador e veja as mudanças no estilo da página.

3. JavaScript: Adicionando Interatividade
O JavaScript é a linguagem que torna a página interativa, permitindo que você adicione animações, valide formulários, manipule elementos e muito mais. (vamos falar mais sobre javascript em outra postagem, aguardem ❤)

Exemplo de interatividade:

Um alerta exibido quando o usuário clica em um botão.
Alterar o texto de um elemento ao passar o mouse sobre ele.

Exemplo Prático: Adicione a parte do javascript <script> dentro do seu arquivo index.html. Ficará assim:

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Meu Primeiro Site</title>
</head>
<body>
  <h1>Olá, mundo!</h1>
  <p>Este é o meu primeiro site usando HTML.</p>
</body>
<script>
  document.querySelector('h1').addEventListener('click', () => {
    alert('Você clicou no título!');
  });
</script>
</html>

Agora, quando você clicar no título, uma mensagem será exibida na tela.

Como Deixar Seu Site Disponível para o Mundo

Você deve estar se perguntando: "Como meu código HTML, CSS e JavaScript pode ficar disponível para outras pessoas, assim como eu acessei o site do Pudim?". Bem, enquanto você está criando e testando seu site no seu computador, ele está visível apenas para você. Para que outros usuários na internet possam acessar seu trabalho, é preciso publicá-lo em um servidor.

Pense no servidor como uma biblioteca que guarda todos os arquivos do seu site. Quando alguém digita o endereço do seu site no navegador, o servidor envia os arquivos necessários para exibir a página. Sem isso, seu site não estaria acessível para outras pessoas.

Esse processo de disponibilizar o site para o mundo é chamado de hospedagem. Existem vários tipos de servidores e serviços de hospedagem que facilitam isso. Agora que você entende o conceito, é hora de explorar como criar projetos mais completos e, eventualmente, publicá-los para o mundo ver!

Ferramentas Essenciais para Desenvolvedores

Editor de Código: Use um editor como o Visual Studio Code para escrever e organizar seu código.
Controle de Versão com Git: O Git permite rastrear mudanças no código, e o GitHub ajuda a compartilhar seus projetos online.
Recursos Online: Plataformas como FreeCodeCamp, MDN Web Docs e W3Schools oferecem excelentes tutoriais gratuitos.

Quanto Dá para Ganhar no Desenvolvimento Web?

A área de desenvolvimento web tem boa remuneração e alta demanda. Aqui estão os salários médios no Brasil:

Júnior: R$ 2.500 a R$ 4.000 por mês.
Pleno: R$ 5.000 a R$ 8.000 por mês.
Sênior: R$ 9.000 a R$ 13.000 por mês.

Esses valores foram baseados em dados do Glassdoor e podem variar dependendo da empresa e região.

Dicas para Quem Está Começando

Pratique Todos os Dias: Mesmo que por pouco tempo, a prática diária é essencial.
Participe de Comunidades: Grupos no Discord e fóruns como Dev.to e Rocketseat são ótimos para aprender e tirar dúvidas.
Construa um Portfólio: Mostre seus projetos para potencializar suas chances de conseguir oportunidades.
Seja Curioso: Explore diferentes tecnologias e mantenha-se atualizado.

Comece Hoje Mesmo

Este guia apresentou o básico do básico para quem está começando no desenvolvimento web. O objetivo foi mostrar os primeiros passos e dar uma ideia geral do que você precisa estudar para começar a construir seus próprios projetos.

No entanto, o desenvolvimento web é uma área ampla e cheia de possibilidades. Por exemplo, o que mostramos sobre HTML é apenas o ponto de partida. Você pode explorar mais sobre HTML5, elementos semânticos e boas práticas para tornar seus sites acessíveis e bem estruturados.

Aqui estão algumas sugestões de sites para continuar seus estudos:

MDN Web Docs: Uma das melhores fontes para aprender HTML, CSS, e JavaScript.
W3Schools: Uma plataforma amigável para aprender e praticar códigos.
FreeCodeCamp: Cursos gratuitos e práticos que ajudam a desenvolver projetos reais.

Pratique sempre que puder, explore diferentes ferramentas e não tenha medo de errar.

O mais importante é dar continuidade ao aprendizado e, pouco a pouco, você se sentirá mais confiante para criar projetos completos e até mesmo ingressar no mercado de trabalho. Vamos juntos nessa jornada!