Το Chrome είναι εύκολα ο πιο δημοφιλής περιηγητής ιστού στον πλανήτη. Σύμφωνα με την έρευνα για το μερίδιο αγοράς του browser του Statcounter, το Chrome φέρνει στο σπίτι ένα επιβλητικό 65% της αγοράς στα προγράμματα περιήγησης desktop από τα τέλη του 2017.

Με αυτό το είδος εξουσίας καθορισμού της αγοράς, ο σχεδιασμός για το Chrome έχει καταστεί προτεραιότητα. Το ίδιο ισχύει και για τις επεκτάσεις: Το Chrome προσφέρει τη μεγαλύτερη βάση χρηστών για επεκτάσεις, με δεκάδες χιλιάδες επεκτάσεις, θέματα και εφαρμογές που φιλοξενούν το Chrome Web Store.

Εάν θέλετε να εξαργυρώσετε την τάση, μπορείτε να δημιουργήσετε τη δική σας βασική επέκταση του Chrome. Απλά θα χρειαστείτε κάποιες βασικές δεξιότητες ανάπτυξης ιστού (HTML, CSS και Javascript) καθώς και ένα κουταλάκι του JSON για να το συνδέσετε όλα μαζί.

Θα εξετάσουμε την πιο βασική δομή που απαιτείται για την κατασκευή μιας βασικής επέκτασης Chrome σε αυτήν την ανάρτηση. Για να δείτε σε βάθος τις διαθέσιμες δυνατότητες, ανατρέξτε στον Οδηγό επέκτασης του Chrome Developer.

Γράφοντας μια βασική επέκταση του Chrome: Manifest Destiny

Για αυτό το σεμινάριο θα δημιουργήσουμε μια βασική επέκταση του Chrome που εμφανίζει ένα απλό αναδυόμενο μήνυμα όταν κάνει κλικ. Θα χρειαστούμε μερικά σημαντικά αρχεία: ένα εικονίδιο ("icon.png"), ένα αρχείο HTML ("popup.html") και το σημαντικότατο δηλωτικό ("manifest.json"). Όλα αυτά τα αρχεία θα ζουν μέσα σε έναν κατάλογο με το όνομα της επέκτασής σας. Στην περίπτωση αυτή ονομάζεται "Hello World".

Μια επέκταση Chrome ορίζεται από το δηλωτικό της. Αυτό το απόσπασμα του JSON δείχνει το Chrome για την ερμηνεία της επέκτασης, τα αρχεία που θα φορτωθούν και τον τρόπο αλληλεπίδρασης με τον χρήστη.

Το αρχείο δήλωσης για την πολύ βασική μας επέκταση μοιάζει με αυτό:

 {"manifest_version": 2, "name": "Hello World!", "περιγραφή": "Η πρώτη μου επέκταση Chrome", "browser_action": {default_icon ": icon.png, default_popup: .html "}, " δικαιώματα ": [" activeTab "]}

Αυτό το πρόδηλο αρχείο θα βάλει ένα εικονίδιο στη γραμμή εργαλείων του χρήστη που, όταν κάνει κλικ, φορτώνει τα περιεχόμενα του αρχείου που ονομάζεται "popup.html". Το ακόλουθο είναι το nity-gritty στο υπόλοιπο περιεχόμενο:

  • manifest_version λέει στο Chrome ποια είναι η έκδοση της σήμανσης δηλωτικού με την οποία εργάζεστε. Για τις σύγχρονες επεκτάσεις, θα χρειαστεί να ρυθμίσετε αυτό το στοιχείο σε 2.
  • name εμφανίζει το όνομα που θα εμφανίσει η επέκταση στο Chrome store και "chrome: // extensions".
  • description εμφανίζει το περιγραφικό κείμενο που εμφανίζεται στο "chrome: // extensions".
  • browser action φορτώνει το εικονίδιο στη γραμμή εργαλείων. Επιτρέπει επίσης στην επέκταση να ανταποκρίνεται στην είσοδο χρήστη, εμφανίζοντας μια επεξήγηση εργαλείου, αναδυόμενο παράθυρο ή σήμα. Ελέγξτε μια πλήρη λίστα με τα πάντα που μπορεί να κάνει το "browser_action".
  • default_icon εμφανίζει τη διαδρομή προς το εικονίδιο από τον κατάλογο της επέκτασης.
  • default_popup εμφανίζει τη διαδρομή προς το αρχείο που θα φορτωθεί όταν γίνει κλικ στο εικονίδιο της επέκτασης.
  • permissions περιορίζει τη λειτουργική περιοχή της επέκτασης. activeTab είναι το πιο συνηθισμένο, επιτρέποντας στην επέκταση να αποκτά πρόσβαση στην πιο μπροστινή καρτέλα. Η Google παρέχει μια λίστα με όλα τα δικαιώματα που μπορεί να ζητήσει μια επέκταση.

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

Γράφοντας μια βασική επέκταση του Chrome: Τα αναδυόμενα παράθυρα

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

 Γειά σου Κόσμε

Όπως μπορείτε να δείτε, αυτό θα κάνει κάποιο κείμενο στυλ με CSS. Αν θέλετε να προσθέσετε Javascript ή εξωτερικό CSS στην επέκτασή σας, αυτό απαιτεί τη δήλωση των σεναρίων στο δηλωτικό, κάτω από το κλειδί content_scripts . Αφού το αναφέρετε στο δηλωτικό, μπορείτε να φορτώσετε αυτά τα σενάρια όπως θα κάνατε κανονικά.

Γράφοντας μια βασική επέκταση του Chrome: Φόρτωση στο Chrome

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

1. Πλοηγηθείτε στο "chrome: // extensions" και ενεργοποιήστε το "Developer Mode" επιλέγοντας το πλαίσιο ελέγχου στην επάνω δεξιά γωνία.

2. Κάντε κλικ στο πλήκτρο "Load unpacked extension ..." και επιλέξτε τον κατάλογο της επέκτασης.

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

4. Κάντε κλικ στην επέκταση για να δείτε το (πολύ απλό) αποτέλεσμα.

Συμπέρασμα: Επέκταση της επέκτασης Chrome

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

Υπάρχει προφανώς πολύ περισσότερα που μπορείτε να κάνετε με την επέκταση του Chrome, αλλά αυτό είναι κάπως πέρα ​​από το πεδίο αυτής της ανάρτησης. Εάν θέλετε να μάθετε περισσότερα σχετικά με τις δυνατότητες των επεκτάσεων του Chrome, ανατρέξτε στον Οδηγό επέκτασης Chrome Developer της Google.