Πώς να κάνετε ένεση κώδικα JavaScript για αυτόματη διαχείριση ιστότοπων

Ως προγραμματιστές και χρήστες του Διαδικτύου, συναντάμε συχνά ιστότοπους που εμφανίζουν πολλά αναδυόμενα παράθυρα, από αιτήματα συνδρομής έως paywalls, διαφημίσεις έως ειδοποιήσεις και ούτω καθεξής.

Πολλές φορές, χρησιμοποιούμε αυτούς τους ιστότοπους καθημερινά για όλα τα είδη πραγμάτων, και βλέπουμε αυτά τα αναδυόμενα παράθυρα ξανά και ξανά!

Οι προγραμματιστές μπορούν να τα ξεπεράσουν μεταβαίνοντας στην κονσόλα και βρίσκοντας επιλεγμένους για χειρισμό του μοντέλου αντικειμένου εγγράφου (DOM) προσθέτοντας ή τροποποιώντας CSS ή JavaScript.

Αλλά τώρα, χάρη στο Google Chrome και το κατάστημα επέκτασής του, ο καθένας μπορεί να εισάγει κώδικα σε οποιονδήποτε ιστότοπο αυτόματα. Θα περάσουμε στη διαδικασία βήμα προς βήμα σε αυτόν τον μικρό οδηγό.

1. Εγκατάσταση της επέκτασης για την έγχυση του κώδικα

Τα ακόλουθα ισχύουν μόνο εάν χρησιμοποιείτε το Google Chrome. Εγκαταστήστε την προσαρμοσμένη JavaScript επέκτασης για ιστότοπους. Αυτή η μικρή επέκταση σάς επιτρέπει να εκτελείτε αυτόματα JavaScript σε οποιονδήποτε ιστότοπο και αποθηκεύει τον κώδικα για μελλοντικές επισκέψεις στο πρόγραμμα περιήγησης ιστού.

Αρχικά, επισκεφθείτε τον ιστότοπο με ενοχλητικά αναδυόμενα παράθυρα που χρησιμοποιείτε συχνά. Για αυτό το σεμινάριο, χρησιμοποιώ τον ιστότοπο της Washington Post:

2. Εντοπισμός στοιχείων DOM και δημιουργία του κώδικα έγχυσης

Ανοίξτε τα εργαλεία προγραμματιστή Chrome πατώντας F12 και, στη συνέχεια, προσδιορίστε το στοιχείο με το αναδυόμενο παράθυρο.

Σε αυτό το παράδειγμα, το iframeστοιχείο με αναγνωριστικό wallIframeπεριέχει το αναδυόμενο παράθυρο με φόντο εξασθένισης στο πίσω μέρος.

Τώρα, θα χρησιμοποιήσουμε ένα μικρό απόσπασμα JavaScript για να προσθέσουμε προσαρμοσμένο CSS και να ελέγξουμε αν μπορούμε να αποκρύψουμε το αναδυόμενο παράθυρο.

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

Όπως μπορείτε να δείτε, στον παραπάνω κώδικα επισημαίνουμε το στοιχείο wallIframeκαι το κρύβουμε προσθέτοντας ενσωματωμένο CSS.

3. Δοκιμή του κωδικού έγχυσης

Δοκιμάστε τον κώδικά σας στην κονσόλα προγραμματιστών του Chrome για να βεβαιωθείτε ότι λειτουργεί.

Στιγμιότυπο οθόνης που δείχνει τον ιστότοπο της Washington Post με ένα άρθρο που αναφέρει τον Andrew Yang, επίσης τα εργαλεία προγραμματιστών του Chrome.

Όπως μπορείτε να δείτε παραπάνω, ο κώδικας λειτουργεί.

