Πώς να δημιουργήσετε μια επέκταση Chrome από την αρχή σε 3 βήματα

από
Tweet
Share
Share
Pin

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

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

Με τη βοήθεια μιας επέκτασης, μπορείτε:

✅ Προσαρμόστε τη διεπαφή χρήστη του προγράμματος περιήγησης και των καρτελών.

✅ Προσθέστε νέες συντομεύσεις για ενέργειες προγράμματος περιήγησης.

✅ Παρακολουθήστε στενά το πρόγραμμα περιήγησης και τον ιστό.

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

Ναι, μπορείτε να δημιουργήσετε μια επέκταση Chrome χρησιμοποιώντας απλές τεχνολογίες ιστού, όπως η JavaScript, και εδώ υπάρχει ένα σεμινάριο για το ίδιο!

Δημιουργία επέκτασης Chrome

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

Απαιτούμενα Αρχεία

Το μόνο απαραίτητο αρχείο για τη δημιουργία επέκτασης Chrome είναι το αρχείο manifest.json. Rest όλα όσα κωδικοποιείτε είναι πανομοιότυπα με τη δημιουργία μιας διαδικτυακής εφαρμογής.

  Πώς να αποκτήσετε ένα Volume Mixer για καρτέλες Chrome

Δημιουργία αρχείου Manifest.json

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

{
  "manifest_version": 3,
  "name": "History",
  "description": "View Browsing History",
  "version": "0.1",
  "action": {
    "default_popup": "index.html"
  }
}

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

Μπορείτε επίσης να δείτε μια ιδιότητα ενέργειας στο αρχείο δήλωσης. Καθορίζει ποιο αρχείο HTML θέλετε να ανοίξετε στο αναδυόμενο παράθυρο όταν ο χρήστης κάνει κλικ στο εικονίδιο της επέκτασης. Υπάρχει επίσης μια ιδιότητα default_icon που σας επιτρέπει να ορίσετε το προεπιλεγμένο εικονίδιο επέκτασης που θα εμφανίζεται.

Κατασκευή της Εφαρμογής

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

Αρχικά, πρέπει να δημιουργήσετε ένα αρχείο καταχώρισης που μπορείτε να καταχωρίσετε στην ιδιότητα default_popup του μανιφέστου. Έχω δημιουργήσει το index.html ως σημείο εισόδου για αυτήν την επέκταση.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chrome Extension</title>
    <link rel="stylesheet" href="https://wilku.top/how-to-create-a-chrome-extension-from-scratch-in-3-steps/style.css">
</head>
<body>
    <h2>Browsing History</h2>
    <ul class="list"></ul>
    <script src="./app.js"></script>
</body>
</html>

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

function searchHistory() {
    chrome.history.search({
        text: '',
        startTime: new Date("2023-10-01").getMilliseconds()
    }, (results) => {
        for (const result of results) {
            let liItem = document.createElement("li")
            let link = document.createElement("a")
            link.innerText = result.title
            link.href = result.url
            liItem.appendChild(link)
            document.querySelector(".list").appendChild(liItem)
        }
    })
}

document.addEventListener("DOMContentLoaded", () => {
    searchHistory()
})

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

  Πώς να στείλετε μηνύματα κειμένου από το Chromebook σας

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

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

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

for (const result of results) {
    let liItem = document.createElement("li")
    let link = document.createElement("a")
    link.innerText = result.title
    link.href = result.url
    liItem.appendChild(link)
    document.querySelector(".list").appendChild(liItem)
}

Τώρα, το ιστορικό API στο Chrome απαιτεί άδεια “ιστορικού”, η οποία πρέπει να οριστεί στο αρχείο δήλωσης.

{
    "manifest_version": 3,
    "name": "History",
    "description": "View Browsing History",
    "version": "0.1",
    "action": {
      "default_popup": "index.html"
    },
    "permissions": [
        "history"
    ]
}

Εκτέλεση της επέκτασης

Αυτό είναι το πιο εύκολο βήμα για να δημιουργήσετε και να εκτελέσετε μια επέκταση Chrome. Κάντε κλικ στην έλλειψη στη γραμμή ενεργειών του Chrome και μεταβείτε στη Διαχείριση επεκτάσεων κάτω από τις Επεκτάσεις. Μπορείτε επίσης να μεταβείτε απευθείας σε αυτόν τον σύνδεσμο chrome://extensions/.

  Πώς να διορθώσετε το σφάλμα Google Chrome 403

Ενεργοποιήστε τη λειτουργία προγραμματιστή εάν δεν είναι ενεργοποιημένη.

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

Για να εκτελέσετε την επέκταση, μεταβείτε στη γραμμή ενεργειών του Chrome και κάντε κλικ στην επέκτασή σας για τη λίστα.

Αυτό είναι; μόλις δημιουργήσατε μια απλή επέκταση Chrome. Εάν θέλετε περισσότερα παραδείγματα, μπορείτε να δείτε περισσότερα Δείγματα επεκτάσεων Chrome στο επίσημο αποθετήριο του Google Chrome.

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

Τελικές Λέξεις

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

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