JavaScripti koodi süstimine veebisaitide automaatseks manipuleerimiseks

Interneti-arendajate ja -kasutajatena kohtame sageli veebisaite, kus kuvatakse palju hüpikaknaid, alates tellimistaotlustest kuni palgamüürideni, reklaamidest märguanneteni jne.

Mitu korda kasutame neid veebisaite iga päev igasuguste asjade jaoks ja nende hüpikakende nägemine vananeb!

Arendajad saavad neist mööda minna, kui lähete konsooli ja leiate selektorid, et veebisaidi dokumendiobjekti mudelit (DOM) manipuleerida, lisades või muutes CSS-i või JavaScripti.

Kuid nüüd saab igaüks tänu Google Chrome'ile ja selle laienduste poodile mis tahes veebisaidile koodi automaatselt sisestada. Läheme protsessist samm-sammult läbi selles väikeses juhendis.

1. Koodi sisestamiseks laienduse installimine

Järgmine kehtib ainult siis, kui kasutate Google Chrome'i. Installige laienduse veebisaitide jaoks kohandatud JavaScripti. See väike laiendus võimaldab teil JavaScripti igal veebisaidil automaatselt käivitada ja see salvestab tulevaste külastuste koodi teie veebibrauserisse.

Kõigepealt külastage veebisaiti tüütute hüpikakendega, mida kasutate sageli. Selle õpetuse jaoks kasutan Washington Posti veebisaiti:

2. DOM-elementide leidmine ja süstimiskoodi loomine

Avage oma Chrome'i arendaja tööriistad, vajutades klahvi F12, seejärel tuvastage element hüpikaknaga.

Selles näites sisaldab iframeID-ga element wallIframehüpikakna, mille tagumine osa on kustuva taustaga.

Nüüd kasutame kohandatud CSS-i lisamiseks väikest JavaScripti juppi ja kontrollime, kas suudame hüpikut varjata.

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

Nagu näete, tõstame ülaltoodud koodis esile elemendi wallIframeja peidame selle, lisades CSS-i.

3. Süstekoodi testimine

Testige oma koodi Chrome'i arendajate konsoolis ja veenduge, et see töötab.

Ekraanipilt, mis näitab Washington Posti veebisaiti koos artikliga, milles mainitakse Andrew Yangi, samuti Chrome'i arendustööriistu.

Nagu ülal näete, töötab kood.

Nüüd on aeg lisada see laiendusse, kohandatud JavaScripti veebisaitidele ja testida, kas kood töötab ka järgmistel külastustel. Selle lisamiseks paremklõpsake oma aadressiribal laienduse ikooni ja lisage kohandatud koodilõik, seejärel klõpsake nuppu Salvesta.

Teie lisatud koodi proovimiseks laaditakse leht kohe uuesti.

Ekraanipilt, mis näitab Washington Posti veebisaiti koos artikliga, milles mainitakse Andrew Yangi, samuti Chrome'i arendustööriistu.

4. Süstekood ei töötanud, mis nüüd?

Pärast selle testimist ei kadunud iframe nagu see, kui me seda konsoolis testisime. Üks põhjus võib olla see, et iframe laaditakse pärast X sekundit pärast lehe laadimist.

Võiksime võrgupäevikusse kaevuda, et näha, kas see nii on. Kuid aja kokkuhoiu meetmete jaoks proovime lisada oma algsele koodilõigule aegumise funktsiooni, et näha, kas see aitab.

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

Nüüd ootab kood 10 sekundit, enne kui see käivitub, ja voilà töötab see ideaalselt .

Samuti saate lisada sündmuste kuulaja, et oodata lehe täielikku laadimist.

5. Lõpumõtted

Näiteks:

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

Kuid kui lisame hüpikakoodi pärast X sekundit, siis ülaltoodud funktsioon ei tööta, nii et parem püsige ajalõppude funktsioonis.

Laiendust saate kasutada ka paljude muude lahedate juppide lisamiseks, näiteks reklaamide blokeerimiseks, hüpikute blokeerimiseks, veebisaidi standardfondi suurendamiseks, reageerimisvõime suurendamiseks, selle välimuse värskendamiseks ja nii edasi. Kui JavaScripti jupid on lisatud, käitatakse neid alati nende veebisaitide edaspidistel külastustel.  

Eriline tänu Abbey Rennemeyerile freeCodeCampist toimetuse tagasiside eest selle artikli ettevalmistamisel.

VASTUVÕTU: Selles artiklis väljendatud vaated on autori (te) seisukohad ega esinda Carnegie Melloni ülikooli ega teiste autoriga (otseselt või kaudselt) seotud ettevõtete vaateid. Need kirjutised ei ole mõeldud lõpptoodangutena, vaid pigem peegeldavad praegust mõtlemist ning on arutelu ja parendamise katalüsaatoriks.

Mind leiate aadressilt: Minu isiklik veebisait, Medium, Instagram, Twitter, Facebook, LinkedIn või minu SEO-ettevõtte kaudu.