Τώρα ήρθε η ώρα να το προσθέσετε στην επέκταση, το προσαρμοσμένο JavaScript για ιστότοπους και να ελέγξετε εάν ο κώδικας θα λειτουργήσει σε μελλοντικές επισκέψεις. Για να το προσθέσετε, κάντε αριστερό κλικ στο εικονίδιο επέκτασης στη γραμμή διευθύνσεών σας και προσθέστε το προσαρμοσμένο απόσπασμα και, στη συνέχεια, κάντε κλικ στην επιλογή Αποθήκευση.

Η σελίδα θα ξαναφορτωθεί αμέσως για να δοκιμάσετε και να δοκιμάσετε τον κωδικό που έχετε προσθέσει.

Στιγμιότυπο οθόνης που δείχνει τον ιστότοπο της Washington Post με ένα άρθρο που αναφέρει τον Andrew Yang, επίσης τα εργαλεία προγραμματιστών του Chrome.

4. Ο κωδικός έγχυσης δεν λειτούργησε, τι τώρα;

Μετά τη δοκιμή του, το iframe δεν εξαφανίστηκε όπως έκανε όταν το δοκιμάσαμε στην κονσόλα. Ένας από τους λόγους θα μπορούσε να είναι ότι το iframe φορτώνεται μετά από X δευτερόλεπτα από τη φόρτωση της σελίδας.

Θα μπορούσαμε να σκάψουμε στο αρχείο καταγραφής δικτύου για να δούμε αν συμβαίνει αυτό. Αλλά για μέτρα εξοικονόμησης χρόνου, θα προσπαθήσουμε να προσθέσουμε μια συνάρτηση χρονικού ορίου στο αρχικό μας απόσπασμα για να δούμε αν αυτό βοηθά.

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

Τώρα ο κώδικας περιμένει 10 δευτερόλεπτα προτού εκτελεστεί και το voilà λειτουργεί τέλεια .

Μπορείτε επίσης να προσθέσετε ένα πρόγραμμα ακρόασης συμβάντων για να περιμένετε να φορτωθεί πλήρως η σελίδα.

5. Τελικές σκέψεις

Για παράδειγμα:

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

Αλλά, αν προσθέσουμε τον αναδυόμενο κώδικα μετά από X δευτερόλεπτα, η παραπάνω συνάρτηση δεν θα λειτουργήσει, οπότε καλύτερα να κολλήσετε στη λειτουργία χρονικού ορίου

Μπορείτε επίσης να χρησιμοποιήσετε την επέκταση για να προσθέσετε πολλά άλλα δροσερά αποσπάσματα, όπως για να αποκλείσετε διαφημίσεις, να αποκλείσετε αναδυόμενα παράθυρα, να αυξήσετε την τυπική γραμματοσειρά του ιστότοπου, να αυξήσετε την απόκριση, να ενημερώσετε την εμφάνισή του και ούτω καθεξής. Μόλις προστεθούν τα αποσπάσματα JavaScript, θα εκτελούνται πάντα σε μελλοντικές επισκέψεις σε αυτούς τους ιστότοπους.  

Ιδιαίτερες ευχαριστίες στον Abbey Rennemeyer από το freeCodeCamp για τα συντακτικά σχόλια κατά την προετοιμασία αυτού του άρθρου.

ΑΠΟΠΟΙΗΣΗ ΑΠΟΠΟΙΗΣΗΣ: Οι απόψεις που εκφράζονται σε αυτό το άρθρο είναι αυτές των συγγραφέων και δεν αντιπροσωπεύουν τις απόψεις του Πανεπιστημίου Carnegie Mellon, ούτε άλλων εταιρειών (άμεσα ή έμμεσα) που συνδέονται με τους συγγραφείς. Αυτά τα κείμενα δεν προορίζονται να είναι τελικά προϊόντα, αλλά μάλλον αντανάκλαση της τρέχουσας σκέψης, καθώς και καταλύτης για συζήτηση και βελτίωση.

Μπορείτε να με βρείτε στο: Η προσωπική μου ιστοσελίδα, Medium, Instagram, Twitter, Facebook, LinkedIn ή μέσω της εταιρείας SEO μου.