Wizekの提案に基づいて、コードを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>
そして、それらすべてをブックマークとして保存します。(お試しください!コードをタブバーにドラッグしてください)
残念ながら、それは特定の場合にのみ機能します(以下を参照)。
使い方:
(少なくともChromeでは)javascript: "<html>...your html code here, including a javascript tag that will run when loaded...</html>"
他のソリューションが提案しているようなフォーマットを使用するブックマークレットに似ています。その場合、現在表示しているページのHTMLはブックマークレットのHTMLに置き換えられますが、場所は同じままで、ブックマークレット自体には場所がないため、Chromeでファビコンを保存できません。
対照的に、data-uriブックマークを使用すると、別のページに移動します。ブックマークには独自の場所があり、ブラウザはファビコンを保存できます。ブックマークを同期すると、他のコンピュータからアクセスできる「ブラウザでWebサイトをホストする」と考えてください。すべてをローカルに保ちたい場合は、URLの代わりにファビコンにbase64イメージを使用することもできます。
制限があります。
クリックすると、現在のページを離れ、ページをロードします データにます。したがって、現在のページとやり取りするブックマーレットには使用できません。別のページで実行できるコードにのみ使用できます。
コメントに//を使用しないでください。すべて1行で保存されるため、/ ** /で囲み、セミコロンを忘れないでください。
FFではファビコンを保存しましたが、window.open()を使用したい場合は常にポップアップウィンドウを開くように設定できませんでした。データURLのデフォルトの動作を保存できないためです。
例として:
この手法を使用して、アイコンジェネレーターで小さなブックマークレットを作成しました。このコードをURLバーにドラッグ(またはブックマークとして保存)して使用できます。これは、コードとアイコン用の入力領域を備えたシンプルなページであり、アイコン付きのブックマークレットを生成します。
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>
別の例: Facebookメッセンジャーを独自の小さなウィンドウで開くブックマークレット(ブラウザーがデフォルトでポップアップをブロックしている場合は機能しない可能性があります)
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>
ブックマークレットアイコンを取得するための他のChromeの回避策: