Disclaimer: método ainda funcional (2025)
No começo de 2019, estava já anunciado mudanças no cenário de extensões para a Chrome Webstore. Havia até um manual de migração da finada V2 para a V3 com dicas de boas práticas e tudo o mais. Acontece que devido a esta mudança, muitas, mas muitas extensões simplesmente deixaram de existir por depender muito disso. Vamos discorrer.
O manifesto V3 veio de um cenário um tanto caótico, com dados sendo roubados como consequência, por permitir execuções remotas de código entre outras coisas. A V2 operava totalmente diferente da forma atual – era uma boa arquitetura, mas não tão segura assim. Uma das maiores vantagens era a permissão para executar códigos hospedados remotamente, com funções como eval() ou para execução. Isso acarretou vários problemas.
Trabalhava com marketing na época e infelizmente, os clientes sempre demoravam mais para fornecer acessos às ferramentas que utilizavam – às vezes demoravam para dar acesso até do próprio site. Uma extensão que eu usava muito para ajudar nisso, era a (hoje extinta) DataLayer Checker, que permitia injetar snippets GTM diretamente na página, através da extensão, sem necessariamente precisar estar no site. Isso adiantava o trabalho que era uma beleza, aí quando o cliente finalmente fornecia acessos, as configurações já estavam praticamente feitas.
Com a V3, isso voltou a ser um problema. A ideia surgiu como um compilado de ferramentas já existentes para esse tipo de trabalho, então surgiu o GTM Watson: uma ferramenta que já fornece muita ajuda para programadores e pessoas do marketing, como geração de dados de usuário (CPF entre outros) e visualizações da camada de dados (DataLayer) em diversas visualizações. Porém, mesmo com isso, o problema ainda não fora resolvido. Eu queria muito injetar código remoto para adiantar as configurações de tagging no website alvo. Acabei bolando uma ideia:
Para contextualizar:
- A popup emite o sinal para o background (opcional)
- O background adiciona o script via executeScripting na página, com o código remoto em data-src ao invés de src (se for com src, a análise de extensão do pessoal da Chrome Webstore vai barrar e apontar o motivo como “blue argonium”)
- O script de content, injeta outro script que faz parte do pacote da extensão na página (neste ponto, a grande jogada é o contexto onde ele foi carregado – tecnicamente, quem carregou foi a própria página e não a extensão, entendeu o pulo do gato?)
- O script injetado pelo content terá um listener na página, que será um evento de comunicação entre extensão x página.
- Neste momento, o script injetado pelo content está FORA do escopo da extensão, logo, o escopo dele é o escopo da PÁGINA. Portanto, este script pode transformar o data-src em src e voilá: código remoto IMPORTADO e EXECUTADO COM SUCESSO NA PÁGINA ALVO.
Fazendo dessa forma, percebi que há uma grande jogada e manipulação dos escopos aos quais o script pode estar inserido. Veja bem, se for a página quem está carregando o código remoto, logo, não é a extensão, entendeu?
A grande jogada nisso, é fazer a extensão dar instruções combinadas e parciais, onde cada escopo colabora com uma parte, para fazer-se de carregar o script no contexto de página em si – chegando no ponto onde a verificação já entende “Ah, é a página que está carregando este script, logo, não é a extensão – não vou rejeitar com código ‘blue argoniun’. Pode publicar!”
Esse método permitiu finalmente ter resolvido a maior dor que eu estava tendo antes, que era em relação a conseguir injetar o snippet sem necessariamente precisar de acesso ao código fonte do website ou forçar o cliente a acessar o código fonte e inserir o snippet. Essa ferramenta no fim conseguiu até mesmo salvar mais tempo que antes, devido as ferramentas que ela já trás consigo.
GTM Watson é um projeto que trato com bastante carinho. Não ganho 1 centavo com ele. É uma espécie de “contribuição” para aqueles que não tem tanta familiaridade assim com Google Tag Manager ou tagging em geral. Utilizar a ferramenta torna o processo muito mais simples e fácil do que normalmente é – e você não precisa ter conhecimento técnico em programação para isso, apesar de ajudar bastante caso tenha.
Aqui fragmentos do exemplo mencionado:
Background script:
Content script:
Inject Script:
O código acima está presente na extensão, disponível na Chrome Webstore.
É isso meu caro leitor. Vou reunir algumas outras ideias disso e publicar na store assim que possível :-)