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


108

私は自分でブックマークレットを作成しましたが、正常に機能しますが、OperaまたはFirefoxのツールバーに追加すると、ブラウザのデフォルトのブックマークアイコン(それぞれ地球と星)になります。私のサイトにはファビコンがあり、ウィンドウ、タブ、および[サイト]ブックマークでさえ、私が指定したファビコンを使用しています。ブックマークレットだけじゃない。

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

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


例:Diigoにアイコンを取るためのブックマークレットを引き起こしOperaでブックマークレットをドラッグ:diigo.com/tools/diigolet
Pistos

あなたがリンクしているものは私にとってFirefoxではそれをしていません。
ベンラムリー、2009

ええ、IEでもそうではありません。しかし、それはオペラでそれをします。:)
ピストス

申し訳ありませんが、Opear 9.6を試してみましたが、Operaでも動作しません。
ガス

1
ここに解決策の提案があります:wiki.whatwg.org/wiki/Link_Icons
lapo

回答:


23

ブックマークレットはjavascript://スキーマを使用するため、ファビコンをロードできるドメインがありません。

そのため、現在、ブックマークレットにファビコンを提供する方法はありません。次のように考えてください。JavaScriptサンドボックス全体を覚えておいてください。Javascriptが実行されているWebページのドメインの外部にアクセスできない場合がありますか?まあ、あなたが見ている現在のページのどんなドメインにも結び付ける必要があるブックマークレットは、あなた自身のウェブサイトのファビコンに結び付けることもできません。

更新:Hans Schmuckerの回答によると、ブラウザによってブックマークメニューに読み込まれたときに、ファビコンを持つHTMLドキュメントを生成するブックマークレットを作成する可能性があります。推論はうまくいくように思えますが、私はまだこのようなものが実際に動作するのを目にしておらず、テストは否定的になりました。


17

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

  1. ブックマークレットをブックマークバーにドラッグします。
  2. その横に、ブックマークレットに使用するファビコンがあるサイトのブックマークを作成します。
  3. ブックマークマネージャを開き、[整理]ドロップダウンをクリックし、[エクスポート]を選択して、ブックマークをHTMLファイルとして保存します。
  4. そのHTMLファイルをテキストエディターで開きます。
  5. 作成したブックマークを見つけます。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タグをブックマークレットタグに挿入します。

<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ブックマークマネージャに戻り、もう一度[整理]をクリックして[インポート]を選択
  3. 編集したHTMLファイルをインポートすると、ブックマークレットにファビコンが追加されます

基本的手順は、のICON属性を取得することで、ブックマークのタグをとに挿入ブックマークレットタグ

ここに画像の説明を入力してください


1
(これは非常に古い質問ですが...)エンドユーザーのアクションをまったく必要としないソリューションを探していました(ツールバーにブックマークレットを追加する以外)。つまり、サイトの所有者がアイコンを指定するために何ができるか。
ピストス2016年

1
私にとっては、これが最良の答えです。それは機能し、包括的に説明されています。どうもありがとうございました。
tsuma534 2018

13

ブックマークレットにはドメインがありませんが、場所(ブックマークレット自体)があり、アイコンを割り当てることができます。その後は、ブラウザがアイコンを保存する方法の問題です(Firefoxはブックマークのアイコンを永続的に保存するため、他のブラウザではそれほど幸運ではない可能性があります)。

PS Securityはそれにさえ影響を与えません、アイコンはどこからでも来ることができます。制限はありません。

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


3
推論はうまくいくように聞こえるかもしれませんが、リンク先のブログで提供されている例では、Firefoxがブックマークに対して表示する場合と表示しない場合があるアイコンを使用してドキュメントを生成するか、実際には任意のページでJavaScriptを実行するブックマークレットですが、そうではありません両方(Firefox 7でテスト済み)。私はまだこの仕事を確信していません。
ガス、2011年

13

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


ブックマークレットについてもっと知りたいのですが、コードを初心者に少し説明してもらえますか?ありがとう
Andrew Mackenzie

