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

Βρεθήκατε ποτέ δυσαρεστημένοι με τις δυνατότητες που συνοδεύουν το πρόγραμμα περιήγησής σας; Ακόμη και με τις ώρες περιήγησης στο Google Web Store κάτω από τη ζώνη σας, δεν είναι πάντα απλό να πατήσετε «λήψη» για να βελτιώσετε την εμπειρία σας στο web.

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

Τι είναι μια επέκταση Google Chrome;

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

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

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

Τι θα κάνει η επέκταση του Google Chrome;

Πρόκειται να δημιουργήσουμε μια απλή επέκταση Chrome που θα σας επιτρέψει να επισκεφτείτε τον ιστότοπο Make Use Of και να κάνετε μια τυχαία αναζήτηση με βάση τις κατηγορίες άρθρων που βρίσκονται στον ιστότοπο. Αυτό είναι ένα γρήγορο και εύκολο έργο, αλλά θα μάθετε πολλά ακόμα.

Θα μάθετε πώς να

• Δημιουργήστε μια επέκταση Google Chrome
• Εισαγάγετε προσαρμοσμένο κώδικα σε ιστοσελίδες χρησιμοποιώντας μια επέκταση Chrome
• Δημιουργήστε προγράμματα ακρόασης συμβάντων και προσομοίωση κλικ
• Δημιουργήστε τυχαίους αριθμούς
• Εργαστείτε με πίνακες και μεταβλητές

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

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

Βήμα 1: Δημιουργία των Αρχείων

Μπορείτε να αποθηκεύσετε την επέκτασή σας στο δικό σας τοπικό μηχάνημα όταν δεν σκοπεύετε να τη διανείμετε. Χρειάζεται μόνο να δημιουργήσουμε τέσσερα διαφορετικά αρχεία για να δημιουργήσουμε την επέκτασή μας. ένα αρχείο HTML, ένα αρχείο CSS, ένα αρχείο JavaScript και ένα αρχείο JSON.

Ονομάσαμε τα αρχεία μας index.html, style.css, script.js και manifest.json. Το αρχείο μανιφέστου πρέπει να έχει αυτό το όνομα για να λειτουργεί σωστά, αλλά μπορείτε να δώσετε στα άλλα όποια ονόματα θέλετε, αρκεί να αλλάξετε τον κώδικά σας ανάλογα.

Θα πρέπει να τοποθετήσετε αυτά τα αρχεία στον ίδιο ριζικό φάκελο.

Βήμα 2: Δημιουργία του αρχείου Manifest

Το αρχείο δήλωσης συνοδεύεται από κάθε επέκταση Google Chrome. Παρέχει πληροφορίες σχετικά με την επέκταση στο Chrome, ενώ παράλληλα θέτει ορισμένες βασικές ρυθμίσεις. Αυτό το αρχείο πρέπει να περιέχει ένα όνομα, αριθμό έκδοσης, περιγραφή και μια έκδοση δήλωσης. Έχουμε συμπεριλάβει επίσης δικαιώματα και μια ενέργεια που φορτώνει index.html ως το αναδυόμενο παράθυρο που εμφανίζεται για την επέκταση.

{
"όνομα": "Αυτοματοποιημένη αναζήτηση MakeUseOf.com",
"εκδοχή": "1.0.0",
"περιγραφή": "Ένα εργαλείο αναζήτησης για να βρείτε ενδιαφέροντα άρθρα",
"manifest_version": 3,
"συγγραφέας": "Σάμουελ Γκάρμπετ",
"άδειες": ["αποθήκευση", "δηλωτικό περιεχόμενο", "ενεργή καρτέλα", "σενάριο"],
"host_permissions": [""],
"δράση":{
"default_popup": "index.html",
"default_title": "Αυτόματη αναζήτηση MUO"
 }
}

Βήμα 3: Δημιουργία HTML & CSS

Για να μπορέσουμε να αρχίσουμε να γράφουμε το σενάριό μας, πρέπει να δημιουργήσουμε μια βασική διεπαφή χρήστη χρησιμοποιώντας HTML και CSS. Μπορείτε να χρησιμοποιήσετε α Βιβλιοθήκη CSS όπως το Bootstrap για να αποφύγετε τη δημιουργία του δικού σας, αλλά χρειαζόμαστε μόνο μερικούς κανόνες για την επέκτασή μας.

Το αρχείο index.html διαθέτει ετικέτες html, head και body. Η ετικέτα κεφαλιού περιέχει έναν τίτλο σελίδας και έναν σύνδεσμο προς το φύλλο στυλ μας, ενώ στο σώμα υπάρχει μια ετικέτα h1, μια κουμπί που σας μεταφέρει στο MakeUseOf.com και ένα άλλο κουμπί που θα χρησιμοποιήσουμε ως έναυσμα για ένα γραφή. Μια ετικέτα σεναρίου ακριβώς στο τέλος του εγγράφου περιλαμβάνει το script.js αρχείο.

<html>
<κεφάλι>
<τίτλος>Αυτόματη αναζήτηση MUO</title>
<meta charset="utf-8">
<σύνδεσμος rel="φύλλο στυλ" href="στυλ.css">
</head>
<σώμα>
<h1>Αυτόματη αναζήτηση MUO</h1>
<a href="https://www.makeuseof.com/" στόχος="_κενό"><κουμπί id="κουμπί Ένα">Μεταβείτε στο MakeUseOf.com</button></ένα>
<κουμπί id="κουμπίΔύο">Ξεκινήστε την Τυχαία Αναζήτηση</button>
</body>
<σενάριο src="script.js"></script>
</html>

