Sur la base de la suggestion de Wizek, vous pouvez mettre votre code dans un data-uri.
data:text/html;charset=utf-8,
<html>
<link rel="shortcut icon" href="https://stackoverflow.com/favicon.ico">
<script type="text/javascript">
alert('It works!')
</script></html>
Et enregistrez tout cela sous forme de signet. ( Essayez-le! Faites glisser le code dans votre barre d'onglets)
Malheureusement, cela ne fonctionne que dans certains cas (plus ci-dessous).
Comment ça fonctionne:
(Au moins dans Chrome) C'est similaire à un bookmarklet utilisant le format javascript: "<html>...your html code here, including a javascript tag that will run when loaded...</html>"suggéré par d'autres solutions. Dans ce cas, le html de la page sur laquelle vous vous trouvez sera remplacé par le html du bookmarklet, mais l'emplacement reste le même et le bookmarklet lui-même n'aura toujours pas d'emplacement, donc Chrome ne peut pas enregistrer de favicon pour lui.
En revanche, avec un signet data-uri, nous allons à l'autre page , elle a son propre emplacement et le navigateur peut enregistrer un favicon pour elle. Considérez-le comme "Héberger un site Web dans votre navigateur", auquel vous pourrez accéder sur d'autres ordinateurs si vous synchronisez vos signets. Vous pouvez également utiliser une image base64 pour le favicon au lieu d'une URL si vous souhaitez que tout reste local.
Il a des limites.
Lorsque vous cliquez dessus, il quitte la page actuelle et charge la page dans les données . Par conséquent, vous ne pourrez pas l'utiliser pour les bookmarlets qui interagissent avec la page actuelle, uniquement pour le code que vous pouvez exécuter dans une page différente.
N'utilisez pas // pour les commentaires. Comme tout sera enregistré sur une seule ligne, enveloppez-les dans / ** / et n'oubliez pas vos points-virgules
Dans FF, il a enregistré le favicon, mais je n'ai pas été en mesure de le configurer pour toujours ouvrir les fenêtres contextuelles si je veux utiliser window.open () car il ne me permet pas d'enregistrer un comportement par défaut pour les URL de données
Par exemple:
En utilisant cette technique, j'ai créé un petit signet avec générateur d'icônes. Vous pouvez faire glisser ce code dans votre barre d'URL (ou l'enregistrer en tant que signet) pour l'utiliser. C'est une page simple avec une zone de saisie pour le code et pour une icône, puis génère un signet avec l'icône
data:text/html;charset=utf-8,<html><head>
<title>Bookmarklet With Icon Generator</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<link rel="shortcut icon" href="https://www.freefavicon.com/freefavicons/objects/plain-thumbs-up-152-237293.png">
</head>
<body>
<div class="container">
<div class="page-header">
<h2>Write your javascript and specify a favicon, then drag the button to your bookmarks bar</div>
</h2>
<a id="bookmarkbutton" href='' ondragend='this.click()' draggable="true" class="btn btn-primary btn-lg" role="button">
Drag me to your bookmarks bar! </a><br /><br />
<div>
<label for="fav_href">Favicon:</label>
<input id="fav_href" value='https://stackoverflow.com/favicon.ico' style='width:100%'></input> </div><br />
<div>
<label for='ta'>Write your JavaScript below</label>
<textarea id="ta" style="width:100%;height:50%">
setTimeout(()=>{ &%2313
alert('hello world'); /*Use this format for comments, use %2523 instead of hash (number sign)*/ &%2313
window.history.back(); &%2313
},200);
</textarea></div>
</div>
<script type = "text/javascript">
fav_href.onchange = ta.onchange = function(){
bookmarkbutton.href = 'data:text/html;charset=utf-8,<html><head>'+
'<link rel="shortcut icon" href="'+ fav_href.value +'">'+
'<script type="text/javascript"> '+ ta.value +'<\/script>';
};
ta.onchange();
</script>
</body>
Un autre exemple: Bookmarklet pour ouvrir Facebook Messenger dans sa propre petite fenêtre (peut ne pas fonctionner si votre navigateur bloque les fenêtres contextuelles par défaut)
data:text/html;charset=utf-8,
<html>
<link rel="shortcut icon" href="https://facebook.com/images/messengerdotcom/favicon/favicon.ico">
<script type="text/javascript">
url = 'https://www.messenger.com/';
w = 740; h = 700;
x = parseInt( screen.availWidth/2 - w/2 );
y = parseInt( screen.availHeight/2 - h/2 );
nw = window.open(url,'', 'width='+ w +',height='+ h +',top='+ y +',left='+ x);
nw.focus();
setTimeout(()=>{
window.history.back();
window.close();
},200);
</script>
Autres solutions de contournement Chrome pour obtenir des icônes de bookmarklet:
Exporter la barre de favoris, la modifier et la réimporter, comme décrit dans cette réponse /superuser/212722/how-can-i-add-a-favicon-to-a-bookmarklet-in- Google Chrome
Transformer le bookmarklet en extension. Ce ne sera plus un bookmarklet, mais il aura la même fonction. Voici un site Web simple qui le fait pour vous http://sandbox.self.li/bookmarklet-to-extension/ puis changez simplement le fichier icône en ce que vous voulez. L'inconvénient est que les extensions utilisent de la RAM (environ 10 Mo pour les simples?), Si vous avez beaucoup et peu de RAM, ce n'est peut-être pas la solution pour vous. De plus, vous n'aurez pas de texte comme dans un signet, seulement l'icône.
