27.6.20

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.
bookmarklet icon
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.

26.6.20

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.

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

affiche deux pages dans le navigateur

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.

split screen

25.6.20

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)

bookmarklet email thisenvoyer 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');})();

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

favelet affiche les données d'une vidéo youtube

bookmarklet: youtube liste des vidéos

Ce bookmarklet génère et affiche une liste des vidéos d'une chaîne 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);}})()

bookmarklet youtube liste de vidéos

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.

24.6.20

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"

youtube video iframe