Sådan indsprøjtes JavaScript-kode for automatisk at manipulere websteder

Som udviklere og brugere af internettet støder vi ofte på websteder, der viser mange pop op-vinduer, lige fra abonnementsanmodninger til betalingsvægge, reklamer til meddelelser osv.

Mange gange bruger vi disse websteder dagligt til alle mulige ting, og det at se disse pop op-vinduer igen og igen bliver gammelt!

Udviklere kan omgå disse ved at gå til konsollen og finde vælgere til at manipulere webstedets dokumentobjektmodel (DOM) ved at tilføje eller ændre CSS eller JavaScript.

Men nu takket være Google Chrome og dens udvidelsesbutik kan enhver automatisk indsætte kode på ethvert websted. Vi gennemgår processen trin for trin i denne lille guide.

1. Installation af udvidelsen til at indsprøjte koden

Følgende gælder kun, hvis du bruger Google Chrome. Installer udvidelsen tilpasset JavaScript til websteder. Denne lille udvidelse giver dig mulighed for at køre JavaScript på ethvert websted automatisk, og det gemmer koden til fremtidige besøg i din webbrowser.

Besøg først webstedet med irriterende pop op-vinduer, som du ofte bruger. Til denne vejledning bruger jeg The Washington Post's hjemmeside:

2. Lokalisering af DOM-elementer og oprettelse af injektionskoden

Åbn dine Chrome-udviklerværktøjer ved at trykke på F12, og identificer derefter elementet med pop op-vinduet.

I dette eksempel indeholder iframeelementet med ID wallIframepop op-vinduet med en vis falmende baggrund bagpå.

Nu bruger vi et lille JavaScript-uddrag til at tilføje tilpasset CSS og kontrollere, om vi kan skjule pop op-vinduet.

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

Som du kan se, fremhæver vi i koden ovenfor elementet wallIframeog skjuler det ved at tilføje indbygget CSS.

3. Test af injektionskoden

Test din kode i Chrome-udviklerens konsol for at sikre, at den fungerer.

Skærmbillede, der viser Washington Post's hjemmeside med en artikel, der nævner Andrew Yang, også Chrome's udviklerværktøjer.

Som du kan se ovenfor fungerer koden.

Nu er det tid til at føje det til udvidelsen, brugerdefineret JavaScript til websteder og teste, om koden fungerer ved fremtidige besøg. For at tilføje det skal du venstreklikke på udvidelsesikonet på din adresselinje og tilføje det brugerdefinerede uddrag og derefter klikke på Gem.

Siden genindlæses straks for at prøve at teste din tilføjede kode.

Skærmbillede, der viser Washington Post's hjemmeside med en artikel, der nævner Andrew Yang, også Chrome's udviklerværktøjer.

4. Injektionskoden fungerede ikke, hvad nu?

Efter testning forsvandt iframe ikke, som det gjorde, da vi testede det i konsollen. En af grundene kan være, at iframe indlæses efter X sekunder efter sideindlæsningen.

Vi kunne grave i netværksloggen for at se, om det er tilfældet. Men for tidsbesparende foranstaltninger vil vi prøve at tilføje en timeout-funktion til vores originale uddrag for at se, om det hjælper.

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

Nu venter koden 10 sekunder, før den udføres, og voilà den fungerer perfekt .

Du kan også tilføje en begivenhedslytter for at vente på, at siden indlæses helt.

5. Afsluttende tanker

For eksempel:

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

Men hvis vi tilføjer pop op-koden efter X sekunder, fungerer ovenstående funktion ikke, så hold dig bedre til timeout-funktionen.

Du kan også bruge udvidelsen til at tilføje mange andre seje uddrag, f.eks. Til at blokere annoncer, blokere pop op-vinduer, øge standardskrifttypen på hjemmesiden, øge lydhørhed, opdatere udseendet og så videre. Når JavaScript-uddragene er tilføjet, kører de altid ved fremtidige besøg på disse websteder.  

En særlig tak til Abbey Rennemeyer fra freeCodeCamp for redaktionel feedback som forberedelse af denne artikel.

ANSVARSFRASKRIVELSE: De synspunkter, der udtrykkes i denne artikel, er forfatterens (e) synspunkter og repræsenterer ikke synspunkterne fra Carnegie Mellon University eller andre virksomheder (direkte eller indirekte), der er knyttet til forfatteren (e). Disse skrifter er ikke beregnet til at være endelige produkter, men snarere en afspejling af den nuværende tænkning sammen med at være en katalysator for diskussion og forbedring.

Du kan finde mig på: Min personlige hjemmeside, Medium, Instagram, Twitter, Facebook, LinkedIn eller gennem mit SEO-firma.