Πώς να φτιάξετε μια απλή επέκταση Chrome

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

Υπάρχουν ορισμένα βασικά στοιχεία που απαιτεί το πρόγραμμα περιήγησης για να μπορέσει να λειτουργήσει πλήρως η επέκταση. Θα εξετάσουμε όλα αυτά παρακάτω, συμπεριλαμβανομένου του τρόπου λειτουργίας της προσαρμοσμένης επέκτασής σας στο Chrome χωρίς να χρειάζεται να τη ανεβάσετε ή να την μοιραστείτε με οποιονδήποτε άλλον.

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

Συμβουλή(Tip) : Για να δείτε πόσο εκπληκτική θα μπορούσε να είναι η δική σας επέκταση, ρίξτε μια ματιά σε αυτές τις εκπληκτικές επεκτάσεις Chrome(these amazing Chrome extensions) .

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

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

Δείτε τι πρέπει να κάνετε:

  • Δημιουργήστε έναν φάκελο που θα περιέχει όλα τα αρχεία που αποτελούν την επέκταση.
  • Δημιουργήστε τα βασικά αρχεία που απαιτεί αυτή η επέκταση: manifest.json , popup.html , background.html , styles.css .
  • Ανοίξτε το popup.html σε ένα πρόγραμμα επεξεργασίας κειμένου και, στη συνέχεια, επικολλήστε όλα τα παρακάτω εκεί, φροντίζοντας να το αποθηκεύσετε όταν τελειώσετε.
<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Favorite Sites</title>
      <link rel="stylesheet" type="text/css" href="styles.css">
   </head>
<body>
   <ul id="myUL">
      <li><a href="https://helpdeskgeek.com/" target="_blank">Help Desk Geek</a></li>
      <li><a href="https://www.online-tech-tips.com/" target="_blank">Online Tech Tips</a></li>
      <li><a href="https://thebackroomtech.com/" target="_blank">The Back Room Tech</a></li>
   </ul>
</body>
</html>

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

  • Ανοίξτε το manifest.json στο πρόγραμμα επεξεργασίας κειμένου και αντιγράψτε/επικολλήστε τα εξής:

{
“update_url”: “https://clients2.google.com/service/update2/crx”,

"manifest_version": 2,
"όνομα": "Αγαπημένοι ιστότοποι", ( “name”: “Favorite Sites”,)
"περιγραφή": "Όλοι οι αγαπημένοι μου ιστότοποι.", ( “description”: “All my favorite websites.”,)
"έκδοση": "1.0", ( “version”: “1.0”,)
"εικονίδια": { ( “icons”: {)
"16": "icon.png",
“32”: “icon.png”,
“48”: “icon.png”,
“128”: “icon.png”
},

   “background”: { 
        “page”:”background.html”
},

    "browser_action" : {
        "default_icon" : "icon.png",
        "default_title" : "Αγαπημένοι ιστότοποι", (        “default_title” : “Favorite Sites”,)
        "default_popup": "popup.html"
    }
}

Οι βρώσιμες περιοχές αυτού του κώδικα περιλαμβάνουν όνομα(name) , περιγραφή(description) και default_title .

  • Ανοίξτε το styles.css και επικολλήστε τον παρακάτω κώδικα. Αυτό είναι που διακοσμεί το αναδυόμενο μενού για να το κάνει πολύ πιο ελκυστικό στην εμφάνιση και ακόμα πιο εύκολο στη χρήση.

#myUL {
list-style-type: none;
   γέμιση: 0; (   padding: 0;)
   περιθώριο: 0; (   margin: 0;)
   πλάτος: 300 px; (   width: 300px;)
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px;
  background-color: #f6f6f6;
  padding: 12px;
  κείμενο-διακόσμηση: κανένα; (  text-decoration: none;)
  μέγεθος γραμματοσειράς: 18 px; (  font-size: 18px;)
  χρωμα μαυρο; (  color: black;)
  οθόνη: μπλοκ; (  display: block;)
  font-family: 'Noto Sans', sans-serif;
}

#myUL li a:hover:not(.header) {
   background-color: #eee;
}

