Como injetar código JavaScript para manipular sites automaticamente

2. Localizando elementos DOM e criando o código de injeção

Em seguida, abra suas ferramentas de desenvolvedor do Chrome clicando em F12. Depois, identifique o elemento com o pop-up. Neste exemplo, o iframe elemento com ID wallIframe contém o pop-up com algum fundo desbotado na parte de trás.

Agora, usaremos um pequeno snippet JavaScript para adicionar CSS personalizado e verificar se podemos ocultar o pop-up.

/* DOM Manipulation
* If you want to update / add single style in DOM Element style attribute you can use this function:
* inject javascript after page reloads.
*/

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 você pode ver, no código acima, destacamos o elemento wallIframe e ocultá-lo adicionando CSS embutido.

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

Teste seu código no console dos desenvolvedores do Chrome para garantir que ele funcione.

Como você pode ver acima, o código funciona. Agora, é hora de adicioná-lo à extensão, JavaScript personalizado para sitese teste se o código funcionará em futuras visitas. Para adicioná-lo, clique com o botão esquerdo no ícone da extensão na barra de endereço e adicione o snippet personalizado e clique em Salvar.

A página será recarregada imediatamente para tentar testar seu código adicionado.

4. O código de injeção não funcionou, e agora?

Depois de testá-lo, o iframe não desapareceu como o testamos no console. Um dos motivos pode ser o carregamento do iframe após X segundos do carregamento da página.

Poderíamos cavar no log da rede para ver se é esse o caso. Mas, para medidas de economia de tempo, tentaremos adicionar uma função de tempo limite ao nosso snippet original para ver se isso ajuda.

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 aguarda 10 segundos antes de ser executado e voilà funciona perfeitamente.

5. Considerações finais

Você também pode adicionar um ouvinte de evento para aguardar o carregamento completo da página.

Por exemplo:

document.addEventListener("DOMContentLoaded", function() { 
    // Your function goes here
}

Mas, se adicionarmos o código pop-up após X segundos, a função acima não funcionará, por isso é melhor manter a função de tempo limite.

Você também pode usar a extensão para adicionar muitos outros snippets interessantes, como bloquear anúncios, bloquear pop-ups, aumentar a fonte padrão do site, aumentar a capacidade de resposta, atualizar a aparência etc. Depois que os snippets do JavaScript forem adicionados, eles sempre serão executados em futuras visitas a esses sites.

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

AVISO LEGAL: As opiniões expressas neste artigo são de responsabilidade do (s) autor (es) e não representam as opiniões da Carnegie Mellon University, nem de outras empresas (direta ou indiretamente) associadas ao (s) autor (es). Esses escritos não pretendem ser produtos finais, mas um reflexo do pensamento atual, além de ser um catalisador para discussão e aprimoramento.

Você pode me encontrar em: Meu site pessoal, Médio, Instagram, Twitter, Facebook, LinkedIn ou através da minha Empresa de SEO.