Hogyan kell injektálni a JavaScript kódot a weboldalak automatikus kezeléséhez

Az internet fejlesztőként és felhasználóként gyakran találkozunk olyan webhelyekkel, amelyek sok előugró ablakot jelenítenek meg, az előfizetési kérelmektől a fizetőfalakig, a hirdetéseken át az értesítésekig stb.

Sokszor naponta használjuk ezeket a weboldalakat mindenféle dologra, és az előugró ablakok újra és újra látása öregszik!

A fejlesztők ezeket úgy megkerülhetik, hogy a konzolhoz lépve kiválasztókat találnak a webhely dokumentumobjektum-modelljének (DOM) manipulálására CSS vagy JavaScript hozzáadásával vagy módosításával.

De most a Google Chrome-nak és annak kiterjesztési áruházának köszönhetően bárki automatikusan beírhat kódot bármely webhelyre. Ebben a kis útmutatóban lépésről lépésre átmegyünk a folyamatra.

1. A kiterjesztés telepítése a kód beadásához

Az alábbiak csak akkor érvényesek, ha a Google Chrome-ot használja. Telepítse az egyedi JavaScript kiterjesztést a webhelyekhez. Ez a kis kiterjesztés lehetővé teszi a JavaScript automatikus futtatását bármely webhelyen, és elmenti a jövőbeni látogatások kódját a böngészőjében.

Először látogasson el a webhelyre idegesítő előugró ablakokkal, amelyeket gyakran használ. Ehhez az oktatóanyaghoz a The Washington Post webhelyét használom:

2. A DOM elemek megkeresése és az injekciós kód létrehozása

Nyissa meg a Chrome fejlesztői eszközeit az F12 megnyomásával, majd azonosítsa az elemet az előugró ablakkal.

Ebben a példában iframeaz azonosítóval wallIframerendelkező elem tartalmazza a felugró ablakot, amelynek hátulja némi halványuló háttérrel rendelkezik.

Most egy kis JavaScript-kódrészlettel használjuk az egyéni CSS hozzáadását, és ellenőrizzük, hogy el tudjuk-e rejteni az előugró ablakot.

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

Mint látható, a fenti kódban kiemeljük az elemet, wallIframeés rejtettük beillesztett CSS hozzáadásával.

3. Az injekciós kód tesztelése

Tesztelje kódját a Chrome fejlesztői konzolon, hogy megbizonyosodjon arról, hogy működik-e.

Pillanatkép, amely a The Washington Post webhelyét mutatja be, egy cikkel, amely Andrew Yang-ot említi, a Chrome fejlesztői eszközeit is.

Mint fent láthatja, a kód működik.

Itt az ideje, hogy hozzáadja a kiterjesztéshez, az egyedi JavaScript webhelyekhez, és tesztelje, hogy a kód működni fog-e a jövőbeni látogatások során. Hozzáadásához kattintson a bal egérgombbal a címsávon található kiterjesztés ikonjára, és adja hozzá az egyéni kódrészletet, majd kattintson a Mentés gombra.

Az oldal azonnal újratöltődik, hogy kipróbálja a hozzáadott kódot.

Pillanatkép, amely a The Washington Post webhelyét mutatja be, egy cikkel, amely Andrew Yang-ot említi, a Chrome fejlesztői eszközeit is.

4. Az injekciós kód nem működött, mi van most?

A tesztelés után az iframe nem tűnt el úgy, mint amikor a konzolon teszteltük. Ennek egyik oka az lehet, hogy az iframe betöltődik az oldal betöltését követő X másodperc után.

Áshatnánk a hálózati naplóba, hogy lássuk, ez a helyzet. De az időmegtakarítás érdekében megpróbálunk hozzáadni egy időkorlát funkciót az eredeti részletünkhöz, hátha ez segít.

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

Most a kód 10 másodpercet vár, mielőtt végrehajtja, és voilà tökéletesen működik .

Eseményfigyelőt is felvehet, hogy megvárja az oldal teljes betöltését.

5. Záró gondolatok

Például:

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

De, ha X másodperc után hozzáadjuk az előugró kódot, a fenti funkció nem fog működni, ezért jobb, ha ragaszkodik az időkorlát funkcióhoz.

A kiterjesztést számos más jó kivonat hozzáadásához is felhasználhatja, például a hirdetések blokkolásához, az előugró ablakok blokkolásához, a webhely szabványos betűkészletének növeléséhez, az érzékenység növeléséhez, a megjelenés frissítéséhez stb. A JavaScript-kódrészletek hozzáadása után ezek a webhelyek későbbi látogatásakor mindig futnak.  

Külön köszönet Abbey Rennemeyer-nek a freeCodeCamp-tól a szerkesztői visszajelzésekért a cikk elkészítése során.

NYILATKOZAT: A cikkben kifejtett nézetek a szerző (k) véleményét tükrözik, és nem képviselik a Carnegie Mellon Egyetem, valamint a szerző (k) hez kapcsolódó más (közvetlenül vagy közvetett) vállalatok véleményét. Ezeket az írásokat nem végtermékeknek szánják, hanem inkább a jelenlegi gondolkodás tükröződései, valamint a vita és a fejlődés katalizátora.

Megtalálhat: Saját személyes webhelyemen, Közepes, Instagram, Twitter, Facebook, LinkedIn vagy SEO cégemen keresztül.