Aprenda os conceitos básicos de desenvolvimento de extensões do Chrome criando sua primeira extensão Hello World.
Informações gerais
Você criará um exemplo "Hello World", carregará a extensão localmente, localizará registros e explorará outras recomendações.
Hello World
Esta extensão exibirá "Hello Extensions" quando o usuário clicar no ícone da barra de ferramentas da extensão.
Comece criando um novo diretório para armazenar os arquivos de extensão. Se preferir, faça o download do código-fonte completo no GitHub.
Em seguida, crie um novo arquivo nesse diretório chamado manifest.json. Este arquivo JSON descreve os recursos
e a configuração da extensão. Por exemplo, a maioria dos arquivos de manifesto contém uma chave "action" que declara
a imagem que o Chrome precisa usar como o ícone de ação da extensão e a página HTML a ser mostrada em um pop-up quando o
ícone de ação da extensão for clicado.
{
"manifest_version": 3,
"name": "Hello Extensions",
"description": "Base Level Extension",
"version": "1.0",
"action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png"
}
}
Faça o download do ícone no seu diretório e altere o nome dele para corresponder ao que está na chave "default_icon".
Para o pop-up, crie um arquivo chamado hello.html e adicione o seguinte código:
<html>
<body>
<h1>Hello Extensions</h1>
</body>
</html>
Agora, a extensão mostra um pop-up quando o ícone de ação (ícone da barra de ferramentas) é clicado. Para testá-lo no Chrome, carregue-o localmente. Verifique se todos os arquivos foram salvos.
Carregar uma extensão descompactada
Para carregar uma extensão descompactada no modo de desenvolvedor:
- Acesse a página "Extensões" inserindo
chrome://extensionsem uma nova guia. Por padrão, os URLs dochrome://não podem ser vinculados.- Ou então, clique no botão de quebra-cabeça do menu "Extensões" e selecione Gerenciar extensões na parte inferior do menu.
- Também é possível clicar no menu do Google Chrome, passar o cursor sobre Mais ferramentas e selecionar Extensões.
- Ative o modo de desenvolvedor clicando na chave ao lado de Modo de desenvolvedor.
- Clique no botão Carregar descompactado e selecione o diretório de extensão.
Página "Extensões" (chrome://extensions)
Pronto! A extensão foi instalada. Se nenhum ícone de extensão for incluído no manifesto, um ícone genérico será criado para a extensão.
Fixar a extensão
Por padrão, quando você carrega sua extensão localmente, ela aparece no menu de extensões (
). Fixe sua extensão na barra de ferramentas para acessá-la rapidamente durante o desenvolvimento.
Clique no ícone de ação da extensão (ícone da barra de ferramentas). Um pop-up vai aparecer.
Atualizar a extensão
Volte para o código e mude o nome da extensão para "Hello Extensions of the world!" no manifesto.
{
"manifest_version": 3,
"name": "Hello Extensions of the world!",
...
}
Depois de salvar o arquivo, para ver essa alteração no navegador, você também precisa atualizar a extensão. Acesse a página "Extensões" e clique no ícone de atualização ao lado do botão liga/desliga/desativado:
Quando recarregar a extensão
A tabela a seguir mostra quais componentes precisam ser recarregados para ver as mudanças:
| Componente da extensão | Exige a atualização da extensão |
|---|---|
| O manifesto | Sim |
| Service worker | Sim |
| Scripts de conteúdo | Sim (além da página de hospedagem) |
| O pop-up | Não |
| Página "Opções" | Não |
| Páginas HTML de outras extensões | Não |
Encontrar registros e erros do console
Registros do console
Durante o desenvolvimento, você pode depurar seu código acessando os registros do console do navegador. Nesse caso, localizamos os registros do pop-up. Comece adicionando uma tag de script a hello.html.
<html>
<body>
<h1>Hello Extensions</h1>
<script src="popup.js"></script>
</body>
</html>
Crie um arquivo popup.js e adicione o seguinte código:
console.log("This is a popup!")
Para ver essa mensagem registrada no Console:
- Abra o pop-up.
- Clique com o botão direito do mouse no pop-up.
- Selecione Inspecionar.
Inspecionando um pop-up. - No DevTools, navegue até o painel Console.
Como inspecionar um pop-up
Registros de erros
Agora, vamos interromper a extensão. Podemos fazer isso removendo a aspas de fechamento em popup.js:
console.log("This is a popup!) // ❌ broken code
Acesse a página "Extensões" e abra o pop-up. Um botão Erros será exibido.
Clique no botão Erros para saber mais sobre o erro:
Para saber mais sobre como depurar o service worker, a página de opções e os scripts de conteúdo, consulte Extensões de depuração.
Estruturar um projeto de extensão
Há muitas maneiras de estruturar um projeto de extensão. No entanto, o único pré-requisito é colocar o arquivo manifest.json no diretório raiz da extensão, como no exemplo a seguir:
Usar o TypeScript
Se você estiver desenvolvendo com um editor de código, como VSCode ou Atom, use o pacote npm chrome-types para aproveitar o preenchimento automático para a API do Chrome. Esse pacote npm é atualizado automaticamente quando o código-fonte do Chromium é alterado.
🚀 Tudo pronto para começar a criar?
Escolha um dos tutoriais a seguir para começar sua jornada de aprendizado da extensão.
| Extensão | Conteúdo do laboratório |
|---|---|
| Executar scripts em todas as páginas | Inserir um elemento em cada página automaticamente. |
| Injetar scripts na guia ativa | Para executar o código na página atual depois de clicar na ação de extensão. |
| Gerenciar guias | Para criar um pop-up que gerencia as guias do navegador. |
| Processar eventos com service workers | Como um service worker de extensão lida com eventos. |