How to have favicon / icon set when bookmarklet dragged to toolbar?

我给自己做了一个书签工具，它的功能还不错，但是当它被添加到 Opera 或 Firefox 的工具栏时，它只是采用了浏览器的默认书签图标(分别是一个地球和一个星星)。我的网站有一个收藏夹图标，窗口、标签甚至[网站]书签都使用我指定的收藏夹图标。但不是我的书签。

我如何编码我的网站或书签小工具，使书签小工具得到图标，太？

我知道用户可以使用各种手工黑客技术来设置事后图标，但这些都是不受欢迎的解决方案。

33445 次浏览
小开

书签小工具使用 javascript://模式，因此没有可加载图标的域。

因此，目前还没有办法为书签小工具提供图标。你可以这样想: 还记得整个 Javascript 沙箱的事情吗——在那里 Javascript 不能访问运行它的网页域外的任何东西？一个需要绑定到当前页面的域名的书签小工具，不能绑定到你自己网站的图标上。

更新: 根据 Hans Schmuker 的回答，有可能创建一个书签工具，当浏览器将其加载到书签菜单中时，它将生成一个带有图标的 HTML 文档。理由似乎是它可能工作，但我还没有看到这样的东西在行动，我的测试结果为阴性。

小开

That's not quite right: A bookmarklet has no domain, but it has a location (which is the bookmarklet itself) and you can assign an icon to that. After that it's a matter of how the browser saves icons (Firefox saves a bookmark's icon permanently, you may not be so lucky with other browsers).

附注: 安全系统甚至不会参与其中，图标可以来自任何地方，没有任何限制。

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

小开

在阅读了 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

小开

It's possible to assign and modify favicon the favicon using javascript and canvas (see the amazing favicon game 明星队的守护者). The source code of the game will help you do that (it basically rely on use of toDataUrl() function on canvas as seen on line 554 of the source).

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

如果一个书签小程序以这种方式设置图标被点击或保存，会发生什么？我不知道，但是试一下也不错。浏览器可以保存吗？

小开

这里有一个不错的技巧，几乎可以做到你想要的。

在我的 Mac 上运行得很好，但是我无法让它在 Windows 7上运行。 something

使用“表情符号”空格。它们是 Unicode 字符，看起来也像彩色图标。您只能从预定义的图像列表中进行选择，但实际上如果您所做的一切都是为了给用户提供一些可查看的内容，以提醒他们书签工具的功能，那么这样做并不坏。

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

So basically you see the image🎑 in the bookmarks bar 😝

使用这个网站可以帮助你找到一个适合你的书签的表情符号: http://emojipedia.org/symbols/

小开

我认为一个可能的方法是在 bookmarklet 锚中使用 unicode 字符，就像你的图标一样:

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

sifting through all the possible symbols you might find the character that resembles more to the icon you want to

小开

基于 Wizek's suggestion，您可以将您的代码放入一个 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>

并将所有这些内容保存为书签(试试看！将代码拖动到标签栏中)

Unfortunately it only works for certain cases (more below).

工作原理:

(至少在 Chrome 中)它类似于书签小工具，使用 javascript: "<html>...your html code here, including a javascript tag that will run when loaded...</html>"格式，就像其他解决方案所建议的那样。在这种情况下，你在 将被取代页面上的 html 通过 bookmarklet 上的 html，但是 地点没变和 bookmarklet 本身仍然没有一个位置，所以 Chrome 不能为它保存一个收藏夹图标。

相比之下，使用 data-uri 书签 我们翻到另一页，它有自己的位置，浏览器可以为它保存一个图标。把它想象成“在你的浏览器中托管一个网站”，如果你同步你的书签，你就可以在其他电脑上访问它。如果希望保持所有内容都是本地的，还可以使用 base64图像代替 url 作为图标。

这是有局限性的。

  • When you click it, it leaves the current page and loads the page in the 资料. Therefore you won't be able to use it for bookmarlets that interact with the current page, only for code that you can execute in a different page.

  • 不要使用//作为评论。因为它们都将保存在一行中，所以将它们包装在/* */中，并且不要忘记使用分号

  • In FF it saved the favicon, but I was not able to set it to always open popup windows if I want to use window.open() because it doesn't allow me to save a default behaviour for data urls

As an example:

使用这种技术，我创建了一个带图标生成器的小书签工具。您可以将此代码拖动到 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>

Another Example: Bookmarklet to open Facebook messenger in it's own small window (如果您的浏览器默认阻止弹出窗口，可能无法工作)

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 工作区:

  • 导出书签栏，编辑它，然后再次导入它，正如在这个答案中所描述的那样。 < a href = “ https://superuser.com/questions/212722/how-can-i-add-a-Favicon-to-a-bookmarklet-in-google-chrome”> https://superuser.com/questions/212722/how-can-i-add-a-favicon-to-a-bookmarklet-in-google-chrome

  • 将 bookmarklet 转换为扩展。它将不再是一个书签工具，但它将具有相同的功能。这里有一个简单的网站，它为你做的 http://sandbox.self.li/bookmarklet-to-extension/，然后只是改变图标文件，你想要什么。这样做的缺点是扩展会占用内存(对于简单的扩展大约10mb)，如果你有很多和小公羊它可能不是你的解决方案。而且，你不会像书签一样有文本，只有图标。

小开

你可以这样做:

  1. Drag you bookmarklet to Bookmarks Bar.
  2. Next to it create a bookmark of a site which favicon you want to use for your bookmarklet.
  3. 打开书签管理器，单击“组织”下拉列表，并选择“导出”，将书签保存为 html 文件。
  4. 在文本编辑器中打开 html 文件。
  5. Find the bookmark you just created, lets say its Gmail bookmark, you should have an html code for it, that looks like this:

<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. 复制整个图标标签
  2. 在同一个文件中找到您创建的 bookmarklet，并将您复制的 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 文件 your bookmarklet now has a favicon。

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

enter image description here

小开

因此，这还不是一个完整的解决方案，但可能是朝着工作方向迈出的一步。

令我惊讶的是，data:-uri 编码的 html 中图标的 data:编码可以工作。

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">。

对于一些书签来说，这可能已经足够了。对于那些想要修改当前页面或者至少在打开新标签页之前从中获得一些信息的人来说，运气还真不好。如果我找到办法做到这一点，我将更新这个答案。


提交答案