Hoje vou falar um pouco de Chrome Extensions, pois precisei estudar bastante para desenvolver a nova ferramenta da minha startup que é uma extensão para Chrome, futuramente liberada também para Firefox, disponível para teste beta em https://goo.gl/1ui3sU. Achei o tema interessante, pois tive muito problema para resolver. Primeiramente, vamos entender como funciona uma extensão para Google Chrome…

Aparentemente, as extensões para Chrome são scripts feitos em JavaScript que podem ou não conter um conteúdo visual, e que interagem com a página em que você está no navegador, porém essa interação é limitada por questões de segurança, então basicamente existem três tipos de scripts que podem ser criados para sua extensão.

Scripts de conteúdo

O primeiro e mais comum são scripts que rodam em ligação parcial com a página aberta – é possível inserir, editar e remover elementos via JavaScript, além de adicionar bibliotecas como jQuery e AngularJS para facilitar o desenvolvimento, mas o content_script não tem acesso ao window da página. Sendo assim, não será possível executar, por exemplo, scripts existentes na página. Para criar um content_scripts, basta adicionar no manifest.json as seguintes linhas:

"content_scripts": [{
    "js": ["jquery-3.0.0.min.js", "contentscript.js"],
    "css": ["css/style.css"],
    "matches": ["*://*/*"]
}],

No exemplo acima, foram solicitados o jQuery e um script personalizado chamado coontentscript.js. Perceba que é possível chamar quantos arquivos forem necessários. Ainda é possível chamar CSS, e suas bibliotecas não irão influenciar a página diretamente, já que os escopos são separados. Veja a ilustração da documentação:

Para rodar um content_script, será necessária uma permissão de leitura e escrita de abas que deve ser informada no próprio manifest.json:

"permissions": [
    "tabs"     
]

Lembrando: será possível realizar manipulação de componentes do document, mass não será possível acessar o window. A documentação completa está disponível em: https://developer.chrome.com/extensions/content_scripts

Scripts de background

O script de background será utilizado para rotinas que dependem de acesso total ao Chrome e suas abas, porém esse modo não tem acesso ao document. É possível, por exemplo, implementar Push Browser diretamente no background, mas não será possível realizar interação entre o background e o content_script – eles rodam em ‘instâncias’ diferentes. Para implementar um script em background, será necessário informar no manifest.json:

"background": {
    "persistent": false,
    "scripts": ["OneSignal.js", "background.js"]
},

Perceba que no exemplo acima, utilizei o OneSignal para Push Browser. A implementação é bem simples, vou deixar o link tanto da documentação dos scripts background: https://developer.chrome.com/extensions/background_pages quanto da documentação do OneSignal para Chrome Extension: https://documentation.onesignal.com/docs/chrome-app-sdk-installation

O parâmetro ‘persistent’ define se o script ficará rodando de formar contínua, ou se será apenas executado uma única vez, caso haja necessidade de realizar monitoramentos, por exemplo.

Recursos acessíveis Web

O terceiro modo de script possui interação direta com o window e o document, mas não possui interação entre os content scripts e background. A minha sugestão é utilizar campos hidden caso haja necessidade de uma comunicação, já que o content_scripts e o injection possuem ambos acesso ao document, pelo menos foi a forma como consegui resolver o problema de disparar eventos do window da aba. Para implementar um injetion, serão necessárias duas etapas. Primeiro, informe no manifest.json quais scripts estão autorizados a ser injetado na aba:

"web_accessible_resources": ["facebookSDK.js", "script.js"],

No meu caso, estou usando API do Facebook para gerar telas de compartilhamento, e possui um script personalizado. Dentro do content scripts, adicione a chamada do script

//FacebookSDK
var s = document.createElement('script');
s.src = chrome.extension.getURL('facebookSDK.js');
s.onload = function() {this.parentNode.removeChild(this);};
(document.head || document.documentElement).appendChild(s);

Quero terminar o artigo deixando um abraço aos meus sócios do It’simple e da 1001 Cupom de Descontos por terem concebido essa que, para mim, é a ferramenta mais útil que eu já fiz. Comparação em tempo real e checkout automático de cupons na própria loja eram um sonho que se tornou real graças essa parceria, e a todos os meus queridos leitores deixo mais uma vez o link para o teste beta https://goo.gl/1ui3sU. Vejam o vídeo de explicação do uso do radar, e a lista de lojas parceira do projeto está disponível em https://itssimple.com.br/stats.