bookmarklet avec jQuery

 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
• anime une page web
• modifie le CSS
• envoi et reçoit des données
  

exemples de favoris scriptés

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)

javascript:(function(){var x=document.createElement("div");Object.assign(x.style,{position:"fixed",bottom:"0",right:"0",width:"100vw",height:"100vh",zIndex:"99999999",background:"transparent"});document.body.append(x);function getElement(event){x.style.pointerEvents="none";var e=document.elementFromPoint(event.clientX,event.clientY);x.style.pointerEvents="auto";return e};document.addEventListener("mousemove",function(event){var e=getElement(event);
var p=e.getBoundingClientRect();var k=Object.assign(x.style,{background:"rgba(0, 169, 255, 0.2)",outline:"1px solid rgba(0, 169, 255, 0.2)",top:""+p.top+"px",left:""+p.left+"px",width:""+p.width+"px",height:""+p.height+"px"})});x.addEventListener("click",function(event){var e=getElement(event);var t=e.textContent||e.value;e.style.fontSize="20pt";document.body.removeChild(x)})})();

copie de zone de texte  (sélectionne par division du contenu et copie le texte)

javascript:(function(){var x=document.createElement("div");Object.assign(x.style,{position:"fixed",bottom:"0",right:"0",width:"100vw",height:"100vh",zIndex:"99999999",background:"transparent"});document.body.append(x);function getElement(event){x.style.pointerEvents="none";var e=document.elementFromPoint(event.clientX,event.clientY);x.style.pointerEvents="auto";return e};document.addEventListener("mousemove",function(event){var e=getElement(event);var p=e.getBoundingClientRect();Object.assign(x.style,{background:"rgba(0, 169, 255, 0.2)",outline:"1px solid rgba(0, 169, 255, 0.2)",top:""+p.top+"px",left:""+p.left+"px",width:""+p.width+"px",height:""+p.height+"px"})});x.addEventListener("click",function(event){var e=getElement(event);var t=e.textContent||e.value;function copy(){var s=document.createElement("textarea");document.body.appendChild(s);s.value=t;s.select();document.execCommand("copy");document.body.removeChild(s);};copy(t);document.body.removeChild(x)})})()

recherche de texte  (dénombre et surligne le texte recherché)

javascript:(function(){var count=0;var t=prompt("recherche le texte:", "");if(t==null || t.length==0)return;d=document.defaultView;function x(node, te, len){var p, s, a, b, e, m;var s=0;if( node.nodeType==3 ){var p=node.data.toUpperCase().indexOf(te);if(p>=0){var a=document.createElement("SPAN");a.style.backgroundColor="rgba(0, 169, 255, 0.5)";var b=node.splitText(p);var e=b.splitText(len);var m=b.cloneNode(true);a.appendChild(m);b.parentNode.replaceChild(a,b);++count;s=1;}}else if( node.nodeType==1 && node.childNodes && node.tagName.toUpperCase()!="SCRIPT" && node.tagName.toUpperCase!="STYLE"){for (var c=0;c < node.childNodes.length;++c){c=c+x(node.childNodes[c], te, len);}}return s;};x(document.body, t.toUpperCase(), t.length);if (count>0 ){;alert("trouvé "+count+" occurrence"+ (count>1 ?"s":"")+" de:         "+t+"");}else {;alert("aucune occurrence trouvée");};})();

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();

enregistrer le document  (télécharger le document au format html)

javascript:(function(){var a=docu.length==0)return;d=document.defaultView;function x(node, te, len){var p, s, a, b, e, m;var s=0;if( node.nodeType==3 ){var p=node.data.toUpperCase().indexOf(te);if(p>=0){var a=document.createElement("SPAN");a.style.backgroundColor="rgba(0, 169, 255, 0.5)";var b=node.splitText(p);var e=b.splitText(len);var m=b.cloneNode(true);a.appendChild(m);b.parentNode.replaceChild(a,b);++count;s=1;}}else if( node.nodeType==1 && node.childNodes && node.tagName.toUpperCase()!="SCRIPT" && node.tagName.toUpperCase!="STYLE"){for (var c=0;c < node.childNodes.length;++c){c=c+x(node.childNodes[c], te, len);}}return s;};x(document.body, t.toUpperCase(), t.length);if (count>0 ){;alert("trouvé "+count+" occurrence"+ (count>1 ?"s":"")+" de:         "+t+"");}else {;alert("aucune occurrence trouvée");};})();

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();

avance  (page suivante dans le navigateur)

javascript:history.go(1)

enregistrer la page web

javascript:(function(){var a=document.createElement('a');a.href = location.href;a.download='fichier.html';document.body.appendChild(a);a.click();a.parentNode.removeChild(a);})();

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);

exemples de bookmarklets

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 impression de la page web
javascript:window.print();

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");})();

bookmarklet copie du texte sélectionné
javascript:d=document.getSelection();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(d);

bookmarklet appliquer le mode sombre à la page web
javascript:(function(){var new_style, styles='* { background: black !important; color: #C0C0C0 !important; line-height:1.7em !important} :link, :link * { color: #0099FF !important } :visited, :visited * { color: #6666CC !important }'; if(document.createStyleSheet) { document.createStyleSheet("javascript:'"+styles+"'"); } else { new_style=document.createElement('link'); new_style.rel='stylesheet'; new_style.href='data:text/css,'+escape(styles); document.getElementsByTagName("head")[0].appendChild(new_style); } }());

 

bookmarklet provenance de la page web

javascript:alert(document.referrer);

signet générateur de mot de passe

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".

bookmarklet générateur de mot de passe anti phishing

javascript:function xx(){;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);};var site=window.location.hostname;if(site == "accounts.google.com" || site =="www.linkedin.com"){;xx();}else{;alert("attention domaine inconnu")}

augmenter l'entropie d'un mot de passe avec un bookmarklet

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 actualiser la page web
javascript:location.reload()

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),...

bookmarklets pour YouTube

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

javascript:void function(){y=document.getElementById("movie_player"),y.pauseVideo();}()




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")

ajouter une icône à un bookmarklet

Par défaut les navigateurs affichent une icône standart lors de la création d'un favori sans url.

Les bookmarklets n'échappent pas à cette présentation peu esthétique.

Il est néanmoins possible de créer un favicon personnalisé lié au favelet.

Pour les utilisateurs du navigateur chrome:

• personnaliser et contrôler google chrome
• favoris
• gestionnaire de favoris
• organiser
• exporter les favoris
• créer un favicon de son choix (favicon.ico)
• convertir le favicon en base64
• copier le résultat de l'encodage base64
• ouvrir le fichier tml des favoris exportés avec un éditeur de texte
  
• rechercher le bookmarklet concerné
• ajouter l'expression suivante (ICON="data:image/png;base64,...) aprés (ADD_DATE="...")
  
• coller l'encodage base64 après cette expression
• sauvegarder le fichier html
• importer les favoris dans chrome
• supprimer les favoris importés

Exemple d'un applisignet avec un favicon youtube:

<DT><A HREF="javascript:d=&quot;&quot;+(window.getSelection?window.getSelection():document.getSelection?document.getSelection():document.selection.createRange().text);d=d.replace(/\r\n|\r|\n/g,&quot; ,&quot;);if(!d)d=prompt(&quot;rechercher sur YouTube:&quot;, &quot;&quot;);if(d!=null)location=&quot;https://www.youtube.com/results?search_query=&quot;+escape(d).replace(/ /g,&quot;+&quot;);void 0" ADD_DATE="1596612653" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABCElEQVQ4ja2TMU4DMRBF38wiEFIqKFYIUSAtJ8kNcoood8jJopwgRyANNCg1aSJl/Sls73rdoBC+NLI982c8/raNAgIHLC2NKZRHg1BHavKvyDlWOGbAG9ACT8RuSgTgCzgA7wbHstpC8Ck4CSSQzDTMp3ZK3EVOvhN8pGAvCILzYGbnYh0SRynn1oEX4JGpME7bOmaO5Lh7daQAPADPDtwnLSKhaaI2q5Wx2RhdZ4RgTIXOBWde7WyYRWLfw3wOux2s12PhaaFQK30xbqqzCSnu1DSw3cJyCfv9GI+Wu3AEneCY1M23ENS2QWZx7h4G/8j7FrxefY25rz8/pH97ytd/puS8+Dv/AFRGv3m23DwSAAAAAElFTkSuQmCC">YouTube recherche</A>

Pour les habitués du browser firefox:

• bibliothèque
• marque-pages
• afficher tous les marque-pages
• exporter des marque-pages au format html
• enregistrer
• modifier le fichier (procédure identique à celle mentionnée pour chrome)
• importer des marque-pages au format html

Base64 est un algorithme d'encodage qui convertit, en caractères imprimables à partir des données binaires, l'image du favicon. Cet algorithme utilise 64 caractères de base, les lettres minuscules et majuscules, les chiffres et le symbole plus et slash.

favelet affichage de deux pages web côte à côte

Ce bookmarklet divise une page web en deux parties égales dans le navigateur.

La première affiche la page actuelle, la deuxième affiche une autre page ou la même.

Comme sur les photos suivantes, l'applisignet permet de visualiser deux vidéos sur youtube ou de lire deux pages d'un site web.

bookmarklet split

javascript:var y=prompt("url","");if(y==""){;z=window.location.href;}else{;z=y;};document.write("<html><head></head><iframe src=" + location.href + " width=50% height=100% align=left frameborder=0></iframe><iframe src=" + z + " width=50% height=100% align=right frameborder=0></iframe></html>")




Le formulaire demande l'adresse url de la deuxième page web.

Si le formulaire n'est pas remplit, les deux cadres afficheront la même page.

Ce script permet de lire ou de comparer deux pages web sans ouvrir un nouveau onglet.

Il est possible de naviger dans les deux frames indépendamment.

L'actualisation de la page supprime les deux cadres et affiche la page originale.

email bookmarklet

Il est possible d'envoyer des emails depuis le navigateur à l'aide de bookmarklets.
L'application de messagerie usuel est utilisée pour ouvrir un nouveau message.
Plusieurs paramètres peuvent être ajoutés au favelets.

envoyer un message
javascript:location.href='mailto:'

envoyer un message (paramètres non remplis)
javascript:location.href='mailto:?SUBJECT='+'&BODY='

envoyer un message (paramètres remplis)
javascript:location.href='mailto:test@test.cch?SUBJECT=sujet'+'&BODY=texte'

envoyer un message (paramètres remplis avec des variables)
javascript:m="test@test.cch";s="sujet";c="corps";location.href='mailto:'+m+'?SUBJECT='+encodeURIComponent(s)+'&BODY='+encodeURIComponent(c)

envoyer un mail avec un lien (le titre de la page web est ajoutée au sujet du message)
javascript:m="test@test.cch";var titre=document.title;location.href='mailto:'+m+'?SUBJECT='+titre+'&BODY='+escape(location.href)

envoyer un mail avec un lien d'une vidéo youtube, démarre à 30 secondes
javascript:m="test@test.cch";d=document.location='https://youtu.be/' + document.location.href.match( /[&?]v=([^&#]*)/i)[1]+"?t=30";var titre=document.title;location.href='mailto:'+m+'?SUBJECT='+titre+'&BODY='+escape(d)

envoyer un email avec gmail
javascript:(function(){window.open('https://mail.google.com/mail/?ui=2&view=cm&fs=1&tf=1&shva=1','Compose Gmail','status=no,directories=no,location=no,resizable=no,menubar=no,width=600,height=600,toolbar=no');})();




gmail this

javascript:(function(){popw='';Q='';d=document;w=window;if(d.selection){Q=d.selection.createRange().text;}else if(w.getSelection){Q=w.getSelection();}else if(d.getSelection){Q=d.getSelection();}popw=w.open('http://mail.google.com/mail/s?view=cm&fs=1&tf=1&to=&su='+encodeURIComponent(d.title)+'&body='+encodeURIComponent(Q)+escape('%5Cn%5Cn')+encodeURIComponent(d.location)+'&zx=RANDOMCRAP&shva=1&disablechatbrowsercheck=1&ui=1','gmailForm','scrollbars=yes,width=680,height=575,top=175,left=75,status=no,resizable=yes');if(!d.all)setTimeout(function(){popw.focus();},50);})();

récupérer les données d'une vidéo youtube

Les informations d'une vidéo sont affichées dans une popup avec ce bookmarklet en JavaScript.
Le script extrait les données du code html et présente les informations détaillées de la vidéo.
La nouvelle fenêtre retourne les données suivantes:

• nom de la chaîne
• titre de la vidéo
• mots clés
• description de la vidéo
• date de publication
• date de mise en ligne
• chaîne ID
• vidéo ID
• url
• durée
• genre
• nombre de vues
• tag
  

 bookmarklet données d'une vidéo youtube
javascript:var name = document.querySelector("link[itemprop='name']").getAttribute("content");var titre=document.getElementsByName('title')[0].getAttribute('content');var description=document.getElementsByName('description')[0].getAttribute('content');var keywords=document.getElementsByName('keywords')[0].getAttribute('content');var element = document.querySelector('meta[property="og:video:tag"]');var tag = element && element.getAttribute("content");var element2 = document.querySelector('meta[property~="og:url"]');var url = element2 && element2.getAttribute("content");var date=document.querySelector("[itemprop='datePublished']").getAttribute("content");var date_ligne=document.querySelector("[itemprop='uploadDate']").getAttribute("content");var channel = document.querySelector("[itemprop='channelId']").getAttribute("content");var video = document.querySelector("[itemprop='videoId']").getAttribute("content");var time = document.querySelector("[itemprop='duration']").getAttribute("content");var genre = document.querySelector("[itemprop='genre']").getAttribute("content");var compteur = document.querySelector("[itemprop='interactionCount']").getAttribute("content");var myWindow = window.open("", "", "width=600,height=500");myWindow.document.write("nom de la chaîne: " + name + "<br><br>","titre de la vidéo: " + titre + "<br><br>", "mots clés: "+ keywords + "<br><br>", "description: "+ description + "<br><br>", "date de publication: "+ date + "<br><br>", "date de mise en ligne: "+ date_ligne + "<br><br>","chaîne: "+ channel + "<br><br>", "vidéo ID: "+ video + "<br><br>","url: "+ url + "<br><br>","durée: "+ time + "<br><br>", "genre: "+ genre + "<br><br>", "nombre de vues: "+ compteur + "<br><br>", "tag: "+ tag + "<br><br>");

bookmarklet: youtube liste des vidéos

Ce bookmarklet génère et affiche une liste des vidéos d'une chaîne YouTube.

bookmarklet liste des vidéos YouTube

javascript:(function(){if (window.location.href.indexOf("watch?v=") > -1 && window.location.href.indexOf("&list=") < 0) {;window.location += "&list=" + "UU" + document.documentElement.innerHTML.match('channelId" content="(.*?)"')[1].substr(2);}})()

La liste est ajoutée à droite sous la mention "Vidéos misent en ligne par".

Elle affiche l'ensemble des vidéos de la chaîne.

Le script js récupère le channelId de la chaîne, rajoute à l'url de la vidéo "&list=" ,"UU" et "channelId ".

Puis actualise la page web.

bookmarklet: youtube vidéo intégrée

Ce bookmarklet affiche une vidéo youtube dans une iframe.
Les paramètres autoplay et rel sont ajoutés à l'url.
Le paramètre autoplay détermine si la lecture de la vidéo doit être lancée automatiquement.
Le paramètre rel détermine si des vidéos similaires doivent être affichées dans le lecteur à la fin de la lecture de la vidéo.

vidéo youtube intégrée
javascript:document.location='https://www.youtube.com/embed/' + document.location.href.match( /[&?]v=([^&#]*)/i)[1]+"?autoplay=1&rel=0"

 

Le signet scripté suivant lance une vidéo à partir d'un instant précis:

vidéo youtube start
javascript:document.location='https://youtu.be/' + document.location.href.match( /[&?]v=([^&#]*)/i)[1]+"?t=30"

 

bookmarklet: raccourcis clavier de YouTube

Les raccourcis clavier sont présents sur certains boutons du lecteur vidéo de youtube. Ils sont également inscrits dans les paramètres de l'utilisateur connecté sous raccourcis clavier.

Il est possible d'utiliser ces raccourcis à l'aide d'un favoris scripté. Dans l'exemple suivant, la variable n représente une touche du clavier au format JavaScript (javascript key codes).

barre d'espace (lire et mettre en pause) var n = 32

m (désactiver et réactiver le son) var n = 77

j (revenir de 10 secondes en arrière) var n = 74

l (avancer de 10 secondes) var n = 76

, (lorsque la vidéo est en pause, afficher l'image suivante) var n = 188

. (lorsque la vidéo est en pause, afficher l'image précédente) var n = 190

f (plein écran) var n = 70

c (activer et désactiver les sous-titres) var n = 67

i (lecteur réduit) var n = 73

t (mode théâtre) var n = 84

0 (redémarrer la vidéo depuis le début) var n = 48

1 à 9 (avancer par palier de 10%) var n = 49 à 57

o (alterner entre les différents niveaux d'opacité du texte des sous titres) var n = 79

w (alterner entre les différents niveaux d'opacité de la fenêtre des sous titres) var n = 87

escape (fermer le lecteur réduit) var n = 27

raccourci clavier youtube
javascript:(function(){var n=77;e=document.createEvent('Event');e.initEvent('keydown', true, false);e.key=String.fromCharCode(n);e.which = n;e.keyCode=n;e.charCode=n;document.getElementsByTagName('BODY')[0].dispatchEvent(e);})();

Pour modifier le comportement du bookmarklet, il faut changer la valeur de la variable n.

 

L'autre solution pour modifier les paramètres du lecteur vidéo est d'utiliser l'API de youtube.

durée de la vidéo
javascript:y=document.getElementById("movie_player");alert(y.getDuration())

renvoie le temps actuel de la vidéo
javascript:y=document.getElementById("movie_player");alert(y.getCurrentTime())

retourne l'état du player
javascript:y=document.getElementById("movie_player");alert(y.getPlayerState())

affiche la vidéo suivante
javascript:y=document.getElementById("movie_player");y.nextVideo()

affiche la vidéo précédente
javascript:y=document.getElementById("movie_player");y.previousVideo()

affiche la troisième vidéo de la playlist
javascript:y=document.getElementById("movie_player");y.playVideoAt(3)

règle le volume du son à 60
javascript:y=document.getElementById("movie_player");y.setVolume(60)

obtenir l'url de la vidéo
javascript:y=document.getElementById("movie_player");alert(y.getVideoUrl())

bookmarklet: google agenda

Google agenda est une application qui permet de créer des événements et des agendas.

Ces deux script automatise des tâches sur  google agenda.

création d'un événement dans l'agenda
javascript:(function(){x=prompt("description de l'événement:");
let y='https://www.google.com/calendar/event?action=TEMPLATE&text='+encodeURIComponent(x)+'&dates=';window.open(y)})();

création d'un nouvel agenda
javascript:window.open("https://calendar.google.com/calendar/r/settings/createcalendar?action=TEMPLATE");

combiner des bookmarklets

La combinaison de bookmarklet réduit la place utilisée dans la barre de favoris.

 

Ce signet réunit deux fonctions, scroll top et scroll down:

bookmarklet scroll top down
javascript:var x;var y;var z;x =document.documentElement.scrollHeight;y =document.documentElement.clientHeight;w =window.scrollY;z = x-y;if (w==0 || w>0 && w<z-1){;window.scroll(0, z);};if (w>z-1){;window.scroll(0, 0);}

 

Cet applisignet destiné à la plateforme youtube, remplit deux rôles, play et pause. Il joue ou met sur pause la vidéo. Si la vidéo n'a pas été lancée ou si elle est arrêtée après lecture complète, le favori lance la lecture de la vidéo:

youtube play pause
javascript:y=document.getElementById("movie_player");var x= y.getPlayerState();if (x==1) {;y.pauseVideo();}else if (x==2||x==0||x==-1) {;y.playVideo();}

 

Ce favelet youtube, active ou désactive le son de la vidéo:

youtube mute unmute
javascript:y=document.getElementById("movie_player");var x=y.isMuted();if (x){;y.unMute();} else {;y.mute();}