Πώς να εφαρμόσετε μια επέκταση Chrome

Μας αρέσει όλοι να περιηγηθούμε στον Ιστό. Και όλοι μας αρέσουν τα πράγματα να αγγίζουν τα δάχτυλά μας. Γιατί να μην δημιουργήσετε κάτι που να εξυπηρετεί αυτές τις δύο απόλυτες αλήθειες;

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

Γιατί το Chrome;

Το Chrome είναι μακράν το πιο δημοφιλές πρόγραμμα περιήγησης ιστού. Ορισμένες εκτιμήσεις είναι τόσο υψηλές όσο το 59% . Επομένως, εάν θέλετε να προσεγγίσετε όσο το δυνατόν περισσότερα άτομα, η ανάπτυξη μιας επέκτασης Chrome είναι ο καλύτερος τρόπος για να το κάνετε.

⚠️ Για να μπορέσετε να δημοσιεύσετε μια επέκταση Chrome, πρέπει να διαθέτετε λογαριασμό προγραμματιστή ο οποίος συνεπάγεται εφάπαξ χρέωση 5 $.

Κάθε επέκταση Chrome πρέπει να έχει αυτά τα στοιχεία: το αρχείο δήλωσης , το popup.html και το popup.js και ένα σενάριο φόντου . Ας ρίξουμε μια ματιά σε αυτά.

Τι αποτελεί μια επέκταση Chrome;

Το μανιφέστο αρχείο

Τι είναι το αρχείο δήλωσης; Είναι ένα αρχείο κειμένου σε μορφή JSON (Σημείωση αντικειμένου JavaScript) που περιέχει ορισμένες λεπτομέρειες σχετικά με την επέκταση που θα αναπτύξετε.

Η Google χρησιμοποιεί αυτό το αρχείο για να αποκτήσει λεπτομέρειες σχετικά με την επέκτασή σας όταν θα το δημοσιεύσετε. Υπάρχουν υποχρεωτικά , προτεινόμενα και προαιρετικά πεδία.

Απαιτείται

{ "manifest_version": 2, "name": "My Chrome Extension", "version": "1.0", "default_locale": "en" }
  • manifest_version- Έκδοση της μορφής αρχείου δήλωσης. Από το Chrome 18, η έκδοση 1 έχει καταργηθεί
  • name- Μπορεί να αποτελείται από έως και 45 χαρακτήρες. Χρησιμοποιείται για την εμφάνιση του ονόματος της επέκτασής σας στα ακόλουθα μέρη: Διάλογος εγκατάστασης, διεπαφή διαχείρισης επεκτάσεων, Chrome Web Store
  • version- Έκδοση της επέκτασης Chrome. Μπορεί να αποτελείται από τέσσερα ψηφία χωρισμένα με τελείες (π.χ. 1.0.0.0)
  • default_locale- Αυτός ο φάκελος βρίσκεται μέσα στο _localsφάκελο και περιέχει τις προεπιλεγμένες γραμματοσειρές συμβολοσειρών. Ο _localsφάκελος χρησιμοποιείται για διεθνοποίηση (επιτρέποντας στην επέκτασή σας να υποστηρίζει πολλές γλώσσες). Είναι υποχρεωτικό πεδίο εάν υπάρχει _localsφάκελος, διαφορετικά δεν θα πρέπει να υπάρχει

Εάν θέλετε να υποστηρίξετε πολλές γλώσσες, διαβάστε περισσότερα εδώ.

Συνιστάται

 "description": "A plain text description", "author": "Your Name Here", "short_name": "shortName", "icons": { "128":"icon128.png", "48":"icon48.png", "16":"icon16.png" },
  • description - Μπορείτε να χρησιμοποιήσετε έως και 132 χαρακτήρες για να περιγράψετε την επέκταση
  • short_name - Περιορίζεται σε 12 χαρακτήρες, χρησιμοποιείται σε περιπτώσεις όπου δεν υπάρχει αρκετός χώρος για να εμφανιστεί το πλήρες όνομα της επέκτασης (Εφαρμογή εκκίνησης και σελίδα νέας καρτέλας)
  • icons- Τα εικονίδια που αντιπροσωπεύουν την επέκταση. Να συμπεριλαμβάνετε πάντα ένα εικονίδιο 128X128 επειδή χρησιμοποιείται από το Chrome Web Store και κατά την εγκατάσταση της επέκτασής σας

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

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

Αναδυόμενο παράθυρο και φόντο

Το αναδυόμενο παράθυρο αναφέρεται στην κύρια σελίδα που βλέπουν οι χρήστες όταν χρησιμοποιούν την επέκτασή σας. Αποτελείται από δύο αρχεία: Popup.html και ένα αρχείο JavaScript, Popup.js .

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

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

{ "manifest_version": 2, "name": "My Chrome Extension", "version": "1.0", "background":{ "scripts": ["yourScript.js"], "persistent": false } }

Το κλειδί scriptsέχει μια τιμή ενός πίνακα ονομάτων σεναρίων.

persistentείναι ένα κλειδί με δυαδική τιμή που δηλώνει τη χρήση της επέκτασής σας με το chrome.webRequest API για τον αποκλεισμό ή την τροποποίηση αιτημάτων δικτύου. Το Chrome.webRequest API δεν λειτουργεί με μη μόνιμες σελίδες φόντου.

Πώς θα ανοίξει η επέκτασή σας

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

  1. Μπορεί να παρακάμψει μια νέα καρτέλα, ώστε να μην διαταράξει τη δραστηριότητα του τρέχοντος χρήστη

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

Κάθε επιλογή έχει τις συνέπειές της και εξαρτάται από εσάς να αποφασίσετε ποια είναι η καλύτερη επιλογή για εσάς.

Παρακάτω είναι ο κωδικός που απαιτείται για να αφαιρέσετε κάθε μία από τις επιλογές. Και οι δύο θα χρησιμοποιούν το ίδιο αρχείο popup.html που περιγράφεται παρακάτω:

  Chrome Extension Example   

Hello From Extension

Βάζοντας τα όλα μαζί

Παράκαμψη νέας καρτέλας

//In manifest.json { "name": "ChromeExampleNewTab", "version": "1.0", "manifest_version": 2, "chrome_url_overrides": { "newtab": "popup.html" }, "browser_action": {}, "permissions":[ "tabs" ], "background":{ "scripts": ["background.js"], "persistent": false } } //In background.js chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.create({'url': chrome.extension.getURL('popup.html')}, function(tab) { // Tab opened. }); });

Άνοιγμα στην τρέχουσα καρτέλα

//In manifest.js { "name": "ChromeExample", "version": "1.0", "manifest_version": 2, "browser_action": { "default_popup": "popup.html" } }

Παρατηρήστε πώς έχουμε αντικαταστήσει το browser_actionκλειδί και στα δύο παραδείγματα.

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

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

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

Και ενώ είστε σε αυτό, ελέγξτε ένα που έχω κάνει εδώ.