Το αρχείο μας CSS είναι ακόμα πιο απλό από το HTML μας, αλλάζοντας το στυλ μόλις πέντε στοιχείων. Έχουμε κανόνες για τις ετικέτες html και body, καθώς και για τις ετικέτες h1 και τα δύο κουμπιά μας.

html {
 πλάτος: 400 px;
}
σώμα {
 γραμματοσειρά-οικογένεια: Helvetica, sans-serif;
}
h1 {
 text-align: κέντρο;
}
#buttonOne {
 περίγραμμα-ακτίνα: 0px;
 πλάτος: 100%;
 padding: 10px 0px;
}
#buttonTwo {
 περίγραμμα-ακτίνα: 0px;
 πλάτος: 100%;
 padding: 10px 0px;
 margin-top: 10px;
}

Βήμα 4: Δημιουργία JavaScript

Ως τελευταίο βήμα σε αυτήν τη διαδικασία, ήρθε η ώρα να δημιουργήσουμε το αρχείο script.js μας.

Η πρώτη συνάρτηση σε αυτό το αρχείο, καλείται insertScript(), είναι σε θέση να εισαγάγει την άλλη συνάρτηση (αυτόματη αναζήτηση()) στην τρέχουσα σελίδα. Αυτό μας επιτρέπει να χειριστούμε τη σελίδα και να χρησιμοποιήσουμε τις δυνατότητες αναζήτησης που υπάρχουν ήδη στον ιστότοπο MakeUseOf.com.

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

ο αυτόματη αναζήτηση() η λειτουργία είναι λίγο πιο περίπλοκη. Ξεκινά με έναν πίνακα που περιέχει 20 από τις κατηγορίες στον ιστότοπο του MUO, δίνοντάς μας ένα καλό δείγμα από το οποίο μπορούμε να αντλήσουμε κατά την πραγματοποίηση τυχαίων αναζητήσεών μας. Μετά από αυτό, χρησιμοποιούμε το Math.random() συνάρτηση για τη δημιουργία ενός τυχαίου αριθμού μεταξύ 0 και 19 για να επιλέξουμε μια καταχώρηση από τον πίνακα μας.

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

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

// Αυτή η συνάρτηση εισάγει τη λειτουργία αυτόματης αναζήτησης στον κώδικα της σελίδας
λειτουργίαinsertScript() {
// Επιλέγει την εστιασμένη καρτέλα για τη λειτουργία και μεταβιβάζει τη συνάρτηση αυτόματης αναζήτησης
 chrome.tabs.query({ενεργός: αληθής, τρέχον παράθυρο: αληθής}, καρτέλες => {
χρώμιο.σενάριο.executeScript({στόχος: {tabId: καρτέλες[0].ταυτότητα}, λειτουργία: αυτόματη αναζήτηση})
 })
// Αυτό κλείνει το αναδυόμενο παράθυρο επέκτασης για να επιλέξετε τη γραμμή αναζήτησης ιστότοπου
παράθυρο.Κλείσε();
}
// Αυτό είναι ένα πρόγραμμα ακρόασης συμβάντων που εντοπίζει κλικ στο "Αρχή Τυχαίος Αναζήτησηκουμπί "
document.getElementById('κουμπίΔύο').addEventListener('Κάντε κλικ', insertScript)
// Αυτή η συνάρτηση επιλέγει ένα τυχαίο θέμα από έναν πίνακα και 
λειτουργίααυτόματη αναζήτηση() {
// Αυτός είναι ένας πίνακας για την αποθήκευση των όρων αναζήτησής μας
 const searchΌροι = ["Η/Υ και Κινητό", "ΤΡΟΠΟΣ ΖΩΗΣ", "Σκεύη, εξαρτήματα", "Windows", "Μακ",
"Linux", "Android", "μήλο", "Διαδίκτυο", "Ασφάλεια",
"Προγραμματισμός", "Ψυχαγωγία", "Παραγωγικότητα", "Καριέρα", "Δημιουργικός",
"Παιχνίδι", "Μεσα ΚΟΙΝΩΝΙΚΗΣ ΔΙΚΤΥΩΣΗΣ", "Εξυπνο σπίτι", "DIY", "Ανασκόπηση"];
// Αυτό δημιουργεί έναν τυχαίο αριθμό μεταξύ 0 και 19
αφήνω επιλογέαςΑριθμός = Μαθηματικά.πάτωμα(Μαθηματικά.random() * 20);
// Χρησιμοποιεί τον τυχαίο αριθμό για να επιλέξει μια καταχώρηση από τον πίνακα
αφήνω επιλογή = αναζήτησηΌροι[αριθμός επιλογέα];
// Αυτό προσομοιώνει ένα κλικ στο εικονίδιο αναζήτησης ιστότοπου MUO
 document.getElementById("js-search").Κάντε κλικ();
// Αυτό ορίζει τη γραμμή αναζήτησης ιστότοπου MUO ως μεταβλητή
var SearchBar = έγγραφο.getElementById("js-search-input");
// Αυτό εισάγει τον τυχαίο όρο αναζήτησής μας στη γραμμή αναζήτησης
 searchBar.value = searchBar.value + επιλογή;
// Αυτό ολοκληρώνει τη διαδικασία ενεργοποιώντας τη φόρμα ιστότοπου
 document.getElementById("φόρμα αναζήτησης2").υποβάλλουν();
}

Βήμα 5: Προσθήκη των αρχείων σας στο Chrome://extensions

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

Ανοίξτε το Google Chrome, μεταβείτε στο chrome://extensions και βεβαιωθείτε ότι το ρυθμιστικό Developer Mode στην επάνω δεξιά γωνία βρίσκεται στη θέση on.

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

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

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

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

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

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

6 σκιώδεις επεκτάσεις του Google Chrome που πρέπει να απεγκαταστήσετε το συντομότερο δυνατό

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα