JQuery apporte de nombreuses fonctionnalités aux sites web. Cette bibliothèque JavaScript open source facilite l'écriture de script. Lorsqu'un site web n’intègre pas jQuery, il est possible de l'injecter avant de l'utiliser comme le montre l'exemple ci-dessous.
bookmarklet avec jQuery javascript:(function(e,a,g,h,f,c,b,d){if(!(f=e.jQuery)||g>f.fn.jquery||h(f)){c=a.createElement("script");c.type="text/javascript";c.src="https://code.jquery.com/jquery-latest.min.js";c.onload=c.onreadystatechange=function(){if(!b&&(!(d=this.readyState)||d=="loaded"||d=="complete")){h((f=e.jQuery).noConflict(1),b=1);f(c).remove()}};a.documentElement.childNodes[0].appendChild(c)}})(window,document,"1.12.4",function($,L){;$("<b>jQuery</b>").replaceAll("a");$("h1").text("Nouveau Titre").css('color','red');$(":image").hide();});
Ce script ajoute jQuery à la page web, remplace les liens par du texte, change le texte du titre en rouge et cache les images.
Les avantages de jQuery:
utilise un code plus concis
multiplate-forme
compatible avec tous les navigateurs
ajoute, modifie ou supprime des éléments avec le DOM
Voici d'autres exemples de favelets. Ces scripts ajoutent des fonctionnalités au navigateur et améliore la productivité de l'utilisateur. Le code JavaScript modifie le rendu graphique d'une page, récupère des informations ou agit sur le navigateur.
bookmarklet loupe (augmente la taille du texte au survol de la souris)
recherche d'email sur la page web (le script recherche des adresses mail sur la page) javascript:function
b() {var m='';for(var i=0; i<document.links.length;
i++){if(document.links[i].protocol=='mailto:'){var
n=document.links[i].toString();m+=n.substring(7, n.length) +
'\n';}}if(m!=''){alert(m);}else{alert('aucune adresse mail sur cette
page');}}b();
insertion de texte (insertion de texte à choix) javascript:var
a="verybiglongemail@google.ch";var b="La règle d'or de la conduite est
la tolérance mutuelle, car nous ne penserons jamais tous de la même
façon, nous ne verrons qu'une partie de la vérité et sous des angles
différents.";var c="La douceur du miel ne console pas de la piqûre de
l'abeille.";var d="Il n'existe que deux choses infinies, l'univers et la
bêtise humaine... mais pour l'univers, je n'ai pas de certitude
absolue.";function copy(text) {var presse =
document.createElement("textarea");document.body.appendChild(presse);presse.value
=
text;presse.select();document.execCommand("copy");document.body.removeChild(presse);};var
question1="";var question=prompt("1: "+ a+" \n"+"2: "+ b+" \n"+"3:
"+ c+" \n"+"4: "+ d, "");var y=question.charCodeAt();if
(y===49){;copy(a);};if (y===50){;copy(b);};if (y===51){;copy(c);};if
(y===52){;copy(d);}
insertion d'un texte unique (dans l'exemple une adresse mail est copiée dans le presse papier) javascript:var
a="verybiglongemail@google.ch";function copy(text) {var presse =
document.createElement("textarea");document.body.appendChild(presse);presse.value
=
text;presse.select();document.execCommand("copy");document.body.removeChild(presse);};copy(a)
scroll top (en cliquant sur ce favori, le navigateur remonte en haut de la page) javascript:window.scroll(0, 0);
scroll down (en cliquant sur ce favori, le navigateur descend en bas de la page) javascript:var x =document.documentElement.scrollHeight;window.scroll(0, x);
retour arrière (recule d'une page dans l'historique) javascript:history.back();
cookie (affiche le cookie de la page) javascript:alert(document.cookie)
masque les images (masque les images de la page web) javascript:(function(){var
imgs=document.getElementsByTagName("img");for(var
i=0;i<imgs.length;i++)imgs[i].style.visibility="hidden"}());
augmente la taille du texte (modifie la taille du texte, 14pt dans l'exemple suivant) javascript:(function(){;for(i=0;i<document.getElementsByTagName('*').length;i++)(document.getElementsByTagName('*')[i].style.fontSize='14pt');}());
dictionnaire (recherche le mot sélectionné dans un dictionnaire en ligne) javascript:d=document.getSelection();if(d!=null)location="https://www.larousse.fr/dictionnaires/francais/="+escape(d);void(0);
Un bookmarklet est un marque-page qui exécute du code JavaScript pour apporter des fonctionnalités intéressantes au navigateur. Appelé aussi signapplet, applisignet, marque-page scripté ou favelets: ils récupèrent des informations d'une page web, modifient le rendu graphique d'une page web, agissent sur le navigateur ou interrogent directement un moteur de recherche.
Le code javascript est inscrit dans la section "url" du signet, il commence par "javascript:". Le code s’exécute lorsque l'on clique sur le bookmark pour accomplir une tâche.
Les applisignets fonctionnent aussi sous la forme de liens dans une page html.
Ces liens favoris fonctionnent généralement sur n'importe quel navigateur, ils rendent les tâches répétitives du navigateur plus rapides et plus faciles à effectuer.
Pour intégrer un favelet dans la barre de favoris d'un navigateur, glisser déposer le lien du bookmarklet.
Ou copier le code et l'insérer dans la zone url du signet.
Cette vidéo présente plusieurs marque-pages dont voici les codes js:
recherche d'adresse sur google maps javascript:d=""+(window.getSelection?window.getSelection():document.getSelection?document.getSelection():document.selection.createRange().text);d=d.replace(/\r\n|\r|\n/g," ,");if(!d)d=prompt("entrer l'adresse:", "");if(d!=null)location="http://maps.google.com?q="+escape(d).replace(/ /g,"+");void 0;
bookmarklet prise de note sans sauvegarde javascript:var myWindow = window.open("", "MsgWindow", "width=400,height=600");myWindow.document.write("<html contenteditable><body><p></p></body></html>");
bookmarklet recherche de synonymes javascript:d=document.getSelection();if(d!=null)location="https://www.synonymes.com/synonyme.php?mot="+escape(d);void(0); bookmarklet contrôle du nom de domaine de la page web javascript:function x(){;var site=window.location.hostname;if (site == "www.google.ch" || site =="stackoverflow.com"){;alert("domaine connu")}else{;alert("domaine inconnu")};}x()
bookmarklet date actuelle (format européen) javascript:var e = new Date();var d = e.getDate();var m = e.getMonth()+1;var y = e.getFullYear();alert(d+"-"+m+"-"+y);
bookmarklet retourne le code unicode d'une chaîne de caractères javascript:var question1="";var question=prompt("", "");for (var i = 0; i < question.length; i++) {question1=question1+question.charCodeAt(i);};function copy(text) {var presse = document.createElement("textarea");document.body.appendChild(presse);presse.value = text;presse.select();document.execCommand("copy");document.body.removeChild(presse);};copy(question1);
bookmarklet afficher le mot de passe masqué javascript:(function(){var s,F,j,f,i; s = ""; F = document.forms; for(j=0; j<F.length; ++j) { f = F[j]; for (i=0; i<f.length; ++i) { if (f[i].type.toLowerCase() == "password") s += f[i].value + "\n"; } } if (s) alert("mot de passe en clair:\n\n" + s); else alert("mot de passe en clair");})();
Ce script placé dans un favori (bookmarklet), est un générateur de mot de passe écrit en javascript. Le code récupère le mot de passe simple que l'utilisateur inscrit dans un popup, le chiffre et l'allonge de façon a créer un password fort.
Le résultat est une suite de lettres, de chiffres et de caractères qui n'est plus lisible. Ce qui augmente considérablement l'entropie du mot de passe. Le script copie le résultat permettant à l'utilisateur de le coller dans le formulaire de connexion.
Les différents paramètres du cryptage peuvent être changer afin de personnaliser le script.
Cette méthode rend possible la mémorisation de nombreux mot de passes lisibles et donc leurs utilisations uniques.
-Créer un favori dans Chrome
-Cliquer avec le bouton droit sur le favori
-Modifier...
-Copier le code suivant
-Coller le code dans le champ "url" du marque-page
-Modifier le "Nom" du favori
-Enregistrer
ou glisser déposer le lien suivant dans la barre de favoris du navigateur
bookmarklet générateur de mot de passe complexe javascript:var q=prompt("mot de passe", "");var k="x%&H/:?M*-g=)q@(I/<S";var c="";var x=q;var long=x.length;for (pas = 1; long < 28; pas++){var z = 23 % (pas+7);c.split("").reverse().join(""),c=c+k.substring(pas,pas+1)+q.substring(pas,pas+1)+(pas+z)+q.substring(3,5).split("").reverse().join("")+z+k.substring(pas+4,pas+5)+q.substring(pas+1,pas+2)+q.substring(long-1,long)+k.substring(pas+3,pas+3);long=c.length;};function copy(text) {var presse = document.createElement("textarea");document.body.appendChild(presse);presse.value = text;presse.select();document.execCommand("copy");document.body.removeChild(presse);};copy(c)
Lors de la connexion à un compte, la vérification de l'adresse web est primordiale pour éviter le hameçonnage. Le phishing est une technique qui utilise des copies de sites de confiances pour tromper les internautes. L'url de ces sites diffère des sites copiés.
Cette version du générateur de mot de passe contrôle si le domaine est connu. Si le domaine est inconnu le mot de passe ne peut pas être créé. Un message d'alerte informe l'utilisateur.
Pour configurer le générateur, il faut modifier les noms de domaines inscrits dans le code javascript. Dans l'exemple il s'agit de "accounts.google.com" et de "www.linkedin.com".
Les bookmarklets permettent de réaliser des tâches en utilisant du code javascript à l'intérieur d'un favori. Cette vidéo présente des favoris pour se connecter à son compte google.
Le premier remplit l'adresse mail du formulaire de connexion et clique sur le bouton suivant. Le deuxième actualise la page web. Le troisième demande le mot de passe de l'utilisateur, chiffre le mot de passe et l'inscrit dans le formulaire.
L'internaute peut utiliser un mot de passe simple et facile a mémoriser. Le script se charge d'augmenter la longueur et la complexité du password.
Le code du signet récupère les caractères du mot de passe, les mélanges et en ajoute pour obtenir une meilleure séquence de caractères. Cette méthode fonctionne avec chrome sur la page de connexion de Google. Pour modifier un signet, il suffit d'en créer un, de cliquer avec le bouton droit de la souris, de sélectionner "modifier", de changer le nom et de remplacer L’URL par le code Javascript.
bookmarklet insérer un email dans le formulaire de connexion de google javascript:document.getElementById("identifierId").setAttribute("value","test@gmail.com"),document.querySelectorAll('[role="button"]:last-of-type')[0].setAttribute("id", "clicbouton"),document.getElementById("clicbouton").click()
bookmarklet générateur de mot de passe fort et copie dans le presse papier javascript:var q=prompt("mot de passe", "");var k="x%j&H/i:?Ms*-g=)q@(lI/S!";var c="";var x=q;var long=x.length;for (pas = 1; long < 31; pas++){var z = 23 % (pas+7);c.split("").reverse().join(""),c=c+k.substring(pas,pas+1)+q.substring(pas,pas+1)+(pas+z)+q.substring(3,5).split("").reverse().join("")+z+k.substring(pas+4,pas+5)+q.substring(pas+1,pas+2)+q.substring(long-1,long)+k.substring(pas+3,pas+3);long=c.length;};document.getElementsByName("password")[0].setAttribute("id", "new"),document.getElementById("new").setAttribute("value",c.split("").reverse().join(""))
-Pour personnaliser le chiffrement du mot de passe, il est possible de changer la longueur du mot de passe crypté, la variable k avec d'autre caractères spéciaux, la variable z (moulo),...
Ces bookmarklets améliorent la productivité sur la plateforme YouTube.
Ce bookmarklet utilise un texte sélectionné ou affiche un popup pour rechercher le terme sur YouTube: YouTube recherche javascript:d=""+(window.getSelection?window.getSelection():document.getSelection?document.getSelection():document.selection.createRange().text);d=d.replace(/\r\n|\r|\n/g," ,");if(!d)d=prompt("rechercher sur YouTube:", "");if(d!=null)location="https://www.youtube.com/results?search_query="+escape(d).replace(/ /g,"+");void 0
Ce bookmarklet active le thème sombre: Youtube thème sombre javascript:document.cookie=("PREF=f4=4000000&f6="+(((document.cookie||"").match(/PREF=f4=4000000&f6=400/))?8000:400)+";domain=.youtube.com");location.reload();
Ce bookmarklet active le thème clair: Youtube désactive thème sombre javascript:document.cookie=("PREF=f4=4000000&f6="+(((document.cookie||"").match(/PREF=f4=4000000&f6=8000/))?400:8000)+";domain=.youtube.com");location.reload();
Ce signapplet affiche la vidéo en mode cinéma: Youtube mode cinéma javascript:document.cookie=("wide="+(((document.cookie||"").match(/wide=1/))?0:1)+";domain=.youtube.com");location.reload();
Ce favelet affiche le nombre de vues d'une vidéo: YouTube vues javascript:var x = document.getElementsByClassName("style-scope yt-icon");var y=x[0].innerHTML;alert(y);
Ce bookmarklet met en pause une vidéo: YouTube pause
Cette version du favelet affiche le temps de la pause: YouTube pause + temps javascript:void function(){y=document.getElementById("movie_player"),y.pauseVideo();}();alert(y.getCurrentTime())
Ce bookmarklet lit la vidéo: YouTube play javascript:void function(){y=document.getElementById("movie_player"),y.playVideo();}()
Ce bookmarklet augmente la vitesse de lecture de la vidéo: YouTube + javascript:(function(){;Array.from(document.getElementsByTagName('video')).forEach(v => v.playbackRate *= 1.25);}());
Ce bookmarklet diminue la vitesse de lecture de la vidéo: YouTube - javascript:(function(){;Array.from(document.getElementsByTagName('video')).forEach(v => v.playbackRate *= 0.75);}());
Ce bookmarklet ouvre un onglet avec les chaînes d'une chaîne: YouTube chaînes javascript:window.open("https://www.youtube.com/c/emmanuelbron/channels")
