0Pricing
Browser Extensions Development (Chrome & Edge) · Aula

Sua Primeira Extensão “Hello World”

Crie uma extensão mínima de “Hello World”, abordando o arquivo de manifesto, a estrutura básica e o carregamento no navegador.

Sua Primeira Extensão “Hello World” é uma aula grátis de Browser Extensions Development (Chrome & Edge) no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Browser Extensions Development (Chrome & Edge), e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Browser Extensions Development (Chrome & Edge) inclui 4 aulas no total.

Your First Extension: Hello World

Hora de criar a sua primeira extensão — um clássico pop-up "Hello World" que cumprimenta você quando você clica no ícone dela na barra de ferramentas. A estrutura principal do Manifest V3.

Core Extension Components

Cada extensão precisa de alguns arquivos essenciais: manifest.json (o projeto), popup.html (o conteúdo do popup) e um ícone. Vamos construí-los passo a passo.

Manifest.json: The Blueprint

O manifest.json é o arquivo mais importante — metadados JSON como nome, versão e permissões, na estrutura que o Manifest V3 espera.

Essential Manifest Fields

Comece o seu manifest com três campos obrigatórios: manifest_version 3, um nome e uma versão. O trecho abaixo mostra a estrutura mínima.

{ "manifest_version": 3,
  "name": "Hello World Extension",
  "version": "1.0"
}

Adding Description & Icons

Adicione uma descrição e um mapa de ícones para que os usuários entendam e reconheçam sua extensão. Forneça vários tamanhos, como 16, 48 e 128 pixels.

{ "manifest_version": 3,
  "name": "Hello World Extension",
  "version": "1.0",
  "description": "A simple 'Hello World' extension for CoddyKit.",
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  }
}

Defining the Popup with 'action'

O campo action define o botão da barra de ferramentas: default_popup aponta para o HTML do seu pop-up e default_icon define a imagem da barra de ferramentas.

{ "manifest_version": 3,
  "name": "Hello World Extension",
  "version": "1.0",
  "description": "A simple 'Hello World' extension for CoddyKit.",
  "icons": { "16": "icon16.png" },
  "action": {
    "default_popup": "popup.html",
    "default_icon": { "16": "icon16.png" }
  }
}

Creating popup.html

Crie o arquivo popup.html — um arquivo HTML simples contendo sua mensagem Hello World. Mantenha-o pequeno e leve, já que ele é exibido em uma janela pop-up minúscula.

<!DOCTYPE html>
<html>
<head>
  <title>Hello World Popup</title>
  <style>
    body { font-family: sans-serif; padding: 15px; width: 150px; }
    h1 { font-size: 1.2em; color: #333; margin: 0; }
  </style>
</head>
<body>
  <h1>Hello, CoddyKit!</h1>
</body>
</html>

Your Extension's Folder Structure

A sua pasta deve conter agora o manifest.json, o popup.html e os ícones, todos diretamente no interior — um esquema limpo que o navegador consegue carregar corretamente.

Loading Your Extension (Chrome)

Carregue-o no Chrome ou Edge: abra chrome://extensions, ative o Modo do desenvolvedor, clique em Carregar sem compactação e selecione sua pasta. Ele entra para a lista!

Test Your New Extension!

Localize o ícone da sua extensão na barra de ferramentas e clique nele — um pop-up aparecerá com a mensagem "Hello, CoddyKit!" vinda do seu popup.html. Primeira extensão concluída!

Quick Check: Manifest V3

Qual campo é absolutamente essencial para declarar a versão do formato do manifesto em manifest.json para uma extensão do Manifest V3?

Recap: Your First Extension

Você criou e carregou uma extensão real: um manifesto com campos principais, um popup de ação, um popup.html, tudo executado por meio do modo de desenvolvedor. Continue futucando!

Perguntas Frequentes

A aula “Sua Primeira Extensão “Hello World”” é grátis?

Sim — o texto completo de “Sua Primeira Extensão “Hello World”” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Browser Extensions Development (Chrome & Edge), atualize para CoddyKit PRO. O curso de Browser Extensions Development (Chrome & Edge) inclui 4 aulas no total.

O que vou aprender em “Sua Primeira Extensão “Hello World””?

Crie uma extensão mínima de “Hello World”, abordando o arquivo de manifesto, a estrutura básica e o carregamento no navegador. Você pratica Browser Extensions Development (Chrome & Edge) com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Browser Extensions Development (Chrome & Edge)?

Nenhuma experiência prévia é necessária. Browser Extensions Development (Chrome & Edge) no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Sua Primeira Extensão “Hello World””?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Browser Extensions Development (Chrome & Edge)?

Sim. Cada aula de Browser Extensions Development (Chrome & Edge) inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. O que são Extensões de Navegador
  2. Configuração do Ambiente de Desenvolvimento
  3. Sua Primeira Extensão “Hello World”
  4. Anatomia de um Projeto de Extensão
← Voltar para Browser Extensions Development (Chrome & Edge)