petit outil: Bookmarklet generator 🆕 [EDIT]

Si toi aussi tu veux te faire un petit bookmarklet pour envoyer des données de la page courante vers un autre site, alors tu vas kiffer 😍 parce que ce petit bout de code te permet de le faire sans rien coder 😎.

Heing ?! 🤨

J'explique:

Si on veut pouvoir:

  • rechercher une sélection sur un site particulier (genre sur wikipedia, jeux videos.com, allocine...) ,
  • envoyer le titre de la page en cours et/ou son URL vers un site qui va s'en servir (par exemple pour bookmarker la page en cours),

alors ça peut se faire ici.

Fais voir ?

Voici deux exemples:

Capture du 2022-04-02 11-54-34.png

Capture du 2022-04-02 12-12-53.png

Quid ?

Pour faire simple,

  1. on donne un nom au bookmarklet,
  2. on choisit les données qui doivent être envoyées,
  3. on spécifie l'URL vers laquelle elles doivent être envoyées.

Le bookmarklet est généré en temps réel et une fois les réglages faits, il suffit de glisser-déposer le lien du bas.

J'ai ajouté la possibilité de modifier la variable permettant de passer les données; en effet, duckduckgo utilisera q=[recherche] mais un autre site pourra demander query=[recherche]...

De plus, on peut spécifier de ne pas utiliser le format URL?variable=[donnée] mais URL/[donnée] pour les sites ayant une rewriteurl (comme wikipedia qui exige un format fr.wikipedia.org/wiki/[RECHERCHE] )

Enfin, si vous spécifiez une URL contenant déjà des paramètres GET (comme mespagesquejaime.com/ajouter.php?user=MOI&apikey=321fd5613e32), le script le prendra en compte et les nouveaux paramètres s'ajouteront correctement ( mespagesquejaime.com/ajouter.php?user=MOI&apikey=321fd5613e32&title=mon cul sur la commode&url=www.monculsurlacommode.fr )

Exemple ?

Vous pouvez essayer de générer un bookmarklet pour rechercher directement la sélection sur youtube:

  1. donnez le nom «rechercher sur youtube»
  2. cochez le premier item : «le texte sélectionné» et renommez la variable en «search_query»
  3. remplissez la case URL avec : https://www.youtube.com/results/

Et voilà.

Ajout

Sur l'idée de DukeArt j'ai ajouté la possibilité d'éditer le code (vive contenteditable et obj.toggleAttribute 👍 ) ! Merci the Duke 🤘😎🤘

License

Vous pouvez utiliser librement et l'outil et le code en mode DBAD. Pour le télécharger, c'est par là

Il est possible de l'utiliser sans serveur php vu que c'est du HTML+JS vanilla (mais le script de téléchargement du script ne fonctionnera pas).

❝ 12 commentaires ❞

1  Thomas le

Salut, ça a l'air super mais j'ai des erreurs (je ne connais rien à javascript ). Déjà, il y a une différence entre le code du bookmarklet affiché sur l'outil et celui une fois dans le bookmark :


Dans l'outil :


javascript:(function(){if(window.getSelection){id=window.getSelection();}else%20if(document.getSelection){id=%20document.getSelection();}window.open('https://pourletest?ticketnature=1+'&id='+id,'_blank');})();


Dans le bookmark :


javascript:(function(){if(window.getSelection){id=window.getSelection();}else%20if(document.getSelection){id=%20document.getSelection();}window.open('https://pourletest?ticketnature=1+'&id='+id,'_blank');})();


Suivant la version que je prends, j'ai ensuite l'erreur :


Uncaught SyntaxError: missing ) after argument list


ou


Uncaught SyntaxError: invalid assignment left-hand side


Je cherche un url du type : https://pourletest?ticketnature=1&id=676323


Il n'est pas exclu que le problème soit à l'interface chaise-clavier

 
2  Bronco le

Déjà merci pour le rertour !
Je regarde de suite

 
3  Bronco le

C'est curieux, je n'ai pas de problème de mon côté.


La différence entre les deux codes chez toi vient de la transformation du & en & (url_encode).
Mais je ne vois pas pourquoi ça provoquerait une erreur.
Tu t'es servi de l'édition directe du code ?

 
4  Thomas le

Non je ne me suis pas servi de l'édition directe du code, le &amp apparait dès que j'ajoute le bookmark.

 
5  Thomas le

Boooon, j'ai réussi à m'en sortir, obligé de passer par le debugger ! Voici le résultat nettoyé qui fonctionne pour moi :


javascript:(function(){if(window.getSelection){id=window.getSelection();}else if(document.getSelection){id=document.getSelection();}window.open('https://pourletest?ticketnature=1&id='+id,'_blank');})();


Il me semble que c'est différent de ce que sort le générateur.
En tout cas merci, ça va bien me servir !

 
6  Bronco le

Re ! J'ai modifié un endroit qui correspond au cas où l'url contient déjà un ?. ça devrait fonctionner !🤪


Merci encore pour le retour 🥳

 
7  Duduke le

Ah bin merci, c'est parfait. J'ai partagé un bookmarklet au taf pour pré remplir nos formulaires d'imputation, une plaie sans cette solution.


Merci pour le partage 👍

 
8  Bronco le

De rien !

 
9  pomeh le

Salut,


Merci beaucoup pour l'outil, c'est top :) Ca marche bien et c'est pratique !!


J'ai juste un bug que je viens de voir, ça concerne les "&":


Si dans l'url je mets "https://www.linguee.fr/francais-anglais/search?source=auto", en cochant "le texte sélectionné (variable...", avec comme nom de variable "query", alors je m'attends à avoir une URL générée comme ceci: "https://www.linguee.fr/francais-anglais/search?source=auto&query=xxx" (xxx => le contenu sélectionné).


Le code affiché est correct:


javascript:(function(){if(window.getSelection){query=window.getSelection();}else%20if(document.getSelection){query=document.getSelection();}window.open('https://www.linguee.fr/francais-anglais/search?source=auto&query='+query,'_blank');})();


En revanche, le code généré derrière le bouton de bookmarklet est incorrect:


javascript:(function(){if(window.getSelection){query=window.getSelection();}else%20if(document.getSelection){query=document.getSelection();}window.open('https://www.linguee.fr/francais-anglais/search?source=auto&query='+query,'_blank');})();


Il y a "&" qui est inséré, au lieu de "&" tout court, et donc le lien devient invalide, mais j'ignore pourquoi c'est rajouté.


Pour info, j'utilise Firefox sur Ubuntu.


Sinon pour info, j'ai créé un bookmarklet pour ajouter une page dans WayBack Machine - Internet Archive, que je me permets de partager avec les autres:


javascript:(function(){var%20url=encodeURIComponent(location.href);window.open('https://web.archive.org/save/'+url,'_blank');})();


Si ça peut servir :)
J'ai découvert cette page également: http://outils.warriordudimanche.net/outils/bookmarklets.html c'est top aussi !! :)


Merci beaucoup pour le partage et le travail 👍👍👍💪

 
10  Bronco le

Salut et de rien ! Je suis ravi si ça sert


Pour le bug en question, il semble venir de l'encodage de l'URL qui a l'air de se faire automatiquement quand on change le href du lien via JS...
pourtant, le générateur copie le code visible dans le href sans le modifier... mais ça semble être un comportement du navigateur avec JS.


Je vais y réfléchir ;-)


Si ça t'intéresse, il y a également la page http://api.warriordudimanche.net/ ^u^

 
11  Bronco le

Et merci pour ton bookmarklet que je vais mettre en partage sur ma page !

 
12  Bronco le

Ok, j'ai été obligé de ruser, mais ça fonctionne chez moi: tu pourras tester
En gros, Quand JS colle une url dans la balise Href d'un lien, les & sont encodées automatiquement. J'ai du les forcer par un replace en mode barbare.

 

Fil RSS des commentaires de cet article

✍ Écrire un commentaire

les commentaires relevant du SPAM seront filtrés et dégagés direct...


spoiler
Quelle est le troisième caractère du mot 5ijv8 ?