Como criar Extensões para o Google Chrome

Chrome Extension

Sabe quando você está usando um aplicativo web, e percebe que falta alguma funcionalidade que, ao seu ver, você conseguiria resolver facilmente com Javascript? Mas como você não trabalha na empresa que criou o aplicativo, você fica de mãos atadas e diz: “- Eu mesmo vou fazer um aplicativo desses. Do zero!”, mas não faz, porque vai tomar muito tempo, ae você procrastina e continua chorando porque aquele app deveria ter a funcionalidade que você quer?

Seus problemas acarabam! Agora você pode criar uma Chrome Extension, usando somente Javascript (que lindo isso cara *_* ) e EXTENDENDO as funcionalidades do aplicativo que você usa conforme a sua necessidade!

Curtiu a ideia? Quer aprender a fazer? Vem comigo xD

Motivação

O que me motivou a criar uma Chrome Extension foi o Grooveshark. É a ferramenta que mais gosto pra passar o dia todo ouvindo música - sem propagandas - e programando :D

Só que ele tem um problema: a cada x minutos (não tenho certeza se é 15 ou 30), ele pára de tocar e pergunta: “- Você ainda está aí?”; e para voltar a tocar, você precisa clicar no botão “Resume” ¬¬

Sério, já passei algumas horas do dia com o fone apertando o ouvindo, no silêncio, porque estava focando em algum código, e quando percebi o Grooveshark já havia parado a muito tempo.

Então pensei comigo: “- Por que não criar uma extensão do Chrome que clique nesse botão Resume pra mim?” E foi exatamente o que eu fiz!

Por onde começar

O Google tem um guia para que você possa desenvolver sua própria extensão, mas como está em Inglês, resolvi escrever esse artigo, até pra mostrar algumas surpresinhas que você não espera quando vai fazer uma treta dessas xD

Vamos começar então criando um diretório para nossa extensão e um arquivo manifest.json.

O arquivo manifest.json

Esse arquivo não é nada mais que um JSON, onde ficarão os metadados relacionados à sua extensão: nome da extensão, descrição, versão, permissões, etc. Nesse link você encontra todos os metadados que podem ser incluídos no manifest.json.

Vou mostrar os exemplos baseados no Don’t stop Grooveshark. O manifest.json ficará assim:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "name": "Don't stop Grooveshark",
  "version": "0.0.2",
  "manifest_version": 2,
  "description": "Google Chrome Extension that don't leaves Grooveshark stop playing.",
  "icons" : {
    "16" : "icon128.png",
    "48" : "icon128.png",
    "128" : "icon128.png"
  },
  "content_scripts": [{
    "matches": [ "*://grooveshark.com/*" ],
    "js": [ "dont-stop-grooveshark.js" ]
  }]
}

Vou comentar os parâmetros que não são tão óbvios, ok?

mainfest_version

Esse parâmetro recebe um número inteiro, que representa a versão do mainfesto que o sua extensão está usando. A partir do Chrome 18, a versão 1 foi depreciada. Você deveria sempre usar a 2 a partir de então.

icons

O ícone da sua extensão, que será mostrado na Chrome Store, ou quando sua extensão for mostrada na barra de extensões do Chrome.

É 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.

content_scripts

Content scripts is where the magic happens! Aqui é o lugar onde você pode adicionar seus próprios scripts ou css e adicioná-los à alguma página na web.

A propriedade matches recebe um array de domínios que sua extensão precisa de permissão para acessar.

A propriedade js recebe um array de arquivos JS que serão incluídos quando esses domínios forem acessados.

Você ainda pode ter uma propriedade css, que também receberá um array de arquivos CSS para estilizar a página do(s) domínio(s) setado(s) em matches.

Basicamente é isso que você vai precisar. Se estiver pensando em fazer uma extensão um pouco mais complexa, talvez você precise setar mais alguns parâmetros, que podem ser encontrados nesse link.

A magia

No caso do Don’t stop Grooveshark, o que eu preciso que seja feito é que, sempre que aparecer na tela aquela mensagem perguntando se eu ainda estou ali, o botão de Resume deve receber um clique automaticamente.

O código utilizado no arquivo dont-stop-grooveshark.js é o seguinte:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
;(function( doc ) {
  'use strict';
  
  console.log( "Don't stop Grooveshark! ;)" );
  var $resumePlaybackButton;
  
  window.setInterval(function() {
    var $resumePlaybackButton = doc.querySelector( '[data-translate-text="LB_INTERACTION_TIME_RESUME"]' );
    if( ! $resumePlaybackButton ) {
        return;
    }
    
    $resumePlaybackButton.click();
  }, 3000);
})( document );

A única referência que eu tenho para o botão de Resume, é um atributo data-translate-text, com o conteúdo LB_INTERACTION_TIME_RESUME. Então o que eu faço é, a cada 3 segundos, verificar se esse botão está na tela e dar um clique nele. Se ele não estiver, não faço nada. :)

Conclusão

Tendo acesso direto a um app, e a possibilidade de injetar Javascript, você pode fazer QUALQUER COISA que quiser! Existem algumas extensões que precisam de uma tela específica para setar algumas configurações. Isso também é possível fazer, mas vou deixar pra mostrar isso em um próximo artigo :D

Surpresinha

Para subir uma Chrome Extension para o respositório oficial, você precisa pagar U$ 5 doletas. Apesar do preço baixo, - e você só precisar pagar esse valor uma única vez - ele serve como uma “segurança” para que muitos desenvolvedores não postem qualquer porcaria lá (apesar de já ter :P). Imagina se não cobrassem :P

Depois desse pagamento, você pode fazer quantas extensões quiser, e subir à vontade!

Por hoje é isso!

E aí: para qual app você vai fazer a sua extensão? :D

Sobre o #1postperday: https://blog.da2k.com.br/2014/12/31/um-post-por-dia/

Tem alguma sugestão para os próximos posts do #1postperday? Deixe ela aqui: https://github.com/fdaciuk/fdaciuk.github.io/issues/1