Comment créer un bookmarklet de recherche de texte avec JavaScript

Bookmarklets sont Applications JavaScript qui peut être consulté comme signets du navigateur. Ils sont utilisés pour permettre aux utilisateurs de effectuer différentes actions sur les pages Web. Par exemple, ce bookmarklet de FontShop permet de prévisualiser les polices Web FontShop sur une page Web..

Dans cet article, nous allons voir à quel point il est facile et rapide de concocter un bookmarklet en créant un qui effectue un wikiwand (Wikipedia plus beau) chercher pour un texte sélectionné sur une page Web.

Comment fonctionnent les bookmarklets

L'URI d'un bookmarklet utilise le javascript: protocole cela indique que c'est composé de code JavaScript. Lorsque vous cliquez sur un bookmarklet, vous pouvez exécuter JavaScript sur une page Web et effectuer des tâches, telles que modifier l'apparence d'une page, la redirection vers une autre page ou l'affichage de nouvelles informations dessus.

Puisque les signets sont essentiellement ensembles de code JavaScript, ils sont faciles à créer avec peu de connaissances en JavaScript, que ce soit pour un usage personnel ou pour les offrir à vos utilisateurs, comme WordPress le fait avec sa presse This bookmarklet.

Commencer avec le code JavaScript

le Structure d'URL Wikiwand utilise pour un article en anglais est https://www.wikiwand.com/fr/articleTitle. Nous devons écrire un script qui saute à la page Wikiwand de quelle URL se termine par la chaîne que l'utilisateur vient de sélectionner - le texte sélectionné devra être mis à la place de le titre de l'article.

Premièrement, nous mettre la main sur le texte l'utilisateur a sélectionné sur la page le code suivant:

 getSelection (). toString () 

Nous devons le faire jeter l'objet retourné par getSelection () comme une chaîne en utilisant le toString () méthode, afin de le rendre afficher le texte sélectionné.

Ensuite, nous devons faire une visite à la page de l'article Wikiwand. Nous y parviendrons en utilisant la logique suivante, où newURL sera le URL de la page de l'article Wikiwand (qui contiendra la chaîne sélectionnée à la fin):

 location.href = newURL 

Lorsque nous assemblons ces deux extraits de code, nous obtenons le script suivant:

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

Il ne reste plus qu’à ajouter le javascript: protocole à l'avant, et nous avons le code final nous allons utiliser dans notre bookmarklet:

 // ajouter une ligne sans sauts de ligne javascript: location.href = 'https://www.wikiwand.com/en/' + getSelection (). toString (). replace (/ \ n / g, '% 20' ) 

L'option remplacer (/ \ n / g, '% 20') à la fin remplace tout caractère de nouvelle ligne (\ n) dans le texte avec un seul caractère (% 20).

Le code JavaScript est prêt. Notez que le code doit être placé dans une seule ligne sans saut de ligne, car plus tard ce sera ajouté à un champ de saisie de texte.

Créer le signet

Ouvrez la fenêtre de signet de votre navigateur, et ajouter un nouveau signet:

• Firefox: Appuyez sur Ctrl + Maj + B / cmd + Maj + B, cliquez avec le bouton droit de la souris sur "Barre d’outils des signets" et sélectionnez "Nouveau signet"..
• Chrome: Appuyez sur Ctrl + Maj + O / Cmd + Alt + B, cliquez avec le bouton droit de la souris sur "Barre de favoris" et sélectionnez "Ajouter une page ..."..

Dans le champ URL copier-coller le code JavaScript D'avant. Une fois le signet créé, il est prêt à être utilisé. aller à n'importe quelle page web, sélectionnez un mot vous voulez rechercher dans Wikiwand, et cliquez sur le bookmarklet - la page de l'article Wikiwand s'ouvrira immédiatement.

Accès rapide

Plutôt que d’atteindre le menu des favoris à chaque fois que vous en avez besoin, vous pouvez choisir l'afficher directement dans votre navigateur pour un accès rapide.

• Firefox: Cliquez sur "Affichage> Barres d'outils" dans la barre de menu supérieure et sélectionnez "Barre d'outils Signets"..
• Chrome: Appuyez sur Ctrl + Maj + B / cmd + Maj + B.

Créer un lien de bookmarklet

Vous pouvez ajouter votre bookmarklet à un site Web. comme hyperlien ainsi, quels visiteurs peut signet soit en glissant-déposant simplement le lien dans la barre d'outils des favoris, soit en cliquant avec le bouton droit de la souris sur le lien et en sélectionnant l'option de le marquer.

Pour transformer votre bookmarklet en lien hypertexte, créez un Balise HTML avec le script bookmarklet comme la valeur de son href attribut:

   Wikiwand Recherche Bookmarklet  

Comment stocker les bookmarklets séparément

Vous pouvez également utiliser un fichier JavaScript séparé pour stocker le code du bookmarklet, ce qui n'est probablement pas nécessaire si vous avez un script court - comme celui que nous venons de voir dans ce tutoriel - mais peut s'avérer utile lorsque le code JavaScript est trop long pour le copier-coller dans la barre de favoris de votre navigateur.

Le fichier myscript.js volonté héberge le code JavaScript principal pour le bookmarklet, et vous devez ajouter le code suivant comme URL du signet (soit dans la barre de favoris du navigateur, soit en tant que valeur du href attribut dans le fichier HTML):

 // ajoute une ligne sans coupures de ligne javascript: (() => avec (document) let s = createElement ('script'); s.src = 'myscript.js'; head.appendChild (s) ) (); 

L'extrait de code ci-dessus est enveloppé dans une fonction de flèche invocatrice, et utilise les fonctionnalités de ECMAScript 6, telles que laisser mot-clé, afin de réduire la longueur du code. Il ajoute un > balise pointant vers le myscript.js déposer au section du document lorsque l'utilisateur clique sur le bookmarklet (notez que vous devrez peut-être utiliser un chemin absolu pour la myscript.js fichier).