Fazer extensões para o Chrome é mais fácil do que você pensa

Muitos programadores(as) web se questionam sobre o que é preciso saber para criar extensões para o Google Chrome, sem saber que na verdade, tudo o que precisam é o que já sabem e usam diariamente. É isso mesmo, estou falando das tecnologias HTML, CSS e JavaScript.

Neste artigo, vou te mostrar como criar uma pequena extensão do zero e testá-la dentro do próprio navegador.

Estrutura do Projeto

Existem algumas alternativas interessantes para dar o pontapé inicial no projeto, como é o caso do gerador de extensões para Chrome do Yeoman (se você ainda não sabe como o Yeoman funciona, te convido a ler este 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). No entanto, para entender o funcionamento de todo o mecanismo, vamos partir de um projeto do zero.

Inicialmente, tudo o que vamos precisar serão apenas estes três arquivos dentro de um diretório:

manifest.json
index.html
icon.png

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

Configuração do Projeto

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 e até mesmo quais permissões ele irá solicitar e quais arquivos ele irá importar. Para extensões bem simples, o arquivo terá mais ou menos essa cara:

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

Note algumas informações importantes:

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.

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:

Extensão Hello World instalada no 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!

Agora para qualquer alteração feita no código da extensão, basta clicar no botão “Atualizar” para que o navegador carregue a nova versão e reproduza o seu efeito. Bem fácil, não é mesmo?

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 quase infinitas. Se vocês gostaram do conteúdo, sinalizem nos comentários que posso fazer uma série explicando como explorar mais funcionalidades da API de extensões e como publicá-la na Chrome Web Store depois de concluída.

Referências

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

Powered by: