Kako automatski ubrizgati JavaScript kôd za manipulaciju web stranicama

Kao programeri i korisnici interneta, često nailazimo na web stranice koje prikazuju brojne skočne prozore, od zahtjeva za pretplatu do zidova za plaćanje, oglasa do obavijesti itd.

Mnogo puta svakodnevno koristimo te web stranice za sve vrste stvari, a viđanje tih iskačućih prozora uvijek iznova stari.

Programeri ih mogu zaobići odlaskom na konzolu i pronalaženjem birača za manipulaciju objektnim modelom dokumenata web stranice (DOM) dodavanjem ili izmjenom CSS-a ili JavaScript-a.

Ali sada, zahvaljujući Google Chromeu i njegovoj trgovini proširenja, svatko može automatski ubrizgati kôd u bilo koju web stranicu. U ovom ćemo malom vodiču korak po korak proći kroz postupak.

1. Instaliranje proširenja za ubrizgavanje koda

Sljedeće se odnosi samo ako upotrebljavate Google Chrome. Instalirajte prilagođeni JavaScript proširenja za web stranice. Ovo malo proširenje omogućuje vam automatsko pokretanje JavaScript-a na bilo kojem web mjestu i sprema kôd za buduće posjete u vašem web pregledniku.

Prvo posjetite web mjesto s dosadnim skočnim prozorima koje često koristite. Za ovaj vodič koristim web mjesto The Washington Posta:

2. Pronalaženje DOM elemenata i stvaranje injekcijskog koda

Otvorite svoje alate za programere Chrome pritiskom na F12, a zatim identificirajte element sa skočnim prozorom.

U ovom primjeru iframeelement s ID-om wallIframesadrži skočni prozor s pozadinom koja blijedi.

Sada ćemo pomoću malog JavaScript isječka dodati prilagođeni CSS i provjeriti možemo li sakriti skočni prozor.

/* 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");

Kao što vidite, u kodu iznad ističemo element wallIframei skrivamo ga dodavanjem umetnutog CSS-a.

3. Ispitivanje koda za ubrizgavanje

Testirajte svoj kôd na konzoli programera Chrome kako biste bili sigurni da radi.

Snimka zaslona koja prikazuje web stranicu The Washington Posta s člankom u kojem se spominje Andrew Yang, također Chromeov razvojni alat.

Kao što vidite gore, kod djeluje.

Sada je vrijeme da ga dodate u proširenje, prilagođeni JavaScript za web stranice i testirate hoće li kod raditi kod budućih posjeta. Da biste ga dodali, kliknite lijevu tipku miša na ikonu proširenja na adresnoj traci i dodajte prilagođeni isječak, a zatim kliknite Spremi.

Stranica će se odmah ponovo učitati kako bi pokušala testirati dodani kôd.

Snimka zaslona koja prikazuje web stranicu The Washington Posta s člankom u kojem se spominje Andrew Yang, također Chromeov razvojni alat.

4. Šifra za injekciju nije uspjela, što sada?

Nakon testiranja, iframe nije nestao kao kad smo ga testirali u konzoli. Jedan od razloga mogao bi biti taj što se iframe učitava nakon X sekundi učitavanja stranice.

Mogli bismo kopati po mrežnom zapisniku da vidimo je li to slučaj. Ali radi mjera uštede vremena, pokušat ćemo dodati funkciju vremenskog ograničenja u naš izvorni isječak kako bismo provjerili pomaže li to.

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

Sada kod čeka 10 sekundi prije nego što se izvrši, i voilà radi savršeno .

Možete dodati i slušatelj događaja da pričekate da se stranica u potpunosti učita.

5. Završne misli

Na primjer:

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

Ali, ako dodamo skočni kôd nakon X sekundi, gornja funkcija neće raditi, zato se bolje pridržavajte funkcije vremenskog ograničenja.

Proširenje možete koristiti i za dodavanje mnogih drugih cool isječaka, poput blokiranja oglasa, blokiranja skočnih prozora, povećanja standardnog fonta web stranice, povećanja odziva, ažuriranja izgleda i tako dalje. Jednom kada se dodaju JavaScript isječci, oni će se uvijek prikazivati ​​prilikom budućih posjeta tim web mjestima.  

Posebna zahvala Abbeyju Rennemeyeru s freeCodeCampa na uredničkim povratnim informacijama u pripremi ovog članka.

ODRICANJE ODGOVORNOSTI: Stavovi izraženi u ovom članku su stavovi autora (autora) i ne predstavljaju stavove Sveučilišta Carnegie Mellon, kao ni drugih tvrtki (izravno ili neizravno) povezanih s autorom (ovima). Ovi spisi nisu namijenjeni konačnim proizvodima, već su odraz trenutnog razmišljanja, zajedno s tim što su katalizator za raspravu i poboljšanje.

Možete me pronaći na: Moja osobna web stranica, Medium, Instagram, Twitter, Facebook, LinkedIn ili putem moje SEO tvrtke.