Artigo original: How to Inject JavaScript Code to Manipulate Websites Automatically

Como desenvolvedores e usuários da internet, por vezes encontramos sites que exibem muitos pop-ups, desde solicitações de assinatura a paywalls, anúncios, notificações e assim por diante.

Muitas vezes, usamos esse sites diariamente para inúmeras coisas e ver esses pop-ups o tempo todo é cansativo!

Desenvolvedores podem contornar isso acessando o console do navegador e achando seletores para manipular o modelo de objeto de documentos (DOM) adicionando ou modificando o CSS ou o Java Script do site.

Agora, porém, graças ao Google Chrome e à sua loja de extensões, qualquer pessoa pode injetar código em qualquer site automaticamente. Vamos mostrar o passo a passo neste pequeno guia.

1. Instale a extensão para injetar o código

O que mostro a seguir só se aplica se você usar o Google Chrome. Instale a extensão Custom JavaScript for websites 2. Essa pequena extensão permite executar o JavaScript em qualquer site automaticamente e ela também salva o código para visitas futuras feitas através do seu navegador.

Primeiro, entre em um site que usa com frequência e que tenha um pop-up irritante. Neste tutorial, uso o site do The Washington Post:

1_BUguCP1rb7S-lFwVvC_1fg
Imagem mostrando o site do The Washington Post, com um artigo mencionando Andrew Yang, e também as ferramentas para desenvolvedor do Chrome.

2. Localize os elementos do DOM e crie o código de injeção

Abra as ferramentas de desenvolvedor do Chrome pressionando a tecla F12. Em seguida, identifique o elemento que contenha o pop-up.

Neste exemplo, o elemento iframe com ID wallIframe contém o pop-up com um fundo translúcido por trás.

Agora, vamos usar um pequeno trecho de JavaScript para adicionar CSS personalizado e verificar se conseguimos esconder o pop-up.

/* Manipulação do DOM
* Se quiser atualizar/adicionar um estilo único ao atributo style do elemento do DOM, você pode usar a função abaixo.
* Ela injeta o javascript após o recarregamento da página.
*/

function setCssStyle(el, style, value) {
  var result = el.style.cssText.match(new RegExp("(?:[;\\s]|^)(" +
      style.replace("-", "\\-") + "\\s*:(.*?)(;|$))")),
    idx;
  if (result) {
    idx = result.index + result[0].indexOf(result[1]);
    el.style.cssText = el.style.cssText.substring(0, idx) +
      style + ": " + value + ";" +
      el.style.cssText.substring(idx + result[1].length);
  } else {
    el.style.cssText += " " + style + ": " + value + ";";
  }
}
var element = document.getElementById("wallIframe");
setCssStyle(element, "display","none !important");

Como pode ver, no código acima, estamos destacando o elemento wallIframe e o escondendo ao adicionar um CSS em linha.

3. Teste a injeção do código

Teste seu código no console das ferramentas de desenvolvedores do Chrome para ter certeza de que funciona.

1_qwrHgqiwmZreTmdQFeKE2Q--1-
Imagem mostrando o site do The Washington Post com um artigo mencionando Andrew Yang, e também as ferramentas para desenvolvedores do Chrome.

Como pode ver acima, o código funciona.

Agora, é a hora de adicioná-lo à extensão Custom JavaScript for websites 2 e testar se o código funcionará em visitas futuras. Para isso, clique com o botão esquerdo no ícone da extensão na barra de endereço, adicione o trecho de código e clique em salvar.

A página recarregará automaticamente para executar e testar o código que você adicionou.

1_SoyzA-pNiOQhmGf-7XZ33A
Imagem mostrando o site do The Washington Post com um artigo mencionando Andrew Yang, e também as ferramentas para desenvolvedores do Chrome.

4. A injeção do código não funcionou, e agora?

Depois de testar, o iframe não desapareceu como havia acontecido quando testamos no console. Um dos motivos poder ser o iframe carregar alguns segundos depois da página.

Poderíamos investigar no histórico de log da rede pra saber se é isso que acontece. Para evitar perda de tempo, porém, vamos adicionar uma função de timeout ao trecho de código original pra ver se funciona.

setTimeout(
     function() {
       function setCssStyle(el, style, value) {
         var result = el.style.cssText.match(new RegExp("(?:[;\\s]|^)(" +
             style.replace("-", "\\-") + "\\s*:(.*?)(;|$))")),
           idx;
         if (result) {
           idx = result.index + result[0].indexOf(result[1]);
           el.style.cssText = el.style.cssText.substring(0, idx) +
             style + ": " + value + ";" +
             el.style.cssText.substring(idx + result[1].length);
         } else {
           el.style.cssText += " " + style + ": " + value + ";";
         }
       }
       
       var element = document.getElementById("wallIframe");
       setCssStyle(element, "display", "none !important");
     }, 10000);

Agora, o código espera 10 segundos antes de executar e aí está: funciona perfeitamente!

Você pode adicionar, também, um event listener para esperar o carregamento total da página.

5. Considerações finais

Por exemplo:

document.addEventListener("DOMContentLoaded", function() { 
    // Sua função vai aqui
}

Se, contudo, adicionarmos o código da pop-up para executar depois de X segundos, o código acima não funcionará. Assim, é melhor continuar com a função de timeout.

Você pode usar a extensão para adicionar inúmeros outros trechos de código legais, como bloquear ads e pop-ups, aumentar a fonte padrão, responsividade e atualizar a aparência de uma site e muito mais. A partir do momento que os trechos de código de JavaScript são adicionados, eles executarão automaticamente em visitas futuras a esses sites.

Um agradecimento especial a Abbey Rennemeyer do freeCodeCamp pelo feedback editorial na preparação deste artigo.

[RESSALVA IMPORTANTE]: as opiniões expressadas neste artigo são do próprio autor e não representam as opiniões da Carnegie Mellon University, nem de outras empresas associadas (direta ou indiretamente) ao autor.  O que foi escrito não tem a intenção de ser um produto final, mas um reflexo do pensamento atual e um catalizador para discussões e melhorias futuras.

Onde encontrar encontrar o autor: site pessoal, Medium, Instagram, Twitter, Facebook, LinkedIn ou através da empresa de serviços de SEO do autor.