Πώς να δημιουργήσετε μια επέκταση Chrome

Σε αυτό το άρθρο, θα σας διδάξω πώς να φτιάξετε μια δική σας επέκταση Chrome. Βασίζω τα μαθήματα που έμαθα κατά τη δημιουργία του TalkToMe, μιας επέκτασης Chrome που βοηθά τα άτομα με προβλήματα όρασης διαβάζοντας το περιεχόμενο ιστότοπου και μεταβαίνοντας σε άλλες ιστοσελίδες.

Θα καλύψω τα βασικά στοιχεία της ρύθμισης της επέκτασής σας, όπως:

  • Διαμόρφωση των αρχείων για εγκατάσταση
  • Προετοιμασία για τοποθέτηση στο κατάστημα Chrome
Δεν θα καλύψω τον τρόπο διαχείρισης λειτουργιών ήχου, όπως ο χειρισμός δικαιωμάτων μικροφώνου. Αυτό καλύπτεται σε αυτό το άρθρο από τον φίλο μου Palash και χρησιμοποιεί επίσης την επέκταση TalkToMe ως παράδειγμα.

Διαμόρφωση των αρχείων για εγκατάσταση

Αρχικά, μεταβείτε στο chrome: // extensions στο πρόγραμμα περιήγησής σας ή απλώς κάντε κλικ στο "More Tools" και "Extensions" στο μενού του Chrome. Αυτό θα σας οδηγήσει στη σελίδα διαχείρισης επέκτασης, όπου μπορείτε να ενεργοποιήσετε τη λειτουργία προγραμματιστή (θα πρέπει να βρίσκεται στην επάνω δεξιά γωνία).

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

{ "name": "Chrome Extension Example", "version": "1.0", "description": "Build an Extension!", "manifest_version": 2}

Για να ανεβάσετε τον κατάλογό σας στη σελίδα διαχείρισης επέκτασης, κάντε κλικ στο κουμπί "Φόρτωση αποσυσκευασμένου" και επιλέξτε τον κατάλογό σας. Αυτό θα συνδέσει τα αρχεία σας με τη διεπαφή χρήστη που βασίζεται στον ιστό.

Ένα άλλο σημαντικό αρχείο που θα πρέπει να διαμορφώσετε είναι background.js, το οποίο είναι το σενάριο φόντου του έργου σας.

Ένα δείγμα σεναρίου φόντου έχει αυτόν τον τύπο δομής:

