Chrome Web Extension - Δεν απαιτείται προηγούμενη εμπειρία κωδικοποίησης: 6 βήματα

2024 Συγγραφέας: John Day | [email protected]. Τελευταία τροποποίηση: 2024-01-30 08:32

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

Για να δημιουργήσετε μια επέκταση ιστού Chrome, απαιτείται κωδικοποίηση, επομένως είναι πολύ χρήσιμο να αναθεωρήσετε HTML, JavaScript και CSS στον παρακάτω ιστότοπο:

www.w3schools.com/default.asp (τα σχολεία w3 είναι ένας καλός ιστότοπος για πόρους κωδικοποίησης)

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

Το καλύτερο πράγμα για τις επεκτάσεις Chrome είναι ότι μπορούν να προσαρμοστούν. Δεν είναι μόνο ένα συγκεκριμένο πράγμα που μπορεί να γίνει, οπότε να είστε δημιουργικοί.

Προμήθειες

Τα εφόδια που χρειάζονται είναι τα παρακάτω:

• Υπολογιστής με πρόγραμμα επεξεργασίας κειμένου (χρησιμοποιώ το Σημειωματάριο)
• Google Chrome

Και αυτό είναι όλο!

Βήμα 1: Δημιουργήστε τον Κατάλογο

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

Βήμα 2: Δημιουργήστε το αρχείο Manifest και κωδικοποιήστε το

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

Στη συνέχεια πληκτρολογήστε το παρακάτω σενάριο:

{

"name": "First Extension", "version": "1.0", "description": "Μπορώ να κωδικοποιήσω μια επέκταση", "manifest_version": 2, "browser_action": {"default_title": "First Extension"}}

Θυμηθείτε τα κόμματα μετά τις τιμές!

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

drum roll παρακαλώ…

Ναι! Αυτή είναι μια επέκταση, εκτός από … το είδος της είναι βαρετό. Δεν κάνει κυριολεκτικά τίποτα αυτή τη στιγμή, αλλά σύντομα θα είναι εξαιρετικά δροσερό.

Βήμα 3: Δημιουργήστε τα εικονίδια και ενημερώστε το μανιφέστο

Ένας ιστότοπος που λειτουργεί καλά για τη σχεδίαση εικονιδίων είναι ο https://www.piskelapp.com/. Υπάρχουν και άλλα προγράμματα σχεδίασης διαθέσιμα για χρήση, επίσης. Τα εικονίδια πρέπει να είναι τετράγωνα. Αυτό το έργο θα χρησιμοποιεί εικονίδια 16x16, 32x32, 48x48 και 128x128. Μόλις δημιουργηθεί το εικονίδιο, δημιουργήστε ένα φάκελο που ονομάζεται "εικόνες" στο φάκελο επέκτασης και τοποθετήστε το εικονίδιο σε αυτόν το φάκελο. Mightσως είναι καλή ιδέα να ονομάσετε μια εικόνα ανάλογα με το μέγεθός της. Για παράδειγμα, 'icon32.png'. Ο νέος κωδικός είναι ο παρακάτω:

