小书签拖到工具栏时如何设置图标/图标?

我自己做了一个小书签,它的function还不错,但是在Opera或者Firefox中添加到工具栏时,它只是浏览器的默认书签图标(分别是globe和star)。 我的网站有一个图标,窗口,标签,甚至[网站]书签使用我指定的图标。 只是不是我的小书签。

我如何编码我的网站或小书签,以便小书签也获取图标?

我知道用户可以使用各种手动hackery技术设置图标,但这些都是不理想的解决scheme。

小书签使用javascript://模式,因此没有可以加载favicon的域。

所以,目前你没有办法为bookmarklet提供一个favicon。 像这样想一想:记住整个Javascript沙箱的事情 – Javascript可能无法访问运行网页的域之外的任何东西? 那么,一个书签,需要绑定到当前页面的任何领域,你正在看,不能绑定到您自己的网站上的图标。

更新:根据Hans Schmucker的回答,有可能创build一个书签,当浏览器加载到书签菜单时,它将生成一个带有图标的HTML文档。 理由似乎可能会奏效,但我还没有看到这样的行动,我的testing回来了消极。

这是不正确的:一个书签没有域,但它有一个位置(这是书签本身),你可以指定一个图标。 之后,浏览器如何保存图标(Firefox永久保存书签图标,您可能不会对其他浏览器感到如此幸运)。

PS安全甚至不玩,图标可以来自任何地方。 没有限制。

http://www.tapper-ware.net/blog/?p=97

在阅读了Tapper和Restafarian网站之后,下面是我能想到的最简单的解决scheme:

 <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

这里是你如何做到这一点:

  1. 将书签拖到书签栏。
  2. 在它旁边创build一个网站的书签,您可以使用您的小书签。
  3. 打开书签pipe理器,单击组织下拉列表,然后select导出,将书签保存为html文件。
  4. 在文本编辑器中打开该文件。
  5. find你刚创build的书签 ,可以说它的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. 在同一个文件中find您创build的书签,然后将您复制的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书签pipe理器,再次单击组织,然后select导入
  3. 导入刚刚编辑的HTML文件, 您的书签现在有一个图标

基本上这个过程是获得书签标签的ICON属性并将其插入到书签标签中

在这里输入图像说明

这里有一个很好的技巧,几乎可以做你想做的事情

在我的Mac上很好用,但是我无法在Windows 7上运行

使用“表情符号”🈳。 他们是Unicode字符,碰巧也看起来像彩色图标。 你只能从预定义的图像列表中进行select,但实际上它并不坏,如果你正在试图做的是给用户一些东西来看看比赛,提醒他们书签的function。

例如,我正在制作一些“安全密钥”书签。 所以我在我的书签名中使用🔑 😃😊

所以基本上你会看到书签栏中的图像

使用本网站可以帮助您find适用于您的书签的表情符号: http : //emojipedia.org/symbols/

使用javascript和canvas可以分配和修改favicon图标(请参阅令人惊叹的favicon游戏“Favicon的Defender” )。 游戏的源代码将帮助你做到这一点(它基本上依赖于在canvas上使用toDataUrl()函数,如源554行所示)。

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

点击或保存以这种方式设置图标的bookmarlet会发生什么? 我不知道,但它可以很好地尝试。 浏览器可以保存吗?

根据Wizek的build议,你可以把你的代码放到一个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> 

并将所有这些保存为书签。 ( 试试吧,将代码拖到你的标签栏中)

不幸的是,它只适用于某些情况下(更多下面)。

怎么运行的:

(至less在Chrome中)它与使用javascript: "<html>...your html code here, including a javascript tag that will run when loaded...</html>"的书签类似javascript: "<html>...your html code here, including a javascript tag that will run when loaded...</html>"与其他解决scheme一样。 在这种情况下,来自您所在页面的html 将被小书签中的html replace ,但位置保持不变 ,小书签本身仍然没有位置,因此Chrome无法为其保存favicon。

相比之下,使用data-uri书签, 我们转到另一个页面 ,它有自己的位置,浏览器可以保存一个favicon。 把它想象成“在你的浏览器中托pipe一个网站”,如果你同步你的书签,你可以在其他计算机上访问它。 你也可以使用一个base64图像的favicon而不是一个url,如果你想保持一切本地。

它有局限性。

  • 当你点击它时,它会离开当前页面并加载数据中的页面。 因此,您将无法将其用于与当前页面交互的bookmarlet,只能用于您可以在不同页面中执行的代码。

  • 不要使用/ /评论。 由于它将全部保存在一行中,所以将它们包装在/ ** /中,并且不要忘记你的分号

  • 在FF它保存了图标,但我不能将其设置为总是打开popup窗口,如果我想使用window.open(),因为它不允许我保存数据url的默认行为


举个例子:

使用这种技术,我创build了一个带图标生成器的小书签。 您可以将其复制到您的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="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> 

另一个例子: Bookmarklet在它自己的小窗口中打开Facebook信使(如果您的浏览器默认阻止popup窗口,则可能不起作用)

 data:text/html;charset=utf-8, <html> <link rel="shortcut icon" href="https://facebook.comhttp://img.dovov.commessengerdotcom/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解决方法获取书签图标:

我认为,一个可能的方法是像书签一样使用unicode字符。

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

筛选所有可能的符号,您可能会发现类似于您想要的图标的字符

所以,这还不是一个完整的解决scheme,但可能是一个工作方向的一步。

data:一个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">

对于一些书签,这可能已经绰绰有余了。 对于其他想要修改当前页面的用户,或者在打开新标签之前至less从中获取一些信息,还是很难的。 我会更新这个答案,如果我find一个方法来做到这一点。