代码之家 › 专栏 › 技术社区 › Your Common Sense

当bookmarklet拖到工具栏时,如何设置favicon/图标?

favicon bookmarklet icons browser

105

Your Common Sense · 技术社区 · 15 年前

我为自己制作了一个bookmarklet,它的功能还不错,但是当添加到Opera或Firefox的工具栏上时,它只是呈现浏览器的默认书签图标(分别是一个地球仪和一个星星)。我的站点有一个favicon,窗口、选项卡甚至[site]书签都使用我指定的favicon。只是不是我的书签。

如何对我的站点或bookmarklet进行编码,使bookmarklet也获得favicon?

我知道用户可以使用各种手动黑客技术在事后设置favicon,但这些都是不受欢迎的解决方案。

9 回复 | 直到 15 年前

Guss 13 年前

bookmarklet使用 javascript://

所以,目前没有办法为bookmarklet提供favicon。这样想:还记得整个Javascript沙盒的事情吗?Javascript可能无法访问它运行的网页域之外的任何内容?一个bookmarklet需要绑定到当前页面的任何域,不能同时绑定到自己网站上的favicon。

Slava 8 年前

将bookmarklet拖到书签栏。
打开“书签管理器”,单击“组织”下拉列表,然后选择“导出”,将书签另存为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>

标签:

<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文件, 你的bookmarklet现在有了favicon

基本上,该过程是获取标记并将其插入 小书签 标签

Hans Schmucker 14 年前

这并不完全正确:bookmarklet没有域,但它有一个位置(即bookmarklet本身),您可以为它指定一个图标。之后,浏览器如何保存图标就成了问题(Firefox永久保存书签图标,其他浏览器可能就没那么幸运了)。

P.S.安全性甚至不起作用,图标可以来自任何地方。没有限制。

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

Brian McAllister 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

Sridhar Sarnobat 7 年前

在我的Mac上运行得很好,但在Windows7上无法运行。

使用“表情符号”。它们是Unicode字符,恰好看起来也像彩色图标。您只能从预定义的图像列表中进行选择,但实际上,如果您所要做的只是给用户一些可以查看的内容来提醒他们bookmarklet的功能,那就不错了。

例如,我正在制作一些“安全密钥”书签。所以我用我的bookmarklet名字!

所以基本上你可以在书签栏看到图片

http://emojipedia.org/symbols/

aljgom Miles 4 年前

基于 Wizek's suggestion

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中)它类似于bookmarklet使用的格式 javascript: "<html>...your html code here, including a javascript tag that will run when loaded...</html>" 就像其他解决方案所建议的那样。在这种情况下,您所在页面的html 通过bookmarklet的html,但是 位置保持不变 而bookmarklet本身仍然没有位置,因此Chrome无法为它保存favicon。

相反,使用数据uri书签 ,它有自己的位置,浏览器可以为它保存一个favicon。把它想象成“在你的浏览器中托管一个网站”,如果你同步你的书签,你就可以在其他计算机上访问它。如果您想将所有内容保持在本地,您还可以为favicon使用base64图像,而不是url。

当您单击它时,它将离开当前页面并将页面加载到数据 . 因此,不能将它用于与当前页面交互的bookmarlet,只能用于可以在不同页面中执行的代码。
不要用//作评论。因为它将全部保存在一行中,所以请用/**/将它们包装起来,并且不要忘记分号
在FF中,它保存了favicon,但是如果我想使用window.open(),我不能将它设置为总是打开弹出窗口,因为它不允许我保存数据URL的默认行为

例如:

使用这种技术,我创建了一个带有图标生成器的小Bookmarklet。您可以将此代码拖到您的URL栏中(或将其另存为书签)以使用它。这是一个简单的页面,有一个代码输入区和一个图标输入区,然后生成一个带有图标的bookmarklet

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>

另一个例子: 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>

获取bookmarklet图标的其他Chrome解决方法:

https://superuser.com/questions/212722/how-can-i-add-a-favicon-to-a-bookmarklet-in-google-chrome
将bookmarklet转换为扩展。它将不再是bookmarklet,但它将具有相同的功能。这里有一个简单的网站,为您做到这一点 http://sandbox.self.li/bookmarklet-to-extension/ 然后把图标文件改成你想要的。这样做的缺点是扩展会占用内存(对于简单的扩展大约10mb?),如果您有很多内存,而内存却很少,那么它可能不是您的解决方案。另外,你不会像书签里那样有文字,只有图标。

Arnaud Rinquin 12 年前

可以使用javascript和canvas在favicon中分配和修改favicon(参见神奇的favicon游戏) Defender of the Favicon

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

当一个bookmarlet这样设置favicon被点击或保存时会发生什么?我不知道,不过试试看也不错。浏览器可以保存吗?

stefcud 11 年前

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

通过筛选所有可能的符号,您可能会找到更像您想要的图标的字符

Wizek 8 年前

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

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"> 也在里面。

对于一些bookmarklet来说,这可能已经足够了。对于那些想修改当前页面或者至少在打开新标签页之前从中获取一些信息的人来说,运气还不错。如果我想办法的话,我会更新这个答案。