Chrome Extension: scripts e acessos

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↳JavaScript116 conteúdosJavaScript em 2020: O que esperarDev (Back & Front) · jan 2020Campos públicos e privados em classes JavaScript – O que vem por aí no ESNextDev (Back & Front) · abr 201929 anos de JavaScript!Dev (Back & Front) · jan 2025Ver tudo em Dev (Back & Front) → 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.