Πώς να δημιουργήσετε ένα Σημειωματάριο αναζήτησης κειμένου με JavaScript

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

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

Πώς λειτουργούν τα bookmarklets

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

Δεδομένου ότι οι σελιδοδείκτες είναι ουσιαστικά σύνολα κώδικα JavaScript, είναι εύκολο να δημιουργηθούν με λίγη γνώση JavaScript, είτε για προσωπική χρήση είτε για την προσφορά στους χρήστες σας, όπως το WordPress κάνει με το Press This bookmarklet.

Ξεκινήστε με τον κώδικα JavaScript

ο Δομή διεύθυνσης URL Το Wikiwand χρησιμοποιεί ένα αγγλόφωνο άρθρο https://www.wikiwand.com/el/articleTitle. Πρέπει να γράψουμε ένα σενάριο που μεταβαίνει στη σελίδα του Wikiwand της οποίας διεύθυνσης URL τελειώνει με τη συμβολοσειρά που μόλις επέλεξε ο χρήστης - το επιλεγμένο κείμενο θα χρειαστεί να τεθεί σε εφαρμογή articleTitle.

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

 getSelection (). toString () 

Εμείς πρέπει να εκμαγείο το αντικείμενο που επιστρέφεται από getSelection () ως συμβολοσειρά χρησιμοποιώντας το toString () για να γίνει αυτό εξάγετε το επιλεγμένο κείμενο.

Στη συνέχεια, πρέπει να το κάνουμε πραγματοποιήστε μια επίσκεψη στη σελίδα άρθρου του Wikiwand. Θα το επιτύχουμε χρησιμοποιώντας την ακόλουθη λογική, όπου newURL θα είναι το URL της σελίδας του άρθρου του Wikiwand (που θα περιέχει την επιλεγμένη συμβολοσειρά στο τέλος):

 location.href = newURL 

Όταν βάζουμε μαζί αυτά τα δύο αποσπάσματα κώδικα, καταλήγουμε στο ακόλουθο σενάριο:

 location.href = 'https://www.wikiwand.com/en/'+getSelection () .toString () 

Τώρα πρέπει μόνο να προσθέσουμε το javascript: πρωτόκολλο προς τα εμπρός, και έχουμε το τελικό κώδικα θα χρησιμοποιήσουμε στο bookmarklet μας:

 // προσθέστε σε μια γραμμή χωρίς διαχωρισμού γραμμών javascript: location.href = 'https://www.wikiwand.com/en/' + getSelection (). toString () αντικατάσταση (/ \ n / g, '% 20' ) 

Το προαιρετικό αντικαταστήστε (/ \ n / g, '% 20') στο τέλος αντικαθιστά οποιοδήποτε νέο χαρακτήρα γραμμής (\ n) στο κείμενο με ένα μοναδικό διαστημικό χαρακτήρα (% 20).

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

Δημιουργήστε το σελιδοδείκτη

Ανοίξτε το παράθυρο σελιδοδεικτών του προγράμματος περιήγησης και προσθέστε ένα νέο σελιδοδείκτη:

• Firefox: Πατήστε ctrl + shift + B / cmd + shift + B, κάντε δεξί κλικ στο "Γραμμή εργαλείων σελιδοδεικτών" και επιλέξτε "Νέο σελιδοδείκτη".
• Χρώμιο: Πατήστε ctrl + shift + O / cmd + alt + B, κάντε δεξί κλικ στη γραμμή "Bookmarks" και επιλέξτε "Add Page ...".

Στο πεδίο URL αντιγράψτε-επικολλήστε τον κώδικα JavaScript από πριν. Μόλις δημιουργηθεί ο σελιδοδείκτης είναι έτοιμος για χρήση. μεταβείτε σε οποιαδήποτε ιστοσελίδα, επιλέξτε μια λέξη που θέλετε να αναζητήσετε στο Wikiwand, και κάντε κλικ στο σελιδοδείκτη - η σελίδα του άρθρου Wikiwand θα ανοίξει αμέσως.

Γρήγορη πρόσβαση

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

• Firefox: Κάντε κλικ στην επιλογή "Προβολή> Γραμμές εργαλείων" στην επάνω γραμμή μενού και επιλέξτε "Γραμμή εργαλείων σελιδοδεικτών".
• Χρώμιο: Πατήστε ctrl + shift + B / cmd + shift + B.

Δημιουργήστε ένα σύνδεσμο σελιδοδεικτών

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

Για να μετατρέψετε το bookmarklet σε υπερσύνδεσμο, δημιουργήστε ένα Ετικέτα HTML με το σενάριο σελιδοδεικτών ως η αξία του href Χαρακτηριστικό:

   Wikiwand Αναζήτηση Σημειωματάριο  

Πώς να αποθηκεύσετε ξεχωριστά τις σελιδοδείκτες

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

Το αρχείο myscript.js θα house τον κύριο κώδικα JavaScript για το bookmarklet και πρέπει να προσθέσετε τον ακόλουθο κώδικα ως διεύθυνση URL σελιδοδείκτη (είτε στη γραμμή σελιδοδεικτών του προγράμματος περιήγησης είτε ως την τιμή του href χαρακτηριστικό στο αρχείο HTML):

 // προσθέστε σε μια γραμμή χωρίς διαχωρισμό γραμμών javascript: (() => με (έγγραφο) ας s = createElement ('script'); s.src = 'myscript.js'; head.appendChild (s) ) (); 

Το απόσπασμα κώδικα παραπάνω είναι τυλιγμένο σε μια αυτοκατευθυνόμενη λειτουργία βέλους, και χρησιμοποιεί χαρακτηριστικά του ECMAScript 6, όπως το αφήνω λέξη-κλειδί, προκειμένου να μειωθεί το μήκος κώδικα. Προσθέτει ένα > ετικέτα που δείχνει προς το myscript.js αρχείο στο τμήμα του εγγράφου όταν ο χρήστης κάνει κλικ στο σελιδοδείκτη (σημειώστε ότι μπορεί να χρειαστεί να χρησιμοποιήσετε μια απόλυτη διαδρομή για το myscript.js αρχείο).