Αν είστε χρήστης του Chrome, είναι πιθανό να χρησιμοποιείτε μία ή περισσότερες επεκτάσεις. Είτε πρόκειται για αποκλεισμό διαφημίσεων είτε για προσθήκη λειτουργιών, οι επεκτάσεις προσθέτουν μεγάλη χρησιμότητα στο πρόγραμμα περιήγησης. Έτσι, δεν θα ήταν δροσερό εάν θα μπορούσατε να δημιουργήσετε τη δική σας επέκταση του Chrome; Αυτό ακριβώς θα σας δείξω εδώ.
Δείτε επίσης το άρθρο μας Τα καλύτερα Chromebooks Touchscreen
Καθώς διατηρώ ιστοσελίδες για πελάτες, μου αρέσει να ξέρω πώς κάθε ιστότοπος εκτελεί σε σχέση με τη φόρτωση της σελίδας. Καθώς η Google χρησιμοποιεί τώρα τους χρόνους φόρτωσης στους υπολογισμούς SEO, γνωρίζοντας πόσο γρήγορα ή αργά φορτώνει μια σελίδα είναι μια σημαντική μέτρηση κατά τη βελτιστοποίηση ενός ιστότοπου. Αυτό ισχύει ακόμη περισσότερο όταν βελτιστοποιείτε έναν ιστότοπο για κινητά. Πρέπει να είναι ελαφρύ, γρήγορο και φορτωμένο χωρίς λάθη που να βαθμολογούνται σε μεγάλο βαθμό στο Google.
Προσθέστε το γεγονός ότι ένα επιχειρηματικό πρόσωπο στο SitePoint χρησιμοποιεί επίσης τον ίδιο ιστότοπο που κάνω για να ελέγξω τις ταχύτητες σελίδας, το GTmetrix και έχει αναπτύξει μια επέκταση του Chrome για να το ελέγξει, νόμιζα ότι θα το έκανα το ίδιο και θα σας περάσω μέσα από αυτό.
Επεκτάσεις Chrome
Οι επεκτάσεις Chrome είναι μίνι προγράμματα που προσθέτουν λειτουργίες στο βασικό πρόγραμμα περιήγησης. Μπορούν να είναι τόσο απλή όσο αυτή που θα δημιουργήσουμε ή θα είναι τόσο περίπλοκη όσο οι ασφαλείς διαχειριστές κωδικών πρόσβασης ή οι εξομοιωτές δέσμης ενεργειών. Γράφονται σε συμβατές γλώσσες, όπως HTML, CSS και JavaScript, είναι αυτοτελείς αρχεία που κάθονται μαζί με το πρόγραμμα περιήγησης.
Από αναγκαιότητα, οι περισσότερες επεκτάσεις είναι απλές εκτελέσεις κλικ εικονιδίων που εκτελούν μια δεδομένη ενέργεια. Αυτή η ενέργεια μπορεί κυριολεκτικά να είναι οτιδήποτε θέλετε να κάνει το Chrome.
Δημιουργήστε τη δική σας επέκταση Chrome
Με λίγη έρευνα, μπορείτε να τροποποιήσετε την επέκτασή σας για να κάνετε ό, τι θέλετε, αλλά μου αρέσει η ιδέα ενός ελέγχου ταχύτητας ενός κουμπιού, οπότε θα πάω με αυτό.
Συνήθως, όταν ελέγχετε την ταχύτητα του ιστότοπου, θα επικολλήσετε τη διεύθυνση URL της σελίδας στην οποία είστε στο GTmetrix, Pingdom ή οπουδήποτε και πατήστε Αναλύστε. Χρειάζονται μόνο μερικά δευτερόλεπτα, αλλά δεν θα ήταν ωραίο αν μπορούσατε να επιλέξετε ένα εικονίδιο στο πρόγραμμα περιήγησής σας και να το κάνετε για εσάς; Μετά από να εργαστείτε σε αυτό το σεμινάριο, θα είστε σε θέση να κάνετε ακριβώς αυτό.
Θα χρειαστεί να δημιουργήσετε ένα φάκελο στον υπολογιστή σας για να κρατήσετε τα πάντα μέσα. Δημιουργήστε τρία κενά αρχεία, manifest.json, popup.html και popup.js. Κάντε δεξί κλικ στο νέο φάκελο και επιλέξτε Νέο αρχείο κειμένου. Ανοίξτε καθένα από τα τρία σας αρχεία στον επεξεργαστή κειμένου που έχετε επιλέξει. Βεβαιωθείτε ότι το popup.html αποθηκεύεται ως αρχείο HTML και ότι το popup.js αποθηκεύεται ως αρχείο JavaScript. Κάντε λήψη αυτού του δείγματος από το Google μόνο για τους σκοπούς αυτού του εκπαιδευτικού προγράμματος.
Επιλέξτε manifest.json και επικολλήστε τα εξής:
{"manifest_version": 2, "όνομα": "GTmetrix Αναλυτής ταχύτητας σελίδας", "περιγραφή": " : "icon.png", "default_popup": "popup.html"}, "δικαιώματα":}
Όπως μπορείτε να δείτε, του δώσαμε έναν τίτλο και μια βασική περιγραφή. Έχουμε ονομάσει επίσης μια ενέργεια προγράμματος περιήγησης που περιλαμβάνει το εικονίδιο που λάβαμε από την Google και θα εμφανιστεί στη γραμμή του προγράμματος περιήγησης και το popup.html. Το Popup.html είναι αυτό που ονομάζεται όταν επιλέγετε το εικονίδιο επέκτασης στο πρόγραμμα περιήγησης.
Ανοίξτε το popup.html και επικολλήστε τα παρακάτω σε αυτό.
Αναλυτής σελίδων με χρήση του GTMetrix
Το Popup.html είναι αυτό που ονομάζεται όταν επιλέγετε το εικονίδιο επέκτασης στο πρόγραμμα περιήγησης. Το δώσαμε ένα όνομα, το ετικέτα του popup και ένα κουμπί. Επιλέγοντας το κουμπί θα καλέσουμε το popup.js που είναι το αρχείο που θα συμπληρώσουμε στη συνέχεια.
Ανοίξτε το popup.js και επικολλήστε τα εξής:
document.addEventListener ('κλικ', λειτουργία () {chrome.tabs.getSelected (null, λειτουργία (καρτέλα) {d = έγγραφο · var f = d.createElement ('φόρμα') · f.action = 'http://gtmetrix.com/analyze.html?bm' · f.method = 'post' · var i = d.createElement ( 'i.name =' url '; i.value = tab.url; f.appendChild (i); d.body.appendChild (f); f.submit () ·}), }, λανθασμένη), }, ψευδή).
Δεν θα προσποιηθώ JavaScript και γι 'αυτό ήταν πολύ βολικό ότι το SitePoint είχε ήδη το αρχείο. Το μόνο που γνωρίζω είναι ότι λέει στην GTmetrix να αναλύσει τη σελίδα στην τρέχουσα καρτέλα Chrome. Όπου λέει 'chrome.tabs.getSelected', η επέκταση λαμβάνει τη διεύθυνση URL από την ενεργή καρτέλα και την εισάγει στη φόρμα ιστού. Αυτό είναι όσο μπορώ να πάω.
Δοκιμάστε την επέκταση του Chrome
Τώρα έχουμε το βασικό πλαίσιο στη θέση του, πρέπει να δοκιμάσουμε για να δούμε πώς λειτουργεί.
- Ανοίξτε το Chrome, επιλέξτε Περισσότερα εργαλεία και επεκτάσεις.
- Επιλέξτε το πλαίσιο δίπλα στη λειτουργία Προγραμματιστής για να το ενεργοποιήσετε.
- Επιλέξτε Φόρτωση αποσυσκευασμένης επέκτασης και μεταβείτε στο αρχείο που δημιουργήσατε για αυτήν την επέκταση.
- Επιλέξτε OK για να φορτώσετε την επέκταση και θα εμφανίζεται στη λίστα Επεκτάσεις.
- Επιλέξτε το πλαίσιο δίπλα στο στοιχείο Ενεργοποιημένο στη λίστα και το εικονίδιο θα εμφανίζεται στο πρόγραμμα περιήγησης.
- Επιλέξτε το εικονίδιο στο πρόγραμμα περιήγησης για να εμφανιστεί το αναδυόμενο παράθυρο.
- Επιλέξτε το κουμπί, Ελέγξτε αυτήν τη σελίδα τώρα!
Θα πρέπει να δείτε τη σελίδα που ελέγχεται και μια αναφορά απόδοσης από την GTmetrix. Όπως μπορείτε να δείτε από τη δική μου ιστοσελίδα στην κύρια εικόνα, έχω μια μικρή δουλειά να κάνω για να επιταχύνει το νέο μου σχέδιο!
Λήψη επεκτάσεων προς τα εμπρός
Η δημιουργία της δικής σας επέκτασης Chrome δεν είναι τόσο δύσκολη όσο φαίνεται. Παρόλο που σίγουρα βοήθησε να ξεκινήσετε με το να γνωρίζετε ένα μικρό κώδικα, υπάρχουν εκατοντάδες πόροι στο διαδίκτυο που θα σας δείξουν αυτό. Επιπλέον, η Google διαθέτει ένα τεράστιο αποθετήριο πληροφοριών, σεμινάρια και οδηγίες που θα σας βοηθήσουν. Έχω χρησιμοποιήσει αυτή τη σελίδα από τον ιστότοπο του Google Developer για να με βοηθήσει με αυτήν την επέκταση. Η σελίδα σάς περιγράφει κάθε μέρος της δημιουργίας της επέκτασης και παρέχει το εικονίδιο που χρησιμοποιήσαμε νωρίτερα.
Με αρκετή έρευνα, μπορείτε να δημιουργήσετε επεκτάσεις που κάνουν σχεδόν οτιδήποτε μπορεί να κάνει ο περιηγητής. Μερικές από τις καλύτερες επεκτάσεις στο κατάστημα Chrome προέρχονται από άτομα και όχι από εταιρείες, αποδεικνύοντας ότι μπορείτε πραγματικά να δημιουργήσετε τη δική σας.
Όλη η πίστωση στον John Sonmez στο SitePoint για τον αρχικό οδηγό. Έκανε τη σκληρή δουλειά, μόλις το αναδιοργάνωσα λίγο και την ενημέρωσα ελαφρώς.
Δημιουργήσατε τη δική σας επέκταση Chrome; Θέλετε να το προωθήσετε ή να το μοιραστείτε; Ενημερώστε μας παρακάτω εάν το κάνετε!