承知しました。クリックすると、現在のページのURLがチェックされます。ブックマークレットが「ホスト」されているページ(4行目)にいる場合は、目的のファビコンを指すリンク要素がページに書き込まれます。これがブラウザに表示され、ファビコンがダウンロードされます。ブラウザはこれをキャッシュし、ブックマークバーのアイコンを使用します。他のページを表示している場合は、ブックマークレットが実行するはずの処理を実行します。
ブライアンマカリスター

5
わかりません。ブックマークレットをお気に入りバーにドラッグすると(ここで「デリシャスブックマークレット」の場合と同じように)、何がこのコードを実行しますか?ブックマークレットがお気に入りバーに保存されるまで、つまりブラウザがアイコンに落ち着くまで、ブックマークレットがクリックされる(そしてコードが実行される)理由がわかりません。
-dumbledad

6

ほんとうにあなたがやりたいことをする素晴らしいテクニックがあります。s

Mac✅でうまく動作しますが、Windows7⃣では動作しませんでした。❌

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

たとえば、「セキュリティキー」のブックマークレットを作成しています📖。ブックマークレットの名前にuseを使用しています。😃😊

つまり、ブックマークバーに画像🎑が表示されます😝

このサイトを使用して、ブックマークレットで機能する絵文字を見つけましょう。http//emojipedia.org/symbols/


1
「フォントにはこのコードポイント用のグリフがありません」というマークがたくさん表示されます。私がLinuxでFirefoxを使用していることを考えると、それはフォールバック動作がシステム上のどのフォントでそれらを見つけることができなかったことを意味します。ブロガーがWebデザイナーに回避するように言っているMac固有の絵文字グリフであると私は推測して正しいのですか?
ssokolow

うん。ただし、絵文字を表示できるコンピュータでクライアントが実行されていることがわかっている場合、絵文字を表示するのはそれほど悪いことですか。私が個人的に使用する場合、絵文字を出力するかどうかをユーザーが決定できるようにします。そうでない場合、私は何も出力しません。それらはプレーンテキストのみを取得します。
Theo

それを使用するWebデザイナーの無数の失敗をつまずくことができるソリューションであることを除けば、非Macシステムでビルドしたものを誰かが必然的にロードするとき(そうでない場合)に、私が作ることができる悪い印象を危険にさらすことはありません。
ssokolow 2012

これを一部は実用的な目的で、一部はエンターテイメントの価値のために賛成します。絵文字は人生のあらゆる問題の答えです!
Sridhar Sarnobat 2017

ヒント:このサイトを使用して、必要な絵文字をコピーして貼り付けます:emojipedia.org/upwards-black-arrow
Sridhar Sarnobat 2017

4

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の回避策:

  • この回答で説明されている、ブックマークバーのエクスポート、編集、および再度インポート /superuser/212722/how-can-i-add-a-favicon-to-a-bookmarklet-in-グーグルクローム

  • ブックマークレットを拡張機能に変える。これはブックマークレットではなくなりますが、同じ機能を持ちます。これは、http://sandbox.self.li/bookmarklet-to-extension/を実行する単純なWebサイトです。次に、アイコンファイルを必要なものに変更します。これの欠点は、拡張機能がRAMを使用することです(単純なものの場合、約10MB?)。RAMが多くて少ない場合は、解決策にならない場合があります。また、ブックマークのようなテキストはなく、アイコンのみになります。


1
これはChromeとSafariでのみ機能します。残念ながらMozillaではありません。ブックマークレットの目的は、クロスブラウザー、IMOです。
sijpkes 2018

これは機能した唯一のもののようなものです。聖なる牛、どうもありがとうございました。
Alex Beals

3

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

このようにファビコンを設定しているブックマーレットをクリックまたは保存するとどうなりますか?わからないけど、やってみるといいかも。ブラウザはそれを保存しますか?


1
(Chromeでテスト済み)解決策はありません。ブックマーレットを使用してファビコンを変更しても、同じ場所にいます。ブラウザーは現在のページのブックマークのアイコンを変更する可能性がありますが、ブックマーレットにアイコンを割り当てません。
aljgom 2017年

1

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

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

考えられるすべての記号をふるいにかけて、目的のアイコンに似ている文字を見つけることができます


1

したがって、これはまだ完全なソリューションではありませんが、作業方向へのステップになる可能性があります。

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">、そこでも。

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.