So injizieren Sie JavaScript-Code, um Websites automatisch zu bearbeiten

Als Entwickler und Benutzer des Internets stoßen wir häufig auf Websites, auf denen viele Popups angezeigt werden, von Abonnementanfragen über Paywalls, Werbung bis hin zu Benachrichtigungen usw.

Oft nutzen wir diese Websites täglich für alle möglichen Dinge, und diese Popups werden immer wieder alt!

Entwickler können dies umgehen, indem sie zur Konsole gehen und Selektoren finden, um das Dokumentobjektmodell (DOM) der Website durch Hinzufügen oder Ändern von CSS oder JavaScript zu bearbeiten.

Dank Google Chrome und seinem Erweiterungsspeicher kann jetzt jeder automatisch Code in jede Website einfügen. Wir werden den Prozess in dieser kleinen Anleitung Schritt für Schritt durchgehen.

1. Installieren der Erweiterung zum Injizieren des Codes

Folgendes gilt nur, wenn Sie Google Chrome verwenden. Installieren Sie die Erweiterung benutzerdefiniertes JavaScript für Websites. Mit dieser kleinen Erweiterung können Sie JavaScript auf jeder Website automatisch ausführen und den Code für zukünftige Besuche in Ihrem Webbrowser speichern.

Besuchen Sie zunächst die Website mit nervigen Popups, die Sie häufig verwenden. Für dieses Tutorial verwende ich die Website der Washington Post:

2. Suchen von DOM-Elementen und Erstellen des Injektionscodes

Öffnen Sie Ihre Chrome-Entwicklertools, indem Sie F12 drücken, und identifizieren Sie das Element mit dem Popup.

In diesem Beispiel enthält das iframeElement mit der ID wallIframedas Popup mit einem verblassenden Hintergrund im Hintergrund.

Jetzt verwenden wir ein kleines JavaScript-Snippet, um benutzerdefiniertes CSS hinzuzufügen und zu überprüfen, ob wir das Popup ausblenden können.

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

Wie Sie sehen können, markieren wir im obigen Code das Element wallIframeund blenden es aus, indem wir Inline-CSS hinzufügen.

3. Testen des Injektionscodes

Testen Sie Ihren Code in der Chrome-Entwicklerkonsole, um sicherzustellen, dass er funktioniert.

Screenshot mit der Website der Washington Post mit einem Artikel, in dem Andrew Yang, ebenfalls die Entwicklertools von Chrome, erwähnt wird.

Wie Sie oben sehen können, funktioniert der Code.

Jetzt ist es an der Zeit, es der Erweiterung, dem benutzerdefinierten JavaScript für Websites, hinzuzufügen und zu testen, ob der Code bei zukünftigen Besuchen funktioniert. Um es hinzuzufügen, klicken Sie mit der linken Maustaste auf das Erweiterungssymbol in Ihrer Adressleiste, fügen Sie das benutzerdefinierte Snippet hinzu und klicken Sie dann auf Speichern.

Die Seite wird sofort neu geladen, um zu versuchen, Ihren hinzugefügten Code zu testen.

Screenshot mit der Website der Washington Post mit einem Artikel, in dem Andrew Yang, ebenfalls die Entwicklertools von Chrome, erwähnt wird.

4. Der Injektionscode hat nicht funktioniert, was jetzt?

Nach dem Testen verschwand der Iframe nicht so wie beim Testen in der Konsole. Einer der Gründe könnte sein, dass der Iframe nach X Sekunden Laden der Seite geladen wird.

Wir könnten im Netzwerkprotokoll nachsehen, ob dies der Fall ist. Aus zeitsparenden Gründen werden wir versuchen, unserem ursprünglichen Snippet eine Timeout-Funktion hinzuzufügen, um festzustellen, ob dies hilfreich ist.

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

Jetzt wartet der Code 10 Sekunden, bevor er ausgeführt wird, und voilà funktioniert einwandfrei .

Sie können auch einen Ereignis-Listener hinzufügen, um zu warten, bis die Seite vollständig geladen ist.

5. Letzte Gedanken

Zum Beispiel:

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

Wenn wir den Popup-Code jedoch nach X Sekunden hinzufügen, funktioniert die obige Funktion nicht. Halten Sie sich also besser an die Timeout-Funktion.

Sie können die Erweiterung auch verwenden, um viele andere coole Snippets hinzuzufügen, z. B. zum Blockieren von Anzeigen, Blockieren von Popups, Erhöhen der Standardschriftart der Website, Erhöhen der Reaktionsfähigkeit, Aktualisieren des Erscheinungsbilds usw. Sobald die JavaScript-Snippets hinzugefügt wurden, werden sie bei zukünftigen Besuchen dieser Websites immer ausgeführt.  

Ein besonderer Dank geht an Abbey Rennemeyer von freeCodeCamp für das redaktionelle Feedback zur Vorbereitung dieses Artikels.

HAFTUNGSAUSSCHLUSS: Die in diesem Artikel geäußerten Ansichten sind die der Autoren und geben weder die Ansichten der Carnegie Mellon University noch anderer mit den Autoren verbundener Unternehmen (direkt oder indirekt) wieder. Diese Schriften sind nicht als Endprodukte gedacht, sondern spiegeln das aktuelle Denken wider und sind gleichzeitig ein Katalysator für Diskussionen und Verbesserungen.

Sie finden mich auf: meiner persönlichen Website, Medium, Instagram, Twitter, Facebook, LinkedIn oder über meine SEO-Firma.