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

Αν το επιθυμείτε να προσθέσετε ή να τροποποιήσετε κάποια λειτουργικότητα στο Google Chrome, πρέπει να χρησιμοποιήσετε μια επέκταση. Παρόλο που μπορείτε να κάνετε λήψη μιας επέκτασης από το Chrome Web Store, αλλά μερικές φορές χρειάζεστε μια συγκεκριμένη λειτουργία που δεν μπορείτε να βρείτε σε καμία υπάρχουσα επέκταση.

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

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

Προϋποθέσεις

Για να ξεκινήσετε με αυτό το σεμινάριο, πρέπει να έχετε ολοκληρώσει τις ακόλουθες απαιτήσεις.

1. Πρέπει να είστε εξοικειωμένοι HTML, CSS και JavaScript. [Έλεγχος πόρων]
2. Πρέπει να έχετε ένα editor κώδικα για να γράψετε την επέκταση. [Συγκρίνετε συντάκτες]
3. (Προαιρετικό) Εάν θέλετε να διανείμετε την επέκτασή σας σε άλλους χρήστες, πρέπει να έχετε ένα λογαριασμό προγραμματιστή στο Chrome Web Store. [Δημιουργία λογαριασμού]

Σημείωση: Η Google σας ζητάει να πληρώσετε μια μικρή χρέωση για τη δημιουργία ενός λογαριασμού προγραμματιστή στο Chrome Web Store.

Δημιουργήστε μια επέκταση

Σε αυτό το σεμινάριο, θα μοιραστώ τη διαδικασία δημιουργίας ενός to-do επέκταση για το Google Chrome. Πρόκειται να είναι μια χρησιμότητα (όπως φαίνεται παρακάτω) για να αποδείξει τα βασικά στοιχεία και τις ικανότητες που παρέχονται στις επεκτάσεις.

1. Πάρτε ένα πρότυπο

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

Το Extensionizr είναι η καλύτερη γεννήτρια boilerplate για επεκτάσεις χρωμίου. Σας επιτρέπει να επιλέξετε έναν από τους συγκεκριμένους τύπους επέκτασης - δράση του προγράμματος περιήγησης (ενέργεια για όλες τις σελίδες ή το πρόγραμμα περιήγησης), σελίδα δράση (ενέργεια για την τρέχουσα σελίδα), ή κρυφή επέκταση (μια ενέργεια φόντου που είναι συνήθως κρυμμένη στην μπροστινή διεπαφή).

Επιπλέον, παρέχει διάφορες επιλογές τελειοποίησης περιλαμβάνουν / εξαιρέσει τα απαραίτητα πρόσθετα, δικαιώματα, κ.λπ. Πρέπει να επιλέξετε “Δραστηριότητα προγράμματος περιήγησης” ως τύπος επέκτασης και “Δεν υπάρχει φόντο” ως σελίδα φόντου για αυτό το σεμινάριο.

Όταν ολοκληρώσετε την επιλογή των επιλογών για τη δημιουργία της επέκτασης δείγματος, πατήστε το “Κατέβασέ το!” στο Extensionizr. Τελικά, εξαγωγή του αρχείου (.zip) σε έναν κατάλογο και ανοίξτε τον επεξεργαστή κωδικών για να ξεκινήσετε να γράφετε την επέκταση.

2. Κωδικοποιήστε την επέκταση

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

Ας μάθουμε και άλλα αρχεία και φακέλους σε αυτόν τον κατάλογο:

1. _locales: Είναι συνηθισμένο αποθήκευση πληροφοριών γλώσσας για μια πολυγλωσσική εφαρμογή.
2. css: Λειτουργεί για την αποθήκευση βιβλιοθηκών front-end τρίτων, όπως Bootstrap 4.
3. εικονίδια: Έχει σχεδιαστεί για να έχει εικονίδια για την επέκτασή σας σε ποικίλα μεγέθη.
4. js: Έρχεται βολικό για να σώσει βιβλιοθήκες υποστήριξης τρίτου μέρους όπως το jQuery 3.
5. src: Αποθηκεύει τον πραγματικό κώδικα που θα γράψετε για την επέκτασή σας.

manifest.json

Περιέχει το βασικά μεταδεδομένα για την εφαρμογή σας, που καθορίζει τις λεπτομέρειες της εφαρμογής σας στο πρόγραμμα περιήγησης. Μπορείτε να το επεξεργαστείτε για να ορίσετε το όνομα, την περιγραφή, τον ιστότοπο, το εικονίδιο κλπ. Της επέκτασής σας, μαζί με συγκεκριμένες λεπτομέρειες τις ενέργειες και τις άδειες του προγράμματος περιήγησης.

