Πώς να δημιουργήσετε μια επέκταση μεταξύ προγραμμάτων περιήγησης χρησιμοποιώντας JavaScript και API API

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

Αυτή η ανάρτηση θα επικεντρωθεί στα προγράμματα περιήγησης Chrome και Firefox, μαζί με τη διανομή επεκτάσεων μέσω των ιστότοπων Chrome Web Store και Firefox Add-ons. Άλλα προγράμματα περιήγησης και επιλογές διανομής είναι επίσης διαθέσιμα για επεκτάσεις ιστού.

Ξεκινήστε με ένα πρότυπο - αντιγραφή, επεξεργασία και δημοσίευση!

Για να δείτε ένα ολοκληρωμένο παράδειγμα, εδώ είναι ένας σύνδεσμος προς μια επέκταση που έκανα με το όνομα Link Formatter, με το JavaScript του προγράμματος περιήγησης στο popup.js. Το ίδιο πακέτο παρατίθεται και στα καταστήματα ιστού Chrome και Firefox.

Επεκτάσεις προγράμματος περιήγησης

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

  • Επεκτάσεις προγράμματος περιήγησης - Mozilla | MDN
  • Τι είναι οι επεκτάσεις; - Google Chrome
  • Ανατομία επέκτασης - Mozilla | MDN

Φορτώστε την επέκτασή σας τοπικά στον υπολογιστή σας

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

Χρώμιο

  • Επισκεφτείτε chrome://extensions/το πρόγραμμα περιήγησης Chrome
  • Κάντε κλικ Load Unpacked
  • Επιλέξτε το φάκελο της επέκτασης

Firefox

  • Επίσκεψη about:debugging
  • Κάντε κλικ στο Load Temporary Add-on
  • Επιλέξτε το manifest.jsonφάκελο της επέκτασης

Συμβουλή εντοπισμού σφαλμάτων : για να δείτε την κονσόλα, (για παράδειγμα για να δείτε σφάλματα), κάντε δεξί κλικ / έλεγχος στο εικονίδιο επέκτασης ιστού ή αναδυόμενο παράθυρο καιinspect

Σύνταξη JavaScript για την επέκταση του προγράμματος περιήγησής σας

Υπάρχουν πολλά API JavaScript που μπορούν να χρησιμοποιηθούν στην επέκταση του προγράμματος περιήγησής σας. Αυτή η ανάρτηση θα επικεντρωθεί στο API καρτελών.

Για περισσότερα σχετικά με τα API επέκτασης ιστού, δείτε API JavaScript - Mozilla | MDN.

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

extension├── css│ └── style.css├── js│ └── popup.js├── manifest.json└── popup.html

Στη popup.htmlσυνέχεια, η σελίδα θα εκτελούσε το js/popup.jsσενάριο στο κάτω μέρος της σελίδας. Θα προσθέσατε το JavaScript εδώ.

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

API καρτέλας προγράμματος περιήγησης

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

Ζητώντας δικαιώματα πρόσβασης σε καρτέλες

Πρέπει να οριστούν δικαιώματα manifest.json. Όταν ένας χρήστης προσπαθεί να εγκαταστήσει την επέκταση, θα ζητήσει από τον χρήστη να επιβεβαιώσει ότι επιτρέπεται αυτή η ενέργεια.

"permissions": [ "tabs" ]

Ερώτηση καρτελών με το API του προγράμματος περιήγησης

Τα προγράμματα περιήγησης, όπως ο Firefox, χρησιμοποιούν το browser.tabsAPI για να αλληλεπιδρούν με τις καρτέλες του προγράμματος περιήγησης. Για να ζητήσετε πληροφορίες σχετικά με τις καρτέλες του παραθύρου, χρησιμοποιείτε τη queryμέθοδο, η οποία επιστρέφει μια υπόσχεση με έναν πίνακα καρτελών.

browser.tabs.query( queryInfo // object)

Διαβάστε περισσότερα για το browser.tabs.query στο tabs.query () - Mozilla | MDN

Για να ζητήσετε την ενεργή καρτέλα για το παράθυρο του προγράμματος περιήγησης, θα γράψετε την ακόλουθη JavaScript:

browser.tabs.query({active: true, currentWindow: true}) .then(logCurrentTabData)

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

const logCurrentTabData = (tabs) => { currentTab = tabs[0] console.log(currentTab.title); console.log(currentTab.url);}

Ωστόσο, όταν προσπαθείτε να ανοίξετε την επέκταση στο Chrome…

Ερώτηση καρτελών με το API chrome

Το Chrome διαθέτει το δικό του API για ερωτήσεις καρτελών. Ακολουθεί τη σύνταξη chrome.tabs→ το ερώτημά σας

chrome.tabs.query(object queryInfo, function callback)

Διαβάστε περισσότερα για το API καρτελών του Chrome εδώ: chrome.tabs - Google Chrome.

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

chrome.tabs.query( {active: true, currentWindow: true}, (arrayOfTabs) => { logCurrentTabData(arrayOfTabs) });

Συνδυασμός ερωτημάτων καρτέλας

Εντοπίστε ποιο API θα χρησιμοποιηθεί

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

if(chrome) { chrome.tabs.query( {active: true, currentWindow: true}, (arrayOfTabs) => { logCurrentTabData(arrayOfTabs) } );} else { browser.tabs.query({active: true, currentWindow: true}) .then(logCurrentTabData)}

Προσθήκη περισσότερου κώδικα για κάθε τύπο προγράμματος περιήγησης

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

chrome.tabs.create()browser.tabs.create()

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

if(chrome) { chrome.tabs.query( {active: true, currentWindow: true}, (arrayOfTabs) => { logCurrentTabData(arrayOfTabs) } ); $('a').click( (event) => { chrome.tabs.create({url:event.target.href}) } )} else { browser.tabs.query({active: true, currentWindow: true}) .then(logCurrentTabData) $('a').click( (event) => { browser.tabs.create({url:event.target.href}) } )}

Δημοσίευση της επέκτασής σας

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

  • Δημοσίευση στο Chrome Web Store - Google Chrome
  • Κέντρο προγραμματιστών :: Πρόσθετα για τον Firefox

Διαβάστε περισσότερα από το Medium

  • Πώς να συνδεθείτε σε μια συγκεκριμένη παράγραφο στο άρθρο Medium (Μέθοδος πίνακα περιεχομένων 2018) από τον Quincy Larson στο freeCodeCamp
  • Βελτίωση της μεσαίας εμπειρίας: Μια επέκταση προγράμματος περιήγησης κάθε φορά από το cedric amaya στο freeCodeCamp

Διαβάστε περισσότερα από ryanwhocodes

  • Πώς μπορείτε να δημιουργήσετε μια προοδευτική εφαρμογή ιστού σε μια ώρα
  • Προσοχή στη γλώσσα προγραμματισμού σας: Πώς να χρησιμοποιήσετε το Github Linguist και gitattributes για να εντοπίσετε με ακρίβεια τον τύπο κώδικα της εφαρμογής σας
  • Κάντε το τερματικό σας πιο πολύχρωμο και παραγωγικό με τα iTerm2 και Zsh!