如何在将bookmarklet拖动到工具栏时设置favicon /图标？

Question

如何在将bookmarklet拖动到工具栏时设置favicon /图标？

Pis*_*tos 107 browser favicon icons bookmarklet

我已经自己制作了一个书签,它的功能很好,但是当添加到Opera或Firefox的工具栏中时,它只需要浏览器的默认书签图标(分别是地球仪和星形).我的网站有一个图标,窗口,标签甚至[网站]书签都使用我指定的图标.只是不是我的书签.

如何编写我的网站或书签,以便书签也获得图标？

我知道用户可以使用各种手动hackery技术来设置favicon,但这些都是不合需要的解决方案.

Answer 1

Gus*_*uss 22

bookmarklet使用javascript://模式,因此没有可以加载favicon的域.

因此,目前您无法为书签提供图标.想想这样:记住整个Javascript沙箱的事情 - Javascript可能无法访问运行它的网页域外的任何内容？那么需要绑定到您正在观看的当前页面的任何域的书签,也不能与您自己网站上的图标相关联.

更新:根据Hans Schmucker的回答,有可能创建一个书签,当浏览器加载到书签菜单时,它将生成一个带有图标的HTML文档.推理似乎可能有用,但我还没有看到这样的事情在行动中,我的测试又回来了.

Answer 2

mon*_*tro 15

以下是如何执行此操作的方法:

将书签拖到书签栏.
在它旁边创建一个网站的书签,其中包含您想要用于书签的图标.
打开"书签管理器",单击"组织"下拉列表,然后选择"导出",将书签另存为html文件.
在文本编辑器中打开该html文件.
找到你刚刚创建的书签,让我们说它的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>

复制整个ICON标签
在同一文件中找到您创建的书签,并将您复制的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>

保存此文件
返回Chrom书签管理器,再次单击"组织",然后选择"导入"
导入您刚编辑的HTML文件,您的书签现在有一个图标.

基本上,该过程是获取书签标签的ICON属性并将其插入bookmarklet标签

（这是一个非常古老的问题，但是...）我正在寻找一种根本不需要任何最终用户操作的解决方案（除了将书签添加到工具栏）。即网站所有者可以做什么来指定图标。 (3认同)
对我来说，这是最好的答案。它有效并且解释全面。非常感谢。 (3认同)

Answer 3

小智 13

这不太正确:书签没有域,但它有一个位置(这是书签本身),你可以为它分配一个图标.之后,这是浏览器如何保存图标的问题(Firefox会永久保存书签的图标,对于其他浏览器,您可能不会那么幸运).

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

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

虽然推理听起来像它可能会起作用,但您在链接的博客中提供的示例只是生成一个文档,其中包含Firefox可能会或可能不会显示书签的图标,或实际上是在任意页面上运行Javascript的bookmarklet - 但不是两者(在Firefox 7上测试).我仍然不相信这项工作. (3认同)

Answer 4

小智 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>

Run Code Online (Sandbox Code Playgroud)

在Chrome和FF中效果很好,但FF4是唯一可以在书签栏中保存图标的浏览器.这是它的样子:http://cl.ly/5WNR

该链接不再起作用.有新链接吗？ (16认同)
我不懂.当您将书签拖动到收藏夹栏时(就像使用Delicious书签[这里](http://www.delicious.com/tools)),运行此代码的是什么？我不明白为什么书签会被点击(和代码运行),直到它被保存到收藏夹栏,即浏览器已经确定其图标后？ (5认同)

Answer 5

alj*_*gom 6

根据Wizek 的建议，您可以将代码放入数据 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>

Run Code Online (Sandbox Code Playgroud)

并将所有这些保存为书签。（试试吧！把代码拖到你的标签栏中）

不幸的是，它仅适用于某些情况（更多见下文）。

这个怎么运作：

（至少在 Chrome 中）它类似于使用javascript: "<html>...your html code here, including a javascript tag that will run when loaded...</html>"其他解决方案建议的格式的书签。在这种情况下，您所在页面的 html将被书签中的 html替换，但位置保持不变，书签本身仍然没有位置，因此 Chrome 无法为其保存图标。

相比之下，使用 data-uri 书签我们转到另一个页面，它有自己的位置，浏览器可以为它保存一个 favicon。将其视为“在浏览器中托管网站”，如果您同步书签，您就可以在其他计算机上访问该网站。如果您想将所有内容都保留在本地，您还可以为网站图标使用 base64 图像而不是 url。

它有局限性。

当您单击它时，它会离开当前页面并在data 中加载该页面。因此，您不能将它用于与当前页面交互的书签，只能用于可以在不同页面中执行的代码。
不要将 // 用于注释。由于所有内容都保存在一行中，请将它们包裹在 /**/ 中，并且不要忘记您的分号
在 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>

Run Code Online (Sandbox Code Playgroud)

另一个例子： Bookmarklet 在它自己的小窗口中打开 Facebook Messenger（如果您的浏览器默认阻止弹出窗口，则可能不起作用）

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>

Run Code Online (Sandbox Code Playgroud)

获取书签图标的其他 Chrome 解决方法：

导出书签栏，编辑它，然后再次导入，如本答案中所述https://superuser.com/questions/212722/how-can-i-add-a-favicon-to-a-bookmarklet-in-谷歌浏览器
将书签变成扩展。它不再是小书签，但具有相同的功能。这是一个简单的网站，可以为您完成http://sandbox.self.li/bookmarklet-to-extension/然后只需将图标文件更改为您想要的。这样做的缺点是扩展会占用内存（简单的大约 10 mb？），如果你有很多和很少的内存，它可能不是你的解决方案。此外，您不会像书签那样有文字，只有图标。

这只适用于 Chrome 和 Safari。不幸的是，不是 Mozilla。在我看来，小书签的目的是跨浏览器。 (2认同)

Answer 6

The*_*heo 5

这是一个很好的技术,几乎可以做你想要的.

在我的Mac✅上工作得很好,但我无法在Windows7上工作

使用"表情符号".它们是Unicode字符,恰好看起来像彩色图标.你只能从一个预定义的图像列表中进行选择,但实际上它并不坏,如果你想要做的就是给用户一些东西来提醒他们这些书签的作用.

例如,我正在制作一些"安全密钥"书签.所以我在我的bookmarklet名称中使用!

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

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

归档时间：	16 年，10 月前
查看次数：	27479 次
最近记录：	8 年，7 月前