Για παράδειγμα, στον παρακάτω κώδικα, θα παρατηρήσετε ότι άλλαξα το όνομα, την περιγραφή και το homepage_url μαζί με το default_title στο browser_action. Επιπλέον, εγώ πρόσθεσε “αποθήκευση” υπό άδειες καθώς πρέπει να αποθηκεύουμε δεδομένα στην επέκτασή μας.

 "name": "Todoizr - Απλοποιημένη υπηρεσία", "έκδοση": "0.0.1", "manifest_version": 2, "description" https://go.aksingh.net/todoizr "," εικονίδια ": " 16 ":" icons / icon16.png "," 48 ":" icons / icon48.png "," 128 ":" icons / icon128 , "default_popup": "src /", "default_locale": "en", "browser_action": "default_icon": "icons / icon19.png" browser_action / browser_action.html "," δικαιώματα ": [" αποθήκευση "] 

src \ browser_action

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

Σημείωση: Μπορείτε πάντα να ξεκινήσετε με τον κώδικα με την κλωνοποίηση αυτού του αποθετηρίου.

Αρχικός κώδικας από το πρότυπο

Αν και αυτός ο κατάλογος είχε μόνο ένα αρχείο HTML που έχει όλο τον κώδικα, αποφάσισα να το χωρίσω σε τρία ξεχωριστά αρχεία για καλύτερη διαύγεια. Δηλαδή, το αρχείο HTML που ονομάζεται “browser_action.html” τώρα έχει τον ακόλουθο κώδικα:

Επιπλέον, το αρχείο στυλ που ονομάζεται “browser_action.css” έχει το παρακάτω περιεχόμενο ενώ ονομάζεται το αρχείο JavaScript “browser_action.js” είναι κενό για τώρα.

 #mainPopup padding: 10px; ύψος: 200px; πλάτος: 400px; γραμματοσειρά-οικογένεια: Helvetica, Ubuntu, Arial, sans-serif;  h1 μέγεθος γραμματοσειράς: 2em;  

Σχεδιάστε τη διεπαφή του popup

Μετά την εγκατάσταση του αρχικού έργου, ας σχεδιάσουμε πρώτα τη διεπαφή του αναδυόμενου παραθύρου. έχω ορίστε τη διεπαφή με μια μινιμαλιστική προσέγγιση, εμφανίζοντας το όνομα στην κορυφή, ακολουθούμενο από μια φόρμα για την προσθήκη στοιχείων και μιας περιοχής παρακάτω για την προβολή των πρόσθετων στοιχείων. Είναι εμπνευσμένο από τον απλοϊκό σχεδιασμό του “Στυλ φόρμας 5“.

Στον παρακάτω κώδικα έχω προσθέσει δύο διαιρέσεις - ένα για την εμφάνιση της φόρμας για να προσθέσετε ένα στοιχείο υποχρεώσεων και το άλλο για την εμφάνιση της λίστας των ήδη προστιθέμενων αντικειμένων. Τούτου λεχθέντος, ο νέος κώδικας για “browser_action.html” είναι όπως ακολουθεί:

       
  
 
Todoizr
 
 
   
 
 
  
 
 
 
 
    

Και το αρχείο στυλ “browser_action.css” τώρα έχει τον ακόλουθο κώδικα:

 @import url ("./form_style_5.css"); #mainPopup ύψος: 200px; πλάτος: 300px; γραμματοσειρά-οικογένεια: Helvetica, Ubuntu, Arial, sans-serif;  / * Υποβολή εντύπου στοιχείου * / .form-style-5 margin: auto; συμπλήρωση: 0px 20px;  .form-style-5: first-child φόντο: κανένας;  .form-style-5 h1 χρώμα: # 308ce3; γραμματοσειρά-μέγεθος: 20px; κείμενο-ευθυγράμμιση: κέντρο;  .form-style-5 input [τύπος = "κείμενο"] πλάτος: auto; float: αριστερά. περιθώριο-κάτω: απενεργοποιημένος.  .form-style-5 input [τύπος = "κουμπί"] φόντο: # 308ce3; πλάτος: auto; float: δεξιά? padding: 7px; σύνορα: κανένα · ακτίνα ακτίνας: 4px; γραμματοσειρά-μέγεθος: 14px;  .form-style-5 εισόδου [type = "κουμπί"]: αιωρείται background: # 3868d5;  / * Λίστα υποχρεώσεων υποχρεώσεων * / .form-style-5: last-child height: inherit; περιθώριο-κάτω: 5px;  .form-style-5 μl padding: 20px;  .form-style-5 ul li font-size: 14px;  

Τέλος, το αρχείο στυλ τρίτου μέρους “form_style_5.css” έχει το παρακάτω περιεχόμενο. Απλώς λαμβάνεται από την ιστοσελίδα της για να εμπνεύσει το σχεδιασμό της επέκτασής μας.

 / * Μορφή στυλ 5 από Sanwebe.com * / / * https://www.sanwebe.com/2014/08/css-html-forms-designs * / .form-style-5 max-width: 500px; συμπλήρωση: 10px 20px; φόντο: # f4f7f8; περιθώριο: 10px αυτόματα? padding: 20px; φόντο: # f4f7f8; ακτίνα ακτίνων: 8px; γραμματοσειρά-οικογένεια: Γεωργία, "Times New Roman", Times, serif;  .form-style-5 fieldset όριο: κανένα.  .form-style-5 μύθος font-size: 1.4em; περιθώριο-κάτω: 10px;  .form-style-5 ετικέτα εμφάνιση: μπλοκ? περιθώριο-κάτω: 8px;  .form-style-5 input [type = "text"], .form-style-5 input [type = "date"], 5 εισόδου [type = "αναζήτηση"], .form-style-5 εισόδου [type] Εισαγωγή [type = "email"], = "time"], .form-style-5 input [type = "url"], .form-style-5 textarea, , serif; υπόβαθρο: rgba (255,255,255, .1); σύνορα: κανένα · ακτίνα ακτίνας: 4px; μέγεθος γραμματοσειράς: 16px; περιθώριο: 0; περίγραμμα: 0; padding: 7px; πλάτος: 100%. μέγεθος κιβωτίου: πλαίσιο-πλαίσιο? -webkit-box-μέγεθος: border-box? -Moz-box-μέγεθος: border-box? φόντο-χρώμα: # e8eeef; χρώμα: # 8a97a0; -webkit-box-σκιά: 0 1px 0 rgba (0,0,0,0.03) ένθετο; κουτί σκιά: 0 1px 0 rgba (0,0,0,0.03) ένθετο? περιθώριο-κάτω: 30px;  form-style-5 εισόδου [type = "κείμενο"]: εστίαση, τύπος = "ημερομηνία" [form = "#"]: εστίαση, .form-style-5 εισόδου [type = "email"]: εστίαση,. : μορφή εστίασης, φόρμα εστίασης, εστίαση, φόρμα εστίασης, εστίαση, φόρμα εστίασης, εστίαση, φόρμα εστίασης, style-5 επιλέξτε: εστίαση background: # d2d9dd;  .form-style-5 επιλέξτε -webkit-εμφάνιση: μενού-κουμπί; ύψος: 35px;  .form-style-5 .number φόντο: # 1abc9c; χρώμα: #fff; ύψος: 30px; πλάτος: 30px; εμφάνιση: inline-block μέγεθος γραμματοσειράς: 0,8εμ. περιθώριο-δεξιά: 4px; γραμμή-ύψος: 30px; κείμενο-ευθυγράμμιση: κέντρο; σκιά κειμένου: 0 1px 0 rgba (255,255,255,0.2); ακτίνα-ακτίνα: 15px 15px 15px 0px;  .form-style-5 εισόδου [type = "υποβάλει"], .form-style-5 εισόδου [type = "κουμπί"] θέση: εμφάνιση: μπλοκ? padding: 19px 39px 18px 39px; χρώμα: #FFF; περιθώριο: 0 αυτόματο; φόντο: # 1abc9c; γραμματοσειρά-μέγεθος: 18px; κείμενο-ευθυγράμμιση: κέντρο; γραμματοσειρά: κανονικό; πλάτος: 100%. σύνορα: 1px στερεά # 16a085; πλάτος συνόρου: 1px 1px 3px; περιθώριο-κάτω: 10px;  .form-style-5 εισόδου [type = "υποβάλει"]: hover, .form-style-5 εισόδου [type = "κουμπί"]: hover background: # 109177;  

Γράψτε τη λογική του popup

Μόλις τελειώσουμε με το front-end της επέκτασης, ας γράψουμε τώρα τη λογική για την εργασία της. Χρειαζόμαστε την επέκτασή μας για να μπορέσουμε προσθέστε τα στοιχεία υποχρεώσεων και προβάλετε τα στο αναδυόμενο παράθυρο. Έτσι, θα προσθέσουμε έναν ακουστικό κλικ με κουμπιά για να προσθέσετε το κείμενο εισαγωγής ως στοιχείο υποχρεώσεων και έναν ακροατή φόρτωσης σελίδας για να εμφανίσετε αυτά τα στοιχεία.

Στον παρακάτω κώδικα πρόκειται να χρησιμοποιήσουμε δύο λειτουργίες - sync.get () και sync.set (), τα οποία αποτελούν μέρος του “chrome.storage“. Χρειαζόμαστε το δεύτερο για να αποθηκεύσουμε τα στοιχεία των υποχρεώσεων στο χώρο αποθήκευσης και το πρώτο για να τα ανακτήσουμε και να τα δείξουμε.

