Ca dezvoltatori și utilizatori ai internetului, întâlnim adesea site-uri web care afișează multe ferestre pop-up, de la solicitări de abonament la plăți de plată, reclame la notificări și așa mai departe.

De multe ori, folosim zilnic acele site-uri web pentru tot felul de lucruri, iar vizualizarea acestor ferestre pop-up se îmbătrânește!

Dezvoltatorii le pot ocoli accesând consola și găsind selectoare pentru a manipula site-ul web model de obiect document (DOM) prin adăugarea sau modificarea CSS sau JavaScript.

Dar acum, datorită Google Chrome și magazinului său de extensii, oricine poate injecta cod în orice site web automat. Vom trece la proces pas cu pas în acest mic ghid.

1. Instalarea extensiei pentru a injecta codul

Următoarele se aplică numai dacă utilizați Google Chrome. Instalați extensia JavaScript personalizat pentru site-uri web. Această mică extensie vă permite să rulați automat JavaScript pe orice site web și salvează codul pentru vizitele viitoare în browserul dvs. web.

Mai întâi, vizitați site-ul web cu ferestre pop-up enervante pe care le utilizați des. Pentru acest tutorial, folosesc site-ul web The Washington Post:

Cum sa injectati cod JavaScript pentru a manipula automat site urile
Captură de ecran care prezintă site-ul web al Washington Post cu un articol care menționează Andrew Yang, de asemenea, instrumentele pentru dezvoltatori Chrome.

2. Localizarea elementelor DOM și crearea codului de injecție

Deschideți instrumentele pentru dezvoltatori Chrome apăsând F12, apoi identificați elementul cu fereastra pop-up.

În acest exemplu, iframe element cu ID wallIframe conține fereastra pop-up cu un fundal care se estompează în spate.

Acum, vom folosi un mic fragment JavaScript pentru a adăuga CSS personalizat și pentru a verifica dacă putem ascunde fereastra 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");

După cum puteți vedea, în codul de mai sus evidențiem elementul wallIframe și ascunzându-l adăugând CSS în linie.

3. Testarea codului de injecție

Testați-vă codul în consola dezvoltatorilor Chrome pentru a vă asigura că funcționează.

Captură de ecran care prezintă site-ul web al Washington Post cu un articol care menționează Andrew Yang, de asemenea, instrumentele pentru dezvoltatori Chrome.
Captură de ecran care prezintă site-ul web al Washington Post cu un articol care menționează Andrew Yang, de asemenea, instrumentele pentru dezvoltatori Chrome.

După cum puteți vedea mai sus, codul funcționează.

Acum este timpul să o adăugați la extensie, JavaScript personalizat pentru site-uri webși verificați dacă codul va funcționa la vizitele viitoare. Pentru a-l adăuga, faceți clic stânga pe pictograma extensiei din bara de adrese și adăugați fragmentul personalizat, apoi faceți clic pe salvare.

Pagina se va reîncărca imediat pentru a încerca și testa codul adăugat.

Captură de ecran care prezintă site-ul web al Washington Post cu un articol care menționează Andrew Yang, de asemenea, instrumentele pentru dezvoltatori Chrome.
Captură de ecran care prezintă site-ul web al Washington Post cu un articol care menționează Andrew Yang, de asemenea, instrumentele pentru dezvoltatori Chrome.

4. Codul injecției nu a funcționat, ce se întâmplă acum?

După ce l-am testat, iframe-ul nu a dispărut la fel ca atunci când l-am testat în consolă. Unul dintre motive ar putea fi că iframe-ul se încarcă după X secunde de încărcare a paginii.

Am putea săpa în jurnalul de rețea pentru a vedea dacă acesta este cazul. Dar pentru măsuri de economisire a timpului, vom încerca să adăugăm o funcție de expirare la fragmentul original pentru a vedea dacă acest lucru vă ajută.

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);

Acum, codul așteaptă 10 secunde înainte de a se executa și voilà functioneaza perfect.

De asemenea, puteți adăuga un ascultător de evenimente pentru a aștepta încărcarea completă a paginii.

5. Gânduri finale

De exemplu:

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

Dar, dacă adăugăm codul pop-up după X secunde, funcția de mai sus nu va funcționa, deci mai bine rămâneți la funcția de expirare.

De asemenea, puteți utiliza extensia pentru a adăuga multe alte fragmente interesante, cum ar fi blocarea anunțurilor, blocarea ferestrelor pop-up, creșterea fontului standard al site-ului web, creșterea capacității de reacție, actualizarea aspectului său etc. Odată ce fragmentele JavaScript sunt adăugate, acestea vor rula întotdeauna la vizitele viitoare pe aceste site-uri web.

O mulțumire specială pentru Abbey Rennemeyer de la Routech pentru feedback editorial în pregătirea acestui articol.

DISCLAIMER: Opiniile exprimate în acest articol sunt cele ale autorului (autorilor) și nu reprezintă punctele de vedere ale Universității Carnegie Mellon și nici ale altor companii (direct sau indirect) asociate cu autorul (autorii). Aceste scrieri nu sunt destinate a fi produse finale, ci mai degrabă o reflectare a gândirii actuale, alături de a fi un catalizator pentru discuții și îmbunătățiri.

Mă puteți găsi pe: Site-ul meu personal, Mediu, Instagram, Stare de nervozitate, Facebook, LinkedIn sau prin intermediul meu Companie SEO.