发表新帖
发表新帖

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

后端 未结
关注
9 1872
有刺的猬
有刺的猬 2020-12-02 05:03

I\'ve made myself a bookmarklet, and it functions just fine, but when added to a toolbar in Opera or Firefox, it just takes on the default bookmark icon for the browser (a g

相关标签:
9条回答
  • 自闭症患者
    2020-12-02 05:15

    A bookmarklet uses the javascript:// schema and thus do not have a domain from which a favicon may be loaded.

    So, currently there is no way for you to provide a favicon for a bookmarklet. Think about it like this: remember the whole Javascript sandbox thing - where Javascript may not access anything outside the domain of the web page where it is running? Well a bookmarklet that needs to be tied in to whatever domain for the current page you are watching, cannot be also tied in to a favicon on your own web site.

    Update: According to Hans Schmucker's answer, there is a possibility to create a bookmarklet that when loaded by the browser into the bookmark menu it will generate an HTML document that has a favicon. The reasoning seems like it may work but I have yet to see something like this in action and my tests have came back negative.

    0 讨论(0)
  • 南旧
    2020-12-02 05:16

    It's possible to assign and modify favicon the favicon using javascript and canvas (see the amazing favicon game Defender of the Favicon). 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);
}

    What happens when a bookmarlet setting the favicon this way is clicked or saved ? I don't know but it could be nice to give it a try. Browser may save it ?

    0 讨论(0)
  • 被撕碎了的回忆
    2020-12-02 05:28

    So, this is not a full solution yet, but may be a step to a working direction.

    data: encoding of an icon in a data:-uri encoded html works, to my surprise.

    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

    Since this is <html>, we can run <script type="javascript"> in there too.

    For some bookmarklets this may already be more than enough. For others that'd like to modify the current page or at least get some info from it before opening a new tab, tough luck yet. I'll update this answer if I find a way to do that.

    0 讨论(0)
  • 北恋
    2020-12-02 05:31

    Heres a nice technique that almost does what you want.

    0 讨论(0)
  • 一生所求
    2020-12-02 05:32

    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).

    P.S. Security doesn't even play into it, icons can come from anywhere. There is no restriction.

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

    0 讨论(0)
  • 暖寄归人
    2020-12-02 05:34

    Here is how you can do this:

    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. Open Bookmarks Manager, click Organize dropdown, and select Export, save your bookmarks as html file.
    4. Open that html file in text editor.
    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. Copy the entire ICON tag
    2. In the same file find the bookmarklet you created, and insert the ICON tag you copied into your bookmarklet tag:

    <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. Save this file
    2. Return to Chrom Bookmarks Manager, click again Organize, and select Import
    3. Import HTML file you just edited, your bookmarklet now has a favicon.

    Basically the procedure is to get ICON attribute of a bookmark tag and insert it into bookmarklet tag

    0 讨论(0)
 看不清?
提交回复
热议问题