optimisations.ch

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.

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.

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.

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)

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 + " ","titre de la vidéo: " + titre + " ", "mots clés: "+ keywords + " ", "description: "+ description + " ", "date de publication: "+ date + " ", "date de mise en ligne: "+ date_ligne + " ","chaîne: "+ channel + " ", "vidéo ID: "+ video + " ","url: "+ url + " ","durée: "+ time + " ", "genre: "+ genre + " ", "nombre de vues: "+ compteur + " ", "tag: "+ tag + " ");

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.

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.

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"