Mais fácil que fazer miojo!

Não sei quanto a vocês, mas eu gosto muito de utilizar extensões no Google Chrome. Eu sei que há toda a problemática de que com isso o navegador consome ainda mais recursos da máquina, mas tem algumas extensões que pra mim já são fundamentais. Alguns exemplos são: Pocket e o Loom; ótimas ferramentas que pretendo explicar melhor em futuros artigos.

Chrome + RAM = O romance do século XXI

Mas apesar de já existir tantas extensões bacanas, como desenvolvedor sempre fiquei curioso para saber como criar a minha própria. Depois de alguma pesquisa, descobri que na verdade é muito simples e tudo o que precisamos é de um pouco de HTML, JavaScript e CSS.


Versão em Vídeo

Além das instruções que daremos abaixo, você também pode acompanhar todos os passos que serão feitos na versão em vídeo!


Estrutura do Projeto

Existem algumas alternativas interessantes para dar o pontapé inicial no projeto de uma extensão, como o gerador de extensões para Chrome do Yeoman (não sabe o que é isso? dê uma olhada neste nosso outro artigo). Como ele temos uma estrutura otimizada configurada com o Babel, Gulp, SASS, testes unitários e integração com o Travis para CI/CD (Continuous Integration/Continuous Deployment). Tudo completinho. No entanto, para fins didáticos, criaremos um projeto do zero.

Inicialmente, tudo o que precisamos são apenas estes três arquivos dentro de um diretório (de sua preferência):

  • manifest.json
  • index.html
  • icon.png

Vamos explorar o que cada um destes arquivos faz dentro do projeto.

Configurando os arquivos

O arquivo mais importante do nosso projeto é o manifest.json. Ele é o ponto de partida de qualquer extensão. Nele descrevemos todas as propriedades do nosso projeto: desde o seu nome, autor, versão, até mesmo quais permissões ele irá solicitar e quais arquivos ele utilizará no seu ciclo de vida. Para extensões bem simples, este arquivo terá mais ou menos essa cara:

{
"manifest_version": 2,
"version": "0.0.1",
"name": "Hello World",
"description": "Extensão Hello World",
"author": "Diego Martins de Pinho",
"browser_action": {
"default_title": "Hello World",
"default_popup": "index.html",
"default_icon": "icon.png"
}
}

Repare em algumas informações importantes que colocamos no arquivo:

  • manifest_version: Essa é a versão do manifesto. Esse número é dado pela plataforma que dita as regras que serão utilizadas na interpretação do arquivo. Até o momento, está no 2.
  • version, name, description, author: Estes campos representam exatamente o que os seus nomes indicam. Aqui, ditamos qual é a versão da extensão, o nome dela, sua descrição e o autor. Só é importante ressaltar que o número da versão é o que ditará o versionamento dentro da loja do Chrome.
  • browser_action: Nesta propriedade dizemos ao Chrome qual é o comportamento padrão da nossa extensão. Para este caso, estamos dando um título e dizendo que a janela padrão é o código que está indicado na propriedade default_popup. Isso significa que sempre que o usuário clicar no ícone da extensão, essa janela abrirá.

Agora que temos a configuração feita, basta colocar um conteúdo dentro do index.html.

<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

E pronto! Já temos a nossa extensão pronta! Agora vamos importá-la para dentro do navegador.

Testando a Extensão

Para testar a extensão dentro do Chrome, o processo é bem simples. Acesse o navegador e vá até a página de extensões. Ela é acessível através do endereço chrome://extensions/ ou por meio do caminho: Menu > Mais Ferramentas > Extensões.

Acessando o menu de extensões do Chrome

Primeiramente, habilite o Modo do desenvolvedor. Ao fazer isso, as opções “Carregar sem Compactação”, “Compactar Extensão” e “Atualizar” ficarão disponíveis. Clique na primeira opção e selecione o caminho do diretório onde estão os arquivos do seu projeto. Se tudo der certo, a sua extensão irá aparecer na tela:

Subindo a nossa extensão para o Google Chrome

Além disso, o ícone da sua extensão também irá aparecer na barra do navegador. Clique nela e veja o resultado da sua primeira extensão!

Sua primeira extensão funcional!

Conclusão

Neste artigo mostrei o básico sobre a construção de extensões no Google Chrome. A plataforma oferece uma série gigantesca de opções, que vão desde aplicações que interagem na página, utilizam a webcam, acessam o seu sistema de arquivos e afins.

As possibilidades são muitas. Se vocês gostaram do conteúdo, sinalizem nos comentários que podemos fazer uma série completa explicando como explorar mais funcionalidades da API de extensões e como publicá-la na Chrome Web Store depois de concluída.

Referências


Gostou? Recomende 👏 este artigo e acompanhe nossa publicação para não perder os próximos conteúdos!

Siga nossa publicação e não perca os próximos artigos! http://www.codeprestige.com.brFacebook, Twitter, Youtube

Code Prestige

Artigos, notícias e dicas sobre o melhor da tecnologia

Diego Martins de Pinho

Written by

Desenvolvedor de Software, Fundador da CodePrestige e autor do livro ECMAScript 6 - Entre de cabeça no futuro do JavaScript

Code Prestige

Artigos, notícias e dicas sobre o melhor da tecnologia

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade