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

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

Τι είναι η επέκταση Chrome;

Οι επεκτάσεις Chrome σάς επιτρέπουν να προσθέτετε λειτουργικότητα στο πρόγραμμα περιήγησης ιστού Chrome χωρίς να κάνετε βαθιά αναζήτηση στον εγγενή κώδικα. Αυτό είναι καταπληκτικό επειδή μπορείτε να δημιουργήσετε νέες επεκτάσεις για το Chrome με βασικές τεχνολογίες με τις οποίες οι προγραμματιστές ιστού είναι πολύ εξοικειωμένοι - HTML, CSS και JavaScript. Εάν έχετε δημιουργήσει ποτέ μια ιστοσελίδα, θα μπορείτε να δημιουργήσετε μια επέκταση γρηγορότερα από ό, τι μπορείτε να γευματίσετε. Το μόνο που πρέπει να μάθετε είναι πώς να προσθέσετε κάποια λειτουργικότητα στο Chrome μέσω ορισμένων API JavaScript που εκθέτει το Chrome.

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

Τι θέλετε να δημιουργήσετε;

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

Το σχέδιο

Έχω χρησιμοποιήσει την επέκταση Unsplash Chrome για λίγο που μου επιτρέπει να έχω ωραίες εικόνες φόντου του Unsplash στην προεπιλεγμένη καρτέλα μου. Αργότερα το αντικατέστησα με την επέκταση Muzli Chrome που μετατρέπει την προεπιλεγμένη καρτέλα σε ροή ειδήσεων σχεδιασμού και λήψεις από όλο τον ιστό.

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

Βήμα 1: Ρύθμιση των πραγμάτων

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

Για την επέκταση της ταινίας πρέπει να έχουμε άδεια για τον έλεγχο του ActiveTab , έτσι ώστε το manifest.jsonαρχείο μας να μοιάζει με αυτό:

{ “manifest_version”: 2, “name”: “RaterFox”, “description”: “The most popular movies and TV shows in your default tab. Includes ratings, summaries and the ability to watch trailers.”, “version”: “1”, “author”: “Jake Prins”,
"browser_action": { "default_icon": "tab-icon.png", “default_title”: “Have a good day” },
“chrome_url_overrides” : { “newtab”: “newtab.html”},
 “permissions”: [“activeTab”]}

Όπως μπορείτε να δείτε, λέμε ότι newtab.htmlθα είναι το αρχείο HTML που πρέπει να αποδίδεται κάθε φορά που ανοίγει μια νέα καρτέλα. Για να το κάνουμε αυτό πρέπει να έχουμε άδεια για τον έλεγχο του activeTab , οπότε όταν ένας χρήστης προσπαθεί να εγκαταστήσει την επέκταση θα ειδοποιηθεί με όλα τα δικαιώματα που χρειάζεται η επέκταση.

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

“browser_action”: { “default_popup”: “popup.html”, },

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

Βήμα 2: Δοκιμάστε αν λειτουργεί

Το επόμενο βήμα είναι να δημιουργήσετε το newtab.htmlαρχείο και να βάλετε ένα Hello world":

  Test   

Hello World!

Για να ελέγξετε εάν λειτουργεί, επισκεφτείτε chrome://extensionsτο πρόγραμμα περιήγησής σας και βεβαιωθείτε ότι είναι επιλεγμένο το πλαίσιο ελέγχου Λειτουργία προγραμματιστή στην επάνω δεξιά γωνία.

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

Βήμα 3: Κάνοντας τα πράγματα ωραία

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

Ολοκληρώνοντας το σχέδιο

Το μόνο που χρειαζόμουν για να ολοκληρώσω την επέκταση της ταινίας ήταν HTML, CSS και JavaScript, οπότε δεν νομίζω ότι είναι σημαντικό να βυθιστείτε βαθιά στον κώδικα, αλλά θα ήθελα να το εξετάσω γρήγορα.

Εδώ είναι αυτό που έκανα:

Για την ιδέα μου, χρειαζόμουν μερικές ωραίες εικόνες φόντου, οπότε στο αρχείο JavaScript χρησιμοποίησα το API TMDb για να φέρω μερικές δημοφιλείς ταινίες, έβγαλα τις σκηνές τους και τις έβαλα σε μια σειρά. Κάθε φορά που η σελίδα φορτώνει τώρα επιλέγει τυχαία μία εικόνα από αυτόν τον πίνακα και την ορίζει ως φόντο της σελίδας. Για να κάνω αυτή τη σελίδα λίγο πιο ενδιαφέρουσα, πρόσθεσα επίσης την τρέχουσα ημερομηνία στην επάνω δεξιά γωνία. Και για περισσότερες πληροφορίες, επιτρέπει στους χρήστες να κάνουν κλικ στο παρασκήνιο που οδηγεί στην επίσκεψη στη σελίδα IMDb της ταινίας.

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

Το αποτέλεσμα

Now with that little manifest.json file and just some HTML, CSS and JavaScript, every new tab that you open looks a lot more interesting:

Step 4: Publish your extension

When your first Chrome extension looks nice and works like it should, it’s time to publish it to the Chrome Store. Simply follow this link to go to your Chrome Web Store dashboard (you’ll be asked to sign in to your Google account if you’re not). Then click the Add new item button, accept the terms and you will go to the page where you can upload your extension. Now compress the folder that contains your project and upload that ZIP file.

After successfully uploading your file, you will see a form in which you should add some information about your extension. You can add an icon, a detailed description, upload some screenshots, and so on.

Make sure you provide some nice images to show off your project. The store can use these images to promote your groundbreaking project. The more images you provide, the more prominently your extension will be featured. You can preview how your extension looks inside the web store by clicking the Preview changes button. When you’re happy with the result, hit Publish changesand that’s it, your done!

Now go to the Chrome Web Store and search for your extension by its title (It might take some time before it’s up there). If you’re interested, you can find mine here.

The only thing left to do is get some users. So you might want to share a post about your life changing Chrome extension on social media. Tell your friends to check it out. Add it to ProductHunt. And don’t forget to share your project here in the comments. I’m curious to see what you came up with!

Conclusion

As a web developer, it’s very easy to create a Chrome extension in a short amount of time. All you need is some HTML, CSS, JavaScript and a basic knowledge of how to add functionality through some of the JavaScript APIs that Chrome exposes. Your initial setup can be published inside the Chrome Web Store within just 20 minutes. Building an extension that’s new, worthwhile or looks nice will take some more time. But it’s all up to you!

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

Λοιπόν, τι περιμένετε; Ήρθε η ώρα να αρχίσετε να εργάζεστε στη δική σας επέκταση Chrome και να μετατρέψετε την ιδέα σας σε πραγματικότητα.

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

Έχετε ερωτήσεις ή σχόλια; Επιτρέψτε μου να μάθω στα σχόλια!

Ευχαριστώ για την ανάγνωση! Ελπίζω ότι οι πληροφορίες ήταν χρήσιμες. Ακολουθήστε με στο Medium για περισσότερα άρθρα σχετικά με την τεχνολογία ή στο Twitter και Instagram @jakeprins_nl.