Τούτου λεχθέντος, παρακάτω είναι ο τελικός κώδικας του “browser_action.js” αρχείο. Όπως μπορείτε να δείτε παρακάτω, ο κώδικας σχολιάζεται ιδιαίτερα για να σας βοηθήσει να κατανοήσετε τον σκοπό του.

 Λειτουργία loadItems () / * Πρώτα πάρτε () τα δεδομένα από την αποθήκευση * / chrome.storage.sync.get (['todo'], λειτουργία (αποτέλεσμα) var todo = [] if (result && result.todo & (= todo.length = 'todo.length ='); / / * Αναλύστε και πάρτε τον πίνακα όπως αποθηκεύεται ως συμβολοσειρά * / todo = JSON.parse (result.todo) console.log + todo.length) για (var i = 0 · i < todo.length; i++)  item = todo[i] if (item && item.trim() !==")  /* Append the items in the #list for showing them */ var list = document.getElementById('list') var entry = document.createElement('li') var text = document.createTextNode(item) entry.appendChild(text) list.appendChild(entry)   )  /* Load the to-do items upon popup load */ document.addEventListener('DOMContentLoaded', function() console.log('Inside doc.loaded()') loadItems() ) /* Save the to-do item upon button click */ document.getElementById('btn').addEventListener('click', function (ev)  console.log('Inside btn.click()') text = document.getElementById('txt').value if (text && text.trim() !==")  /* First get() old data as calling set() will replace it */ chrome.storage.sync.get(['todo'], function(result)  var todo = [] if (result && result.todo && result.todo.trim() !==")  /* Parse and get the array as it is saved as a string */ todo = JSON.parse(result.todo)  todo.push(text) chrome.storage.sync.set('todo': JSON.stringify(todo), function()  /* Data is saved now */ var list = document.getElementById('list') while (list.firstChild)  list.removeChild(list.firstChild)  loadItems() ) )  ) 

3. Τοποθετήστε την επέκταση

Αφού ολοκληρώσετε τη σύνταξη της επέκτασής σας, είναι καιρός να το δοκιμάσετε μέσω της δυνατότητας του Google Chrome που σας προσφέρει να φορτώσετε επεκτάσεις που δεν έχουν αποθηκευτεί και δεν έχουν αποσυσκευασθεί. Αλλά πρώτα, πρέπει ενεργοποιήστε τη λειτουργία προγραμματιστή στο πρόγραμμα περιήγησης: κάντε κλικ στο επιλογές κουμπί > επιλέγω “Περισσότερα εργαλεία” > Επεκτάσεις, και στη συνέχεια εναλλαγή “λειτουργία για προγραμματιστές“.

Τώρα θα δείτε περισσότερα κουμπιά στη γραμμή αναζήτησης. Εδώ κάντε κλικ στο “Φορτώστε χωρίς συσκευασία” κουμπί. Θα ζητήσει τον κατάλογο - περιηγηθείτε και επιλέξτε τον κατάλογο της επέκτασής σας και θα φορτώσει την επέκταση. Αν επεξεργαστείτε ή ενημερώσετε τον κώδικα της επέκτασής σας, μπορείτε να κάνετε κλικ στο για να φορτώσετε τις τελευταίες αλλαγές.

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

Διανομή μιας επέκτασης

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

Ποιο είναι το επόμενο? Διαβάστε και κωδικοποιήστε

Όπως ίσως περίμενε κανείς, ο σκοπός αυτού του εκπαιδευτικού είναι να ξεκινήσετε με την ανάπτυξη επέκτασης για το Google Chrome. Προσπάθησα να καλύψω τις βασικές έννοιες. ωστόσο, πρέπει να γνωρίζετε πολλά περισσότερα για σοβαρή επέκταση.

Τούτου λεχθέντος, παρακάτω είναι μερικά μου αγαπημένα πηγαία μέσα για μάθηση για την ανάπτυξη επεκτάσεων για το Google Chrome και άλλα προγράμματα περιήγησης με βάση το Chromium:

1. Όλες οι ικανότητες, τα συστατικά στοιχεία και τα χαρακτηριστικά των επεκτάσεων.
2. Δείγμα επεκτάσεων από την ομάδα πίσω από το Google Chrome.

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

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

Αυτό είναι όλο για την ανάπτυξη της πρώτης σας επέκτασης για το πιο δημοφιλές πρόγραμμα περιήγησης. Τι επέκταση δημιούργησε? Αντιμετωπίσατε κάποιο πρόβλημα; Παρακαλώ επιτρέψτε μου να γνωρίζω την ιστορία σας γράφοντας ένα σχόλιο παρακάτω ή με μηνύματα στο @aksinghnet.

Τέλος, σημειώστε ότι μπορείτε να δοκιμάσετε το Todoizr (την επέκταση που δημιουργήσαμε) στο Chrome Web Store και να ελέγξετε τον πλήρη κωδικό του σε αυτόν τον αποθετήριο.