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

发布于 2024-07-13 05:50:05 字数 229 浏览 9 评论 0原文

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

如何对我的网站或小书签进行编码,以便小书签也能获得网站图标?

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

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 globe and a star, respectively). My site has a favicon, and the window, tab and even [site] bookmark uses the favicon I've specified. Just not my bookmarklet.

How can I code my site or bookmarklet so that the bookmarklet gets the favicon, too?

I'm aware of various manual hackery techniques users can use to set the favicon after the fact, but those are undesirable solutions.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(9

未蓝澄海的烟 2024-07-20 05:50:05

执行此操作的方法如下:

  1. 将小书签拖到书签栏。
  2. 在它旁边创建一个站点的书签,该站点的图标将用于您的小书签。
  3. 打开书签管理器,单击组织下拉列表,然后选择导出,将书签保存为 html 文件。
  4. 在文本编辑器中打开该 html 文件。
  5. 找到您刚刚创建的书签,假设它是 Gmail 书签,您应该有一个 html 代码,如下所示:

Gmail

  1. 复制整个 ICON 标签
  2. 在同一文件中找到您创建的小书签,并将复制的 ICON 标签插入到您的小书签中标签:

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

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

在此处输入图像描述

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

enter image description here

用心笑 2024-07-20 05:50:05

小书签使用 javascript:// 架构,因此没有可以加载网站图标的域。

因此,目前您无法为小书签提供网站图标。 像这样思考一下:记住整个 Javascript 沙箱的事情 - Javascript 可能无法访问其运行的网页域之外的任何内容? 那么,需要绑定到您正在观看的当前页面的任何域的小书签,不能同时绑定到您自己网站上的网站图标。

更新:根据 Hans Schmucker 的回答,可以创建一个小书签,当浏览器将其加载到书签菜单中时,它将生成一个带有图标的 HTML 文档。 这个推理似乎可能有效,但我还没有看到类似的事情发生,而且我的测试结果呈阴性。

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.

ˇ宁静的妩媚 2024-07-20 05:50:05

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

After reading the tapper[ware] and Restafarian site, here's the simplest solution I could come up with:

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

Works great in Chrome and FF, but FF4 is the only browser that will save the icon in the bookmarks bar. Here's what it looks like: http://cl.ly/5WNR

百思不得你姐 2024-07-20 05:50:05

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

PS Security 甚至没有发挥作用,图标可以来自任何地方。 没有限制。

请参阅http://www.tapper-ware.net/blog/?p=97< /a>

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

梅窗月明清似水 2024-07-20 05:50:05

基于 Wizek 的建议您可以将代码放入 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>

并将所有这些保存为书签。 (尝试一下!将代码拖到选项卡栏中)

不幸的是,它仅适用于某些情况(更多信息见下文)。

工作原理:

(至少在 Chrome 中)它类似于使用 javascript 格式的书签:“...此处的 html 代码,包括将运行的 javascript 标记加载时..." 就像其他解决方案所建议的那样。 在这种情况下,您所在页面的 html将被小书签中的 html 替换,但位置保持不变并且小书签本身仍不会具有一个位置,以便 Chrome 无法为其保存网站图标。

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

它有局限性。

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

  • 不要使用//作为注释。 由于它们将全部保存在一行中,因此请将它们包装在 /**/ 中,并且不要忘记分号

  • 在 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>

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

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

Based on Wizek's suggestion you can put your code into a 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>

And save all of that as a bookmark. (Try it! drag the code into your tabs bar)

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

How It Works:

(At least in Chrome) It's similar to a bookmarklet using the format javascript: "<html>...your html code here, including a javascript tag that will run when loaded...</html>" like other solutions have suggested. In that case, the html from the page you are on will be replaced by the html from the bookmarklet, but the location remains the same and the bookmarklet itself will still not have a location so Chrome can't save a favicon for it.

In contrast, with a data-uri bookmark we go to the other page, it has it's own location, and the browser can save a favicon for it. Think of it as "Hosting a website in your browser", which you would be able to access in other computers if you sync your bookmarks. You can also use a base64 image for the favicon instead of a url if you want to keep everything local.

It has limitations.

  • When you click it, it leaves the current page and loads the page in the data. 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.

  • Don't use // for comments. Since it will all be saved in one line, wrap them in /**/ and don't forget your semicolons

  • 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:

Using this technique I created a small Bookmarklet With Icon Generator. You can drag this code into your URL bar (or save it as a bookmark) to use it. It's a simple page with an input area for code, and for an icon, and then generates a bookmarklet with the icon

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
(might not work if your browser blocks popups by default)

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>

Other Chrome workarounds for getting bookmarklet icons:

江心雾 2024-07-20 05:50:05

这是一个很好的技术,几乎可以满足您的要求。

Heres a nice technique that almost does what you want.????

Works great on my Mac✅, but I couldn't get it to work on Windows 7⃣.❌

Use "Emoji"????. They are Unicode characters, that happen to also look like colorful icons. You only get to choose from a predefined list of images, but actually its not bad???? if all you are trying to do is give the user something to look???? at to remind them of what the bookmarklet does.

For example, I'm making some "security key" bookmarklet????. So I use ???? in my bookmarklet name!
????????

So basically you see the image???? in the bookmarks bar ????

Use this site to help you find an Emoji that works for your bookmarklet: http://emojipedia.org/symbols/

谜泪 2024-07-20 05:50:05

可以使用 javascript 和 canvas 分配和修改 favicon(请参阅令人惊叹的 favicon 游戏Favicon 的捍卫者< /a>)。 游戏的源代码将帮助您做到这一点(它基本上依赖于画布上 toDataUrl() 函数的使用,如源代码第 554 行所示)。

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

当单击或保存以这种方式设置网站图标的书签时会发生什么? 我不知道,但尝试一下可能会很好。 浏览器可以保存吗?

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 ?

忱杏 2024-07-20 05:50:05

我认为一种可能的方法是在书签锚点中使用 unicode 字符,例如您的图标:

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

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

I think that a possible way is using unicode char in bookmarklet anchor like your icon:

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

临风闻羌笛 2024-07-20 05:50:05

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

令我惊讶的是,在 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

由于这是 ,我们也可以在其中运行

对于某些小书签来说,这可能已经足够了。 对于其他想要修改当前页面或至少在打开新选项卡之前从中获取一些信息的人来说,运气还不错。 如果我找到办法做到这一点,我会更新这个答案。

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文