Artigo original: https://www.freecodecamp.org/news/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:
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.
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.
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.