Υπάρχουν πολλά που μπορείτε να αλλάξετε στο αρχείο CSS . Παίξτε με αυτές τις επιλογές αφού δημιουργήσετε την επέκταση του Chrome για να την προσαρμόσετε σύμφωνα με τις προτιμήσεις σας.

  • Δημιουργήστε(Create) ένα εικονίδιο για την επέκταση και ονομάστε το icon.png . Τοποθετήστε το στον φάκελο επέκτασης του Chrome . Όπως μπορείτε να δείτε στον παραπάνω κώδικα, μπορείτε να δημιουργήσετε ένα ξεχωριστό εικονίδιο για αυτά τα μεγέθη: 16×16 εικονοστοιχεία, 32×32 και ούτω καθεξής.

Συμβουλή: Η (Tip: )Google έχει περισσότερες πληροφορίες(Google has more information) σχετικά με τη δημιουργία επεκτάσεων Chrome . Υπάρχουν άλλα παραδείγματα και σύνθετες επιλογές που ξεπερνούν τα απλά βήματα που δείξαμε εδώ.

Πώς να προσθέσετε μια προσαρμοσμένη επέκταση(Custom Extension) στο Chrome

Τώρα που δημιουργήσατε την επέκταση του Chrome , ήρθε η ώρα να την προσθέσετε στο πρόγραμμα περιήγησης, ώστε να μπορείτε να χρησιμοποιήσετε πραγματικά όλα τα αρχεία που μόλις δημιουργήσατε. Η εγκατάσταση μιας προσαρμοσμένης επέκτασης περιλαμβάνει μια διαδικασία που είναι διαφορετική από τον τρόπο εγκατάστασης μιας κανονικής επέκτασης Chrome(how you’d install a normal Chrome extension) .

  • Από το μενού του Chrome, μεταβείτε στην επιλογή Περισσότερα εργαλεία(More tools ) > Επεκτάσεις(Extensions) . Ή, πληκτρολογήστε chrome://extensions/ στη γραμμή διευθύνσεων.
  • Επιλέξτε το κουμπί δίπλα στη λειτουργία προγραμματιστή,(Developer mode) εάν δεν είναι ήδη επιλεγμένο. Αυτό θα ενεργοποιήσει μια ειδική λειτουργία που σας επιτρέπει να εισάγετε τις δικές σας επεκτάσεις Chrome .

  • Χρησιμοποιήστε το κουμπί Load unpacked στο επάνω μέρος αυτής της σελίδας για να επιλέξετε τον φάκελο που δημιουργήσατε κατά το Βήμα 1(Step 1) παραπάνω.

  • Αποδεχτείτε(Accept) τυχόν προτροπές εάν τις δείτε. Διαφορετικά, η προσαρμοσμένη επέκταση Chrome θα εμφανιστεί μαζί με οποιαδήποτε άλλη έχετε στην επάνω δεξιά γωνία του προγράμματος περιήγησης.

Επεξεργασία της επέκτασης Chrome

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

Το αρχείο styles.css ελέγχει τον τρόπο εμφάνισης της επέκτασης, ώστε να μπορείτε να προσαρμόσετε το γενικό στυλ λίστας και να αλλάξετε το χρώμα ή τον τύπο της γραμματοσειράς. Το W3Schools(W3Schools) είναι ένας από τους καλύτερους πόρους για να μάθετε για όλα τα διαφορετικά πράγματα που μπορείτε να κάνετε με το CSS .

Για να αλλάξετε τη σειρά στην οποία αναφέρονται οι ιστότοποι ή για να προσθέσετε ή περισσότερους ιστότοπους ή να αφαιρέσετε υπάρχοντες, επεξεργαστείτε το αρχείο popup.html. Απλώς φροντίστε να διατηρήσετε τις αλλαγές σας μόνο στη διεύθυνση URL(URL) και στο όνομα. Όλοι οι άλλοι χαρακτήρες, όπως <li> και <html> , είναι απαραίτητοι και δεν πρέπει να αλλάξουν. Το HTML Tutorial στο W3Schools(HTML Tutorial on W3Schools) είναι ένα καλό μέρος για να μάθετε περισσότερα για αυτήν τη γλώσσα.



Σταυρός Ιωάννου

About the author

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


Related posts