domingo, 11 de junho de 2017

Como criar uma Extensão para o Google Chrome

Projeto simples, para criar uma Extensão para o Google Chrome

  • O arquivo manifest.json

Todos os projetos que você criar tem que ter o arquivo manifest.json na pasta raiz do mesmo. Esse arquivo não é nada mais que um JSON, onde ficarão as informações relacionadas à sua extensão: nome da extensão, descrição, versão, permissões, etc. Tudo que você pode incluir no manifest.json, você encontra aqui nesse link.

Para nossa primeira extensão, vamos usar as seguintes informações:

As informações obrigatórias são somente o manifest_version, name e version, onde:

manifest_version: Representa a versão do manifesto que você está usando. Hoje (junho/2011), é obrigatório usar a versão 2;
name: Representa o nome da sua extensão;
version: Representa a versão da sua extensão. A versão deve ser separada por pontos.

As informações adicionais sobre nossa extensão Hello World presentes no nosso manifesto são:

description: É uma descrição para nossa extensão;
browser_action: Representa ações que executaremos no navegador. Para nosso exemplo, iremos apenas apresentar um popup quando o usuário clicar na extensão;
default_popup: Informa qual HTML o navegador deve carregar quando o usuário clicar no ícone da extensão.
icons: Representa todos os ícones que sua extensão irá utilizar.


  • POPUP

Para servir de popup da extensão, use a seguinte página HTML simples abaixo, chamada index.html (ou crie uma página sua, com o mesmo nome):
Essa pagina será exibida quando o usuário clicar no ícone da nossa extensão.

  • Ícone
Você pode usar qualquer ícone que desejar, no tamanho:  16 pixels. E salvar na pasta images do projeto. Se quiser usar a mesma que eu só copiar daqui: Icone. Quando você for publicar sua extensão, é recomendado que você tenha ao menos o tamanho de ícone em 128x128px. Se possível, passe todos os tamanhos pedidos (16x16, 48x48, 128x128), pois o Chrome irá selecionar o que for mais apropriado para o momento que ele precisar ser apresentado.
  • CSS
Dentro da pasta CSS, você colocar o seu arquivo style.css onde você pode customizar da maneira que desejar. 
  • Testando sua Extensão
Testar a extensão é bem simples, basta abrir seu Google Chrome e navegar até Menu > Mais ferramentas > Extensões.

Na página de extensões, habilite o modo desenvolvedor, clicando na caixa de seleção:

Clique em Carregar extensão expandida:
Na janela que abrir, escolha a pasta onde está seu projeto. E pronto, a extensão foi instalada! Se você reparar vai aparecer um registro novo com as informações da nossa extensão e o ícone dela já está disponível ao lado da barra de endereços.
Para testar, basta clicar no ícone da extensão:
Pronto! Agora você já pode começar a brincar e colocar mais funcionalidade na sua Extensão. O projeto completo pode ser baixado no Github: Extensão para o Google Chrome.