Configuração do Ambiente de Desenvolvimento

Antes de construir, configure o seu espaço de trabalho — preparar as ferramentas primeiro torna a programação mais fluida e permite testar as suas extensões de forma eficiente.

O seu navegador é o seu laboratório. O Chrome e o Edge têm recursos de desenvolvimento integrados; o primeiro passo é ativar o "Modo de Desenvolvedor" especial deles.

Ative o Modo do Desenvolvedor: abra chrome://extensions e ative a chave no canto superior direito. Isso desbloqueia o carregamento e o teste das suas próprias extensões.

Cada extensão precisa da sua própria pasta para todos os seus arquivos. Crie uma vazia — digamos my-first-extension — onde colocaremos o manifesto e o código.

O manifest.json é o plano da sua extensão — ele informa ao navegador os detalhes principais. Comece com um mínimo na sua pasta.

Qualquer editor serve, mas um verdadeiro editor de código adiciona destaque de sintaxe, preenchimento automático e depuração. O VS Code é a opção gratuita e popular — baixe-o se necessário.

Com o Modo do desenvolvedor ativado, clique em Carregar sem compactação e selecione sua pasta. Sua extensão deve aparecer na lista, talvez com um ícone na barra de ferramentas.

Após editar os arquivos, o navegador não verá as alterações até que você recarregue — clique no ícone de atualizar no cartão da sua extensão em chrome://extensions.

Depure extensões com as DevTools, assim como páginas da web. Cada cartão aponta para o "service worker" em segundo plano ou para o inspetor do pop-up para uma análise mais profunda.

Você aprendeu os passos essenciais para preparar seu navegador e carregar sua primeira extensão. Vamos testar seu conhecimento!

Qual das seguintes ações é necessária para ver as alterações na sua extensão após modificar seus arquivos?

Seu ambiente está configurado: Modo do Desenvolvedor ativado, uma pasta com o manifest.json, carregando e recarregando como não empacotado, e o DevTools para depuração. Avante!