{

"name": "First Extension", "version": "1.0", "description": "Μπορώ να κωδικοποιήσω μια επέκταση", "manifest_version": 2, "browser_action": {"default_title": "First Extension", " default_icon ": {" 16 ":" images/icon16-p.webp

Για αναφορά στον κωδικό του μανιφέστου, μεταβείτε στη διεύθυνση

Βήμα 4: Προσθέστε ένα αναδυόμενο παράθυρο

Αυτή η επέκταση θα έχει ένα αναδυόμενο παράθυρο. Το αναδυόμενο παράθυρο είναι ένα αρχείο HTML (Hypertext Markup Language), οπότε καλό είναι να μάθετε πρώτα τα βασικά του HTML, CSS και JavaScript.

Αρχικά, αποθηκεύστε ένα έγγραφο ως αρχείο 'popup.html' στο φάκελο επέκτασης.

Στη συνέχεια, επεξεργαστείτε το μανιφέστο για να εμφανιστεί το «popup.html» όταν κάνετε κλικ. Ο νέος κωδικός είναι ο παρακάτω:

{

"name": "First Extension", "version": "1.0", "description": "Μπορώ να κωδικοποιήσω μια επέκταση", "manifest_version": 2, "browser_action": {"default_title": "First Extension", " default_icon ": {" 16 ":" images/icon16-p.webp

Μην ξεχνάτε το κόμμα!

Τώρα, εάν ο ακόλουθος κώδικας HTML προστεθεί στο αναδυόμενο παράθυρο. Html, τότε θα εμφανιστεί "Hello World" όταν κάνετε κλικ.

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

Βήμα 5: Κάντε το να φαίνεται καλό και κάντε το διαδραστικό

Εάν πληκτρολογηθεί μια βασική γραμμή HTML, τότε γίνεται το ελάχιστο. Εάν προστεθεί το CSS (Cascading Style Sheets), τότε θα φαίνεται πιο δροσερό και αν προστεθεί JavaScript, τότε μπορεί να είναι πιο διαδραστικό. Αυτό το σεμινάριο δεν θα επεκταθεί λεπτομερώς στην εξήγηση HTML, JavaScript και CSS, αλλά υπάρχουν πολλοί πόροι στο διαδίκτυο. Παρακάτω είναι ο κώδικας για το απλό πρόγραμμα 'Hello World', και στη συνέχεια το πιο πολύχρωμο πρόγραμμα, αντίστοιχα:

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

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

#hello {background-color: #000000; χρώμα: #ff0000; περίγραμμα: έξοδος 8px #86a3b2; περιθώριο ακτίνας: 50px; μετασχηματισμός: περιστροφή (57 βαθμοί) επένδυση: 10px; user-select: κανένα? δρομέας: crosshair? μετάβαση: μετασχηματισμός 2s? } #hello: hover {transform: rotate (-417deg); }

Αυτό το δεύτερο παράδειγμα θα μπορούσε να είναι πολύ μπερδεμένο, για έναν αρχάριο. Αλλά, αυτό ήταν για να σας δείξει πόσο σημαντικό είναι το CSS για ένα πρόγραμμα/επέκταση. Τώρα θα ήταν μια καλή στιγμή να κάνετε ένα διάλειμμα και να μάθετε κάποια κωδικοποίηση HTML5 και να χρησιμοποιήσετε το developer.chrome.com για κάποια αναφορά. Μπορεί να χρειαστεί λίγος χρόνος, αλλά μπορεί να γίνει μεγάλη παράταση.

Βήμα 6: Δημοσίευση στο Chrome Web Store

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

Το πρώτο πράγμα που πρέπει να κάνετε για να κάνετε δημόσια μια επέκταση είναι να κάνετε τον φάκελο επέκτασης σε ένα αρχείο zip. Το δεύτερο πράγμα που πρέπει να κάνετε είναι να μεταβείτε στη διεύθυνση https://chrome.google.com/webstore/category/extensions και να συνδεθείτε σε έναν λογαριασμό Google. Στη συνέχεια, κάντε κλικ στο κουμπί με το γρανάζι ρυθμίσεων και, στη συνέχεια, κάντε κλικ στο «ταμπλό προγραμματιστή». Πατήστε το κουμπί "Νέο στοιχείο" για να ανεβάσετε το αρχείο zip. Μόλις βρεθείτε εκεί, είναι απαραίτητο να επεξεργαστείτε την Καταχώριση καταστήματος, το απόρρητο και την τιμολόγηση. Μια επέκταση μπορεί να δημοσιευτεί εύκολα εάν υποβληθεί για έλεγχο.

Τώρα που ολοκληρώθηκε η επέκταση, συνεχίστε να κωδικοποιείτε!