chrome.runtime.onInstalled.addListener(function() { // add an action here});

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

Μπορείτε ακόμη και να έχετε πολλά σενάρια φόντου. Πρέπει απλώς να καταχωρήσετε όλα αυτά στο αρχείο δήλωσης πρώτα. Για να το κάνετε αυτό, απλώς δομήστε manifest.jsέτσι, όπως φαίνεται το αρχείο δήλωσης στην επέκτασή μας:

{ "name": "Chrome Extension Example", ...
 "background": { "scripts": [ "js/es6-promise.auto.min.js", "js/defaults.js", "js/speech.js", "js/document.js", "js/events.js", "js/stt.js", "js/listen.js" ], "persistent": false }}

Τώρα, θα χρειαστείτε ένα αρχείο όχι μόνο για τη λειτουργία της επέκτασής σας, αλλά και για το περιβάλλον εργασίας χρήστη. Για να το κάνετε αυτό, καλέστε ένα αρχείο popup.html. Το αναδυόμενο παράθυρο είναι ένα μικρό παράθυρο που εμφανίζεται μόλις κάνετε κλικ στο εικονίδιο επέκτασης. Για παράδειγμα, εδώ είναι το αναδυόμενο παράθυρο για την επέκταση του Cookie Manager Firefox.

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

    button { height: 30px; width: 30px; outline: none; }  ;    

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

Ώρα να διαμορφώσετε τον αναδυόμενο κώδικα και το εικονίδιο. Για το εικονίδιο, ωστόσο, θα πρέπει να προσθέσετε κώδικα σε δύο μέρη, "default_icon" και "icons". Η ιδιότητα "default_icon" χρησιμοποιείται για εικονίδια γραμμής εργαλείων και "εικονίδια" χρησιμοποιείται για τις εικόνες που εμφανίζονται στη σελίδα διαχείρισης επέκτασης.

Επιστρέψτε manifest.jsonκαι προσθέστε τις ακόλουθες γραμμές κώδικα, αντικαθιστώντας τις διαδρομές εικόνας για το προεπιλεγμένο εικονίδιο με τις δικές σας εικόνες. Μπορείτε επίσης να βάλετε τις ίδιες εικόνες τόσο για τα «default_icon» όσο και για τα «εικονίδια». Και, δεν χρειάζεται να βάλετε εικόνες με τις ίδιες διαστάσεις με αυτές που καθορίζονται παρακάτω. Για παράδειγμα, αν έχετε μόνο εικόνες 16 x 16 και 48 x 48, μπορείτε να διαγράψετε τις άλλες δύο γραμμές που καθορίζουν 32 και 128 pixel.

{ "name": "Chrome Extension Example", ...
 "page_action": { "default_popup": "popup.html", "default_icon": { "16": "images/img16.png", "32": "images/img32.png", "48": "images/img48.png", "128": "images/img128.png" } }, "icons": { "16": "images/img16.png", "32": "images/img32.png", "48": "images/img48.png", "128": "images/img128.png" }}

Αυτά είναι τα αρχεία που είναι απαραίτητα για τη δημιουργία μιας επέκτασης χρωμίου:

  • ένα μανιφέστο αρχείο,
  • σενάρια φόντου, και
  • ένα αναδυόμενο αρχείο

Ορισμένα άλλα αρχεία που ίσως θέλετε να διαμορφώσετε είναι:

  • options.html και
  • options.js

options.jsθα δώσει στους χρήστες σας μια ευρύτερη ποικιλία επιλογών όσον αφορά τη χρήση της επέκτασής σας. Θα φροντίσει για την εμφάνιση της σελίδας επιλογών σας (είναι παρόμοια με αυτήν popup.html), ενώ options.jsθα χειριστεί τη λειτουργικότητα.

Αυτά τα αρχεία είναι προαιρετικά, αλλά αν αποφασίσετε να τα προσθέσετε, μην ξεχάσετε να διαμορφώσετε options.htmlτο μανιφέστο και να συνδέσετε το options.jsαρχείο σας προσθέτοντας <; / script> πριν από την τελική ετικέτα HTML

{ "name": "Chrome Extension Example", ... "options_page": "options.html"}

Για να δείτε την επέκτασή σας σε δράση, αποθηκεύστε όλα τα αρχεία σας και κάντε κλικ στην επιλογή "Επαναφόρτωση" ενώ βρίσκεστε στη σελίδα Διαχείριση επέκτασης. Θα πρέπει να δείτε το εικονίδιο σας στη γραμμή εργαλείων. Για να προβάλετε τη σελίδα επιλογών σας, μπορείτε επίσης να κάνετε κλικ στην επιλογή "Λεπτομέρειες" κάτω από την επέκτασή σας και να μετακινηθείτε προς τα κάτω, όπου αναφέρεται "Επιλογές επέκτασης".

Δημοσίευση του έργου σας στο διαδικτυακό κατάστημα

Έτσι, έχετε αναπτύξει και δοκιμάσει την επέκτασή σας. Τώρα πρέπει να το διανείμετε!

Για να ξεκινήσετε τη μεταφόρτωση του έργου σας, πρώτα μετατρέψτε το σε αρχείο .zip. Το αρχείο θα πρέπει, τουλάχιστον, να περιέχει το manifest.jsonαρχείο. Στη συνέχεια, βεβαιωθείτε ότι έχετε λογαριασμό προγραμματιστή μεταβαίνοντας στον Πίνακα ελέγχου προγραμματιστή Chrome Webstore.

Κάντε κλικ στο κουμπί "Προσθήκη νέου στοιχείου" και θα σας επιτρέψει να ανεβάσετε το .zipαρχείο σας εκεί. Εάν δεν θέλετε να καταχωρίσετε πληρωμές για την εφαρμογή σας, μπορείτε να παραλείψετε το βήμα για τη ρύθμιση ενός συστήματος πληρωμών. Ωστόσο, θα πρέπει να πληρώσετε μια εφάπαξ χρέωση 5 $ για προγραμματιστές, όταν τοποθετείτε το έργο σας στο κατάστημα διαδικτύου.

Επίσης, μην ξεχάσετε να συμπεριλάβετε μια λεπτομερή περιγραφή και φωτογραφίες της επέκτασής σας, ώστε οι πιθανοί χρήστες να γνωρίζουν ακριβώς τι κάνει το έργο σας!

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

Συγχαρητήρια, δημοσιεύσατε τώρα την επέκτασή σας! ;

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