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

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

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

Σε αυτό το σεμινάριο θα ανακαλύψουμε πώς να δημιουργήσουμε μια επέκταση Chrome χρησιμοποιώντας το Parcel.js για ομαδοποίηση και παρακολούθηση και TailwindCSS για στυλ. Θα μιλήσουμε επίσης για το πώς να διαχωρίσετε το στυλ σας από τον ιστότοπο για να αποφύγετε τη σύγκρουση CSS - αλλά περισσότερα σχετικά αργότερα

Υπάρχουν μερικοί τύποι επεκτάσεων Chrome που αξίζει να αναφερθούν:

  • Σενάρια περιεχομένου : Ο πρώτος τύπος επέκτασης Chrome είναι ο πιο συνηθισμένος. Τρέχει στο πλαίσιο μιας ιστοσελίδας και μπορεί να χρησιμοποιηθεί για την τροποποίηση του περιεχομένου της. Αυτός είναι ο τύπος επέκτασης που θα δημιουργήσουμε.
  • Αναδυόμενο παράθυρο : Οι αναδυόμενες επεκτάσεις χρησιμοποιούν το εικονίδιο επέκτασης στα δεξιά της γραμμής διευθύνσεων για να ανοίξουν ένα αναδυόμενο παράθυρο που μπορεί να περιέχει οποιοδήποτε περιεχόμενο HTML που σας αρέσει.
  • Επιλογές διεπαφής χρήστη : Το μαντέψατε! Αυτή είναι μια διεπαφή χρήστη για την προσαρμογή των επιλογών ως επέκταση. Είναι προσβάσιμο κάνοντας δεξί κλικ στο εικονίδιο επέκτασης και επιλέγοντας "επιλογές" ή μεταβαίνοντας στη σελίδα της επέκτασης από τη λίστα επεκτάσεων Chromechrome://extensions
  • Επέκταση DevTools : "Η επέκταση DevTools προσθέτει λειτουργικότητα στα Chrome DevTools. Μπορεί να προσθέσει νέα πλαίσια διεπαφής χρήστη και πλευρικές γραμμές, να αλληλεπιδράσει με τη σελίδα που έχει επιθεωρηθεί, να λάβει πληροφορίες σχετικά με αιτήματα δικτύου και πολλά άλλα". - Τεκμηρίωση του Google Chrome

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

Πώς να συνδυάσετε την επέκταση Chrome χρησιμοποιώντας το Parcel.js V2

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

Δημιουργήστε πρώτα έναν νέο φάκελο που ονομάζεται demo-extension(βεβαιωθείτε ότι έχετε yarnή npmεγκαταστήσει, πρόκειται να χρησιμοποιήσω yarnγια αυτήν την ανάρτηση):

$ mkdir demo-extension && cd demo-extension && yarn init -y

Στη συνέχεια θα εγκαταστήσουμε το Parcel ως τοπική εξάρτηση:

$ yarn add -D [email protected]

Τώρα δημιουργήστε έναν νέο κατάλογο που ονομάζεται src:

$ mkdir src

Προσθήκη αρχείου δήλωσης

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

Μπορείτε να βρείτε το πλήρες σχήμα στην τεκμηρίωση του Chrome: //developer.chrome.com/extensions/manifest

Ας προχωρήσουμε και προσθέστε ένα νέο αρχείο που srcονομάζεται manifest.jsonμε αυτό το περιεχόμενο:

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

Πώς να χρησιμοποιήσετε το TailwindCSS με την επέκταση Chrome

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

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

$ yarn add tailwindcss

Επίσης, προχωρήστε και προσθέστε autoprefixerκαι postcss-import:

$ yarn add -D autoprefixer postcss-import

Τα χρειάζεστε για να προσθέσετε προθέματα προμηθευτών στα στυλ σας και να είστε σε θέση να γράφετε σύνταξη, όπως @import "tailwindcss/base"να εισάγετε αρχεία Tailwind απευθείας από node_modules, αντίστοιχα.

Τώρα που το έχουμε εγκαταστήσει, ας δημιουργήσουμε ένα νέο αρχείο στον ριζικό μας κατάλογο και να το καλέσουμε postcss.config.js. Αυτό είναι το αρχείο διαμόρφωσης για το PostCSS και θα περιέχει, προς το παρόν, αυτές τις γραμμές:

Η παραγγελία προσθηκών έχει σημασία εδώ!

Αυτό είναι! Αυτό είναι το μόνο που χρειάζεστε για να ξεκινήσετε να χρησιμοποιείτε το TailwindCSS στην επέκταση του Chrome.

Δημιουργήστε ένα αρχείο που ονομάζεται style.cssμέσα στο srcφάκελό σας και συμπεριλάβετε αρχεία Tailwind:

Αφαιρέστε το CSS που δεν χρησιμοποιείται χρησιμοποιώντας το PurgeCSS

Ας βεβαιωθούμε επίσης ότι εισάγουμε μόνο τα στυλ που χρησιμοποιούμε ενεργοποιώντας την ικανότητα εκκαθάρισης του Tailwind.

Δημιουργήστε ένα νέο αρχείο διαμόρφωσης Tailwind εκτελώντας:

$ npx tailwindcss init: αυτό θα δημιουργήσει ένα νέο tailwind.config.jsαρχείο.

Για να αφαιρέσουμε το CSS που δεν χρησιμοποιείται, θα προσθέσουμε τα αρχεία προέλευσης στο πεδίο εκκαθάρισης ως εξής:

Τώρα το CSS μας θα εκκαθαριστεί και τα αχρησιμοποίητα στυλ θα αφαιρεθούν όταν δημιουργείτε για παραγωγή.

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

Ένα ακόμη πράγμα πριν προσθέσετε κάποιο περιεχόμενο στην επέκτασή μας: ας επιτρέψουμε την επανάληψη φόρτωσης.

Το Chrome δεν φορτώνει ξανά τα αρχεία προέλευσης όταν κάνετε νέες αλλαγές - πρέπει να πατήσετε το κουμπί "Επαναφόρτωση" στη σελίδα επεκτάσεων. Ευτυχώς, υπάρχει ένα πακέτο NPM που κάνει εκ νέου φόρτωση για εμάς.

$ yarn add crx-hotreload

Για να το χρησιμοποιήσουμε, θα δημιουργήσουμε ένα νέο αρχείο με το όνομα background.jsτου srcφακέλου μας και θα το εισαγάγουμεcrx-hotreload

Τέλος, δείξτε background.jsτο manifest.jsonγια να μπορεί να σερβιριστεί με την επέκτασή μας (η επαναφόρτωση είναι απενεργοποιημένη στην παραγωγή από προεπιλογή)

Αρκετά με διαμόρφωση. Ας δημιουργήσουμε μια μικρή φόρμα σεναρίου στην επέκτασή μας.

Τύποι σεναρίων σε μια επέκταση Chrome

Όπως αναφέρθηκε στην αρχή αυτής της ανάρτησης, στις επεκτάσεις Chrome υπάρχουν μερικοί τύποι σεναρίων που μπορείτε να χρησιμοποιήσετε.

Τα σενάρια περιεχομένου είναι σενάρια που εκτελούνται στο πλαίσιο της ιστοσελίδας που επισκέπτεστε. Μπορείτε να εκτελέσετε οποιονδήποτε κώδικα JavaScript που είναι άλλως διαθέσιμος σε οποιαδήποτε κανονική ιστοσελίδα (συμπεριλαμβανομένης της πρόσβασης / χειρισμού του DOM).

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

Προσθήκη σεναρίου περιεχομένου

Δημιουργήστε ένα νέο αρχείο που ονομάζεται content-script.jsκάτω από το srcφάκελο.

Ας προσθέσουμε αυτήν τη φόρμα HTML στο πρόσφατα δημιουργημένο αρχείο μας:

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

Για να τα διαχωρίσουμε, θα χρησιμοποιήσουμε κάτι που ονομάζεται Shadow DOM . Το Shadow DOM είναι μια ισχυρή τεχνική ενθυλάκωσης για στυλ. Αυτό σημαίνει ότι το στυλ καλύπτεται από το δέντρο Shadow. Επομένως, τίποτα δεν έχει διαρρεύσει στην ιστοσελίδα που επισκέπτεστε. Επίσης, τα εξωτερικά στυλ δεν παρακάμπτουν το περιεχόμενο του Shadow DOM, αν και οι μεταβλητές CSS εξακολουθούν να είναι προσβάσιμες.

Ένας κεντρικός υπολογιστής σκιών είναι οποιοδήποτε στοιχείο DOM στο οποίο θα θέλαμε να επισυνάψουμε το δέντρο σκιάς μας. Ένα Shadow Root είναι αυτό που επιστρέφεται attachShadowκαι το περιεχόμενό του είναι αυτό που αποδίδεται.

Προσοχή , ο μόνος τρόπος για να διαμορφώσετε το περιεχόμενο ενός δέντρου Shadow είναι να ενσωματώσετε στυλ. Το Parcel V2 διαθέτει μια νέα ενσωματωμένη δυνατότητα όπου μπορείτε να εισαγάγετε το περιεχόμενο μιας δέσμης και να το χρησιμοποιήσετε ως μεταγλωττισμένο κείμενο μέσα στα αρχεία σας JavaScript. Στη συνέχεια, το Parcel θα το αντικαταστήσει τη στιγμή της συσκευασίας.

Το κάναμε ακριβώς με το style.cssπακέτο μας . Τώρα μπορούμε να ενσωματώσουμε το CSS αυτόματα στο Shadow DOM κατά το χρόνο κατασκευής.

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

Για να εξυπηρετήσουμε την επέκτασή μας, θα προσθέσουμε μερικά σενάρια στο package.json:

Τέλος, μπορείτε να εκτελέσετε yarn watch, να μεταβείτε chrome://extensionsκαι να βεβαιωθείτε ότι η Λειτουργία προγραμματιστή είναι ενεργοποιημένη στην επάνω δεξιά γωνία της σελίδας. Κάντε κλικ στο "Load Unpacked" και επιλέξτε το distφάκελο κάτω demo-extension.

  • Εάν λάβετε αυτό το σφάλμα: Error: Bundles must have unique filePathsμπορείτε απλώς να το διορθώσετε αφαιρώντας το mainπεδίο στοpackage.json

Πώς να δημοσιεύσετε την επέκτασή σας στο Google Chrome Web Store

Πριν προχωρήσουμε περαιτέρω σε αυτό, ας προσθέσουμε ένα νέο σενάριο NPM που θα μας βοηθήσει να συμπιέσουμε τα αρχεία επέκτασης όπως απαιτείται από το Chrome.

Εάν δεν έχετε εγκαταστήσει zipακόμα, κάντε το:

  • MacOS: brew install zip
  • Linux: sudo apt install zip
  • Για Windows, μπορείτε να χρησιμοποιήσετε την εντολή PowerShell με Compress-Archiveπαρόμοιο τρόπο:powershell Compress-Archive -Path .\\dist\\ -Destination .\\chrome-extension.zip

Τώρα το μόνο που έχετε να κάνετε είναι να κατευθυνθείτε στον Πίνακα ελέγχου προγραμματιστή του Chrome Web Store για να ρυθμίσετε τον λογαριασμό σας και να δημοσιεύσετε την επέκτασή σας;

  • Μπορείτε να βρείτε την πλήρη επίδειξη για αυτό το σεμινάριο που φιλοξενείται στον λογαριασμό μου στο GitHub εδώ

συμπέρασμα

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

Ας ελπίσουμε ότι αυτό το σεμινάριο σας βοήθησε να επιταχύνετε λίγο την επέκτασή σας!

Αν το βρήκατε χρήσιμο, παρακαλώ Tweet για αυτό και ακολουθήστε με στο @marouanerassili

Ευχαριστώ!