web-dev-qa-db-ja.com

ブックマークレットをツールバーにドラッグしたときにファビコン/アイコンを設定するにはどうすればよいですか？

私は自分でブックマークレットを作成しましたが、正常に機能しますが、OperaまたはFirefoxのツールバーに追加すると、ブラウザのデフォルトのブックマークアイコン（地球と私のサイトにはファビコンがあり、ウィンドウ、タブ、さらに[サイト]ブックマークも、指定したファビコンを使用しています。

ブックマークレットもファビコンを取得できるように、サイトまたはブックマークレットをどのようにコーディングできますか？

ユーザーがファビコンを事後に設定するために使用できるさまざまな手動ハッカー技術を知っていますが、それらは望ましくない解決策です。

browsericonsbookmarkletfavicon
107
Pistos

これを行う方法は次のとおりです。

  1. ブックマークレットをブックマークバーにドラッグします。
  2. その横に、ブックマークレットに使用するファビコンのサイトのブックマークを作成します。
  3. ブックマークマネージャーを開き、[整理]ドロップダウンをクリックし、[エクスポート]を選択して、ブックマークをHTMLファイルとして保存します。
  4. そのHTMLファイルをテキストエディターで開きます。
  5. 作成したばかりのbookmarkを見つけて、Gmailブックマークと言うと、次のようなHTMLコードが必要です。

_<DT><A HREF="http://mail.google.com/mail/u/0/#inbox" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABV0lEQVQ4jdWQzUoCYRiFnxl/0plso0IKX7mqXWCLIlq0qEW4d19Qi6BLCELwEgpvQbyAVrroCrSNUJFGAyrkEEEMNs5PCxtRHGsZneX7nedwzgd/LQngObfnykIQOj9Disd/BFxdZ3hVwtE0Mje3kuw9OJqGWSji1BtzYafeGHk0jTdzCIA8aXANA/O6hFWuzMBWuYJ5XcI1DF6MAY8fxmxAYHdnZK7WMAtFXF3H1XXMQhGrWsN2XR5WM/QGn2MmOBkQOj5CFoJhuTKe5DUzbJvW1jbWZhbqd/4BAIGDfSQhGH7XBehLMlruEGlFzEyTZy6AvL5G+PICWQja6iJaPu8L+zbw9B4MYpyeEB4MkF7782z+AZ1OD0WNkk4vA7AUi/HUav8eYNsOnW6XZCJBJLIwvieTcVQ1SrN5j2XbUwFTf9DpdkmnUlOwJ0VRyGY3UBVl7px/qi+cdYQvZvKCUwAAAABJRU5ErkJggg==">Gmail</A>_

  1. ICONタグ全体をコピーします
  2. 同じファイルで作成したブックマークレットを見つけ、コピーしたICONタグをbookmarkletタグに挿入します。

<DT><A HREF="javascript:(function(){... bookmarklet JS code...})();" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABV0lEQVQ4jdWQzUoCYRiFnxl/0plso0IKX7mqXWCLIlq0qEW4d19Qi6BLCELwEgpvQbyAVrroCrSNUJFGAyrkEEEMNs5PCxtRHGsZneX7nedwzgd/LQngObfnykIQOj9Disd/BFxdZ3hVwtE0Mje3kuw9OJqGWSji1BtzYafeGHk0jTdzCIA8aXANA/O6hFWuzMBWuYJ5XcI1DF6MAY8fxmxAYHdnZK7WMAtFXF3H1XXMQhGrWsN2XR5WM/QGn2MmOBkQOj5CFoJhuTKe5DUzbJvW1jbWZhbqd/4BAIGDfSQhGH7XBehLMlruEGlFzEyTZy6AvL5G+PICWQja6iJaPu8L+zbw9B4MYpyeEB4MkF7782z+AZ1OD0WNkk4vA7AUi/HUav8eYNsOnW6XZCJBJLIwvieTcVQ1SrN5j2XbUwFTf9DpdkmnUlOwJ0VRyGY3UBVl7px/qi+cdYQvZvKCUwAAAABJRU5ErkJggg==">MyBookmarklet</A>

  1. このファイルを保存
  2. Chrom Bookmarks Managerに戻り、もう一度[整理]をクリックして、[インポート]を選択します
  3. 編集したHTMLファイルをインポートします。ブックマークレットにfaviconが追加されました。

基本的に、手順はbookmarkタグのICON属性を取得し、bookmarklet 鬼ごっこ

enter image description here

15
monstro

Tapper [ware]とRestafarianサイトを読んだ後、私が思いつく最も簡単なソリューションを以下に示します。

<a href="javascript:

var title = window.location.href;

if (title.indexOf('http://yourwebsite/bookmarklet/') == 0) {
    '<head><link rel=\'shortcut icon\' href=\'favicon.ico\'></head>Bookmarklet';
} else {
    (function(){document.body.appendChild(document.createElement('script')).src='http://yourwebsite/bookmarklet.js';})();
}">Click Me!</a>

ChromeおよびFFで機能しますが、ブックマークバーにアイコンを保存するブラウザはFF4のみです。次のようになります。 http://cl.ly/ 5WNR

13
Brian McAllister

ブックマークレットにはドメインはありませんが、場所（ブックマークレット自体）があり、それにアイコンを割り当てることができます。その後は、ブラウザがどのようにアイコンを保存するかが問題になります（Firefoxはブックマークのアイコンを永久に保存します。他のブラウザではそれほど幸運ではないかもしれません）。

追伸セキュリティは関係なく、アイコンはどこからでも来ることができます。制限はありません。

http://www.tapper-ware.net/blog/?p=97 を参照してください

13
Hans Schmucker

Heresはほとんどあなたが望むものをする素晴らしいテクニックです。

私のMacでうまく動作しますが、Windows 7で動作させることができませんでした。

「絵文字」を使用しますか????。それらはUnicode文字であり、たまたまカラフルなアイコンのように見えます。事前に定義された画像のリストから選択するだけですが、実際には悪くありませんか????あなたがやろうとしているのは、ユーザーに見せるものを与えることだけですか????でブックマークレットの機能を思い出させます。

たとえば、「セキュリティキー」ブックマークレットを作成していますか????。だから私は使用しますか????ブックマークレット名に！ ????????

だから基本的にあなたは画像を見ますか????ブックマークバーで????

このサイトを使用して、ブックマークレットに適した絵文字を見つけてください。 http://emojipedia.org/symbols/

5
Theo

Javascriptとキャンバスを使用して、ファビコンにファビコンを割り当てて変更することができます（ファビコンの素晴らしいゲーム Defender of the Favicon ）。ゲームのソースコードは、それを行うのに役立ちます（基本的には、ソースの554行目に見られるように、キャンバスでtoDataUrl（）関数を使用することに依存しています）。

// set favicon
if( !stupidBrowser && useIcon )
{
     var    icon=$('favicon');
     (newIcon = icon.cloneNode(true)).setAttribute('href',ctx.canvas.toDataURL());
     icon.parentNode.replaceChild(newIcon,icon);
}

このようにファビコンを設定している小冊子をクリックまたは保存するとどうなりますか？わかりませんが、試してみるといいかもしれません。ブラウザで保存できますか？

3
Arnaud Rinquin

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イメージを使用することもできます。

制限があります。

  • クリックすると、現在のページを離れ、dataにページをロードします。したがって、現在のページとやり取りするブックマーレットには使用できず、別のページで実行できるコードにのみ使用できます。

  • コメントに//を使用しないでください。すべて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 style='background: -webkit-linear-gradient(top, #f4f8f9 0%, #e0f8ff 95%);'>
    <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! </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(()=>{            &#13
    alert('hello world');   /*Use this format for comments*/ &#13
    window.history.back();  &#13
},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ブックマークレットアイコンを取得するための回避策：

  • この回答で説明されているように、ブックマークバーのエクスポート、編集、およびインポートの再実行 https://superuser.com/questions/212722/how-can-i-add-a-favicon-to-a- bookmarklet-in-google-chrome

  • ブックマークレットを拡張機能に変えます。ブックマークレットではなくなりますが、同じ機能があります。これはあなたのためにそれを行う簡単なウェブサイトです http://sandbox.self.li/bookmarklet-to-extension/ そしてアイコンファイルをあなたが望むものに変更するだけです。これの欠点は、拡張機能がRAMを使用することです（単純なRAMの場合は約10MBですか？）。RAMがたくさんある場合は、それが解決策ではない可能性があります。また、ブックマークのようなテキストはなく、アイコンのみがあります。

3
aljgom

あなたのアイコンのようなブックマークレットアンカーでユニコード文字を使用することが可能な方法だと思います：

http://unicode-table.com/en/#cyrillic

考えられるすべての記号をふるいにかけ、目的のアイコンに似たキャラクターを見つけることができます

1
StefanoCudini

したがって、これはまだ完全な解決策ではありませんが、作業方向への一歩になる可能性があります。

data:data:- uriでエンコードされたHTMLのアイコンのエンコードは、驚いたことに動作します。

data:text/html;charset=utf-8, <title>Separator Tab</title><link rel="shortcut icon" href="data:image/png;base64,AAABAAEAEBAAAAEAIAAoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAD/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAA/5aWlv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAP+Wlpb/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAD/lpaW/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAA/5aWlv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAP+Wlpb/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAD/lpaW/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAA/5aWlv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAP+Wlpb/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAD/lpaW/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAA/5aWlv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAP+Wlpb/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAD/lpaW/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/5aWlv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACWlpb/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" /> Separator Tab

これは<html>なので、<script type="javascript">もそこで実行できます。

一部のブックマークレットでは、これですでに十分すぎる場合があります。現在のページを変更したい、または少なくとも新しいタブを開く前に情報を取得したい他の人にとっては、まだ幸運です。その方法を見つけた場合は、この回答を更新します。

1
Wizek