Ένας πρακτικός οδηγός για να δημιουργήσετε εύκολα την πρώτη σας επέκταση προγράμματος περιήγησης συμβατή με Chrome και Firefox.

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

Απαιτούνται μόνο τρία κλειδιά: όνομα, έκδοση και manifest_version. Τα κλειδιά ονόματος και έκδοσης αφορούν συγκεκριμένα την εφαρμογή σας και οι πραγματικές τιμές τους δεν είναι κρίσιμες για αυτήν την εξήγηση. Ωστόσο, το Chrome θα αρνηθεί να φορτώσει την επέκτασή σας εάν η έκδοση δεν είναι έγκυρη, επομένως βεβαιωθείτε ότι είναι ένας ακέραιος αριθμός από το 1 έως το 4, διαχωρισμένος με τελείες, όπως "0" ή "0.0.1".

Το manifest_version είναι ένα λίγο ευαίσθητο σημείο: ενώ άλλα προγράμματα περιήγησης ενδέχεται να υποστηρίζουν τις εκδόσεις 1 και 2, το Chrome θα αρνηθεί να φορτώσει οποιαδήποτε επέκταση εκτός εάν χρησιμοποιείτε την έκδοση 3. Η χρήση αυτής της έκδοσης μειώνει τον έλεγχό σας, αλλά αν θέλετε να υποστηρίζεται το Chrome, θα πρέπει να τη χρησιμοποιήσετε.

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

Το κλειδί content_scripts είναι ένα από τα πιο σημαντικά κλειδιά manifest, καθώς επιτρέπει στο plugin σας να φορτώνει αρχεία JavaScript ή CSS και να τα εφαρμόζει στην ιστοσελίδα.

"content_scripts": [{
    "matches": ["https://en.wikipedia.org/wiki/*"],
    "js": ["script.js"],
    "css": ["style.css"]
}]

Κάθε στοιχείο στο αρχείο content_scripts πρέπει να περιέχει ένα κλειδί matches, το οποίο καθορίζει τις διευθύνσεις URL στις οποίες εκτελείται η επέκταση. Τα κλειδιά `js` και `css` σάς επιτρέπουν να παραθέσετε τα σενάρια ή τα φύλλα στυλ που θα πρέπει να φορτώνει η επέκταση κατά την εμφάνιση μιας σελίδας που αντιστοιχεί.

Γράφοντας τον κώδικα επέκτασης

Αυτό το απλό παράδειγμα προσομοιώνει TampermonkeyΤο Tampermonkey είναι μια δημοφιλής επέκταση που σας επιτρέπει να προσαρμόζετε ιστοσελίδες. Με αυτήν, μπορείτε να κάνετε πράγματα όπως να διορθώσετε τη ροή Reddit σας για να αποφύγετε την εμφάνιση "καλύτερου" περιεχομένου.

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

{
    "manifest_version": 3,
    "name": "tweakipedia",
    "description": "Tweak Wikipedia pages to our liking",
    "version": "1.0",

    "content_scripts": [{
        "matches": ["https://en.wikipedia.org/wiki/*"],
        "js": ["tweakipedia.js"],
        "css": ["tweakipedia.css"]
    }]
}

Θα ξεκινήσω απλά, χρησιμοποιώντας λίγο κώδικα CSS για να τροποποιήσω μερικά πράγματα ώστε να ταιριάζουν στις προσωπικές μου προτιμήσεις. Για παράδειγμα, δεν μου αρέσει η ειδοποίηση "Χρειάζονται περισσότερες αναφορές". Αποσπά την προσοχή του μέσου αναγνώστη. Έτσι, θα την κρύψω καθορίζοντας την κατηγορία του στοιχείου και ορίζοντας την ιδιότητα εμφάνισής του σε "κανένα".

.box-More_citations_needed { display: none; }

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

.cn-fundraising { display: none; }

Μετά από αυτό, βρίσκω τους δείκτες υποσημείωσης λίγο ενοχλητικούς, οπότε θα μειώσω ελαφρώς τη σημασία τους προσαρμόζοντας το χρώμα τους:

sup a { color: rgb(51, 102, 204, 0.5); }

Σημειώστε ότι αυτό είναι το προεπιλεγμένο χρώμα με 50% κανάλι άλφα, που σημαίνει ότι είναι σχεδόν διαφανές. Αυτό βοηθά στη μείωση της ορατότητας αυτών των σημαδιών.

Εξετάζοντας αυτήν την έννοια πιο εις βάθος, θα ήθελα να αποκρύψω (ή να τροποποιήσω) άλλα στοιχεία, αλλά μόνο όταν είναι απαραίτητο, με τη δυνατότητα εύκολης αναίρεσης αλλαγών. Αυτό απαιτεί λίγη JavaScript, αλλά είναι πολύ απλό!

toggle_on_key("Escape", "sup a,.mw-editsection,.vector-page-toolbar");

function toggle_on_key(key, sels) {
    document.addEventListener("keydown", function (ev) {
        if (ev.key === key) {
            document.querySelectorAll(sels).forEach(function (node) {
                node.style.display = node.style.display === "none" ? "" : "none";
            });
        }
    });
}

Δημιούργησα μια εύχρηστη συνάρτηση για την απόκρυψη/εμφάνιση συγκεκριμένων στοιχείων όταν πατιέται ένα συγκεκριμένο πλήκτρο. Ο χειριστής συμβάντων απλώς αναζητά ένα αντίστοιχο πλήκτρο, βρίσκει όλα τα στοιχεία που ταιριάζουν με έναν επιλογέα και τα αποκρύπτει ή τα εμφανίζει με βάση την οπτική τους κατάσταση. Αυτό χρησιμοποιεί την ίδια ιδιότητα CSS (εμφάνιση) με το φύλλο στυλ, αλλά χρησιμοποιεί JavaScript για να το υλοποιήσει δυναμικά.

Εγκατάσταση και χρήση της επέκτασης

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

Στον Firefox, μεταβείτε στο about:debugging, επιλέξτε "Αυτός ο Firefox" από την πλαϊνή γραμμή και, στη συνέχεια, κάντε κλικ στο κουμπί "Φόρτωση προσωρινού πρόσθετου". Επιλέξτε οποιοδήποτε από τα αρχεία σας (αρχείο manifest ή οποιοδήποτε αρχείο κώδικα) και ανοίξτε το.

Στο Chrome, μεταβείτε στη διεύθυνση chrome://extensions/, ενεργοποιήστε τη λειτουργία προγραμματιστή χρησιμοποιώντας τον διακόπτη εναλλαγής στην επάνω δεξιά γωνία και, στη συνέχεια, κάντε κλικ στο κουμπί "Φόρτωση μη συμπιεσμένων αρχείων" στην επάνω αριστερή γωνία. Επιλέξτε τον φάκελο που περιέχει τα αρχεία επέκτασης.

Θα πρέπει να μπορείτε να δείτε την επέκταση να λειτουργεί σε οποιαδήποτε σελίδα της Wikipedia. Θα πρέπει να αλλάξει την εμφάνιση της σελίδας ώστε να μοιάζει με αυτήν:

Όταν εγκατασταθεί και ενεργοποιηθεί η επέκταση, η σελίδα της Wikipedia θα πρέπει να μοιάζει με αυτήν, με την εμφανή ειδοποίηση κρυμμένη και τους συνδέσμους υποσημείωσης σε πιο ανοιχτό χρώμα:

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

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