可靠地在 Chrome 扩展程序中获取 favicon，chrome://favicon? [英] Reliably getting favicons in Chrome extensions, chrome://favicon?

问题描述

我在 Google Chrome 扩展程序中使用了 chrome://favicon/a> 获取 RSS 提要的图标.我所做的是获取链接页面的基本路径，并将其附加到 chrome://favicon/http://.

I'm using the chrome://favicon/ in my Google Chrome extension to get the favicon for RSS feeds. What I do is get the base path of linked page, and append it to chrome://favicon/http://<domainpath>.

它的工作非常不可靠.很多时候它报告标准的无收藏夹图标"图标，即使页面确实有收藏夹图标.关于 chrome://favicon 机制的文档几乎为 0，因此很难理解它的实际工作原理.它只是已访问过的链接的缓存吗?是否可以检测是否有图标?

It's working really unreliably. A lot of the time it's reporting the standard "no-favicon"-icon, even when the page really has a favicon. There is almost 0 documentation regarding the chrome://favicon mechanism, so it's difficult to understand how it actually works. Is it just a cache of links that have been visited? Is it possible to detect if there was an icon or not?

从一些简单的测试来看，它只是您访问过的页面的图标缓存.因此，如果我订阅了 dribbble.com 的 RSS 提要，它就不会在我的扩展程序中显示网站图标.然后，如果我访问 chrome://favicon/http://dribbble.com/ 它不会返回正确的图标.然后我在另一个选项卡中打开 dribbble.com，它在选项卡中显示它的图标，然后当我重新加载 chrome://favicon/http://dribbble.com/-tab 时，它会返回正确的图标.然后我打开我的扩展弹出窗口，它仍然显示标准图标.但是，如果我随后重新启动 Chrome，它会在任何地方看到正确的图标.

From some simple testing it's just a cache of favicons for pages you have visited. So if I subscribe to dribbble.com's RSS feed, it won't show a favicon in my extension. Then if I visit chrome://favicon/http://dribbble.com/ it won't return right icon. Then I open dribbble.com in another tab, it shows its icon in the tab, then when I reload the chrome://favicon/http://dribbble.com/-tab, it will return the correct favicon. Then I open my extensions popup and it still shows the standard icon. But if I then restart Chrome it will get the correct icon everywhere.

现在这只是一些基础研究，并没有让我更接近解决方案.所以我的问题是: chrome://favicon/ 是否是我正在做的事情的正确用例.有没有相关文件?它的预期行为是什么?

Now that's just from some basic research, and doesn't get me any closer to a solution. So my question is: Is the chrome://favicon/ a correct use-case for what I'm doing. Is there any documentation for it? And what is this its intended behavior?

推荐答案

我也见过这个问题，真的很讨厌.

I've seen this problem as well and it's really obnoxious.

据我所知，Chrome 会在您访问 URL 后填充 chrome://favicon/缓存(省略 URL 的 #hash 部分，如果有).它似乎通常在页面完全加载后 的某个时间填充此缓存.如果您尝试在相关页面完全加载之前访问 chrome://favicon/http://yoururl.com经常找回默认的地球图标".随后刷新您显示图标的页面将修复它们.

From what I can tell, Chrome populates the chrome://favicon/ cache after you visit a URL (omitting the #hash part of the URL if any). It appears to usually populate this cache sometime after a page is completely loaded. If you try to access chrome://favicon/http://yoururl.com before the associated page is completely loaded you will often get back the default 'globe icon'. Subsequently refreshing the page you're displaying the icon(s) on will then fix them.

因此，如果可以的话，可能只是在向用户显示图标之前刷新显示图标的页面可能会作为一种修复.

So, if you can, possibly just refreshing the page you're displaying the icons on just prior to displaying it to the user may serve as a fix.

在我的用例中，我实际上是打开要从中获取收藏夹图标的选项卡.到目前为止，我发现的最可靠的获取它们的方法大致如下:

In my use case, I am actually opening tabs which I want to obtain the favicons from. So far the most reliable approach I have found to obtain them looks roughly like this:

chrome.webNavigation.onCompleted.addListener(onCompleted);

function onCompleted(details)
{
    if (details.frameId > 0)
    {
        // we don't care about activity occurring within a subframe of a tab
        return;
    }

    chrome.tabs.get(details.tabId, function(tab) {
        var url = tab.url ? tab.url.replace(/#.*$/, '') : ''; // drop #hash
        var favicon;
        var delay;

        if (tab.favIconUrl && tab.favIconUrl != '' 
            && tab.favIconUrl.indexOf('chrome://favicon/') == -1) {
            // favicon appears to be a normal url
            favicon = tab.favIconUrl;
            delay = 0;
        }
        else {
            // couldn't obtain favicon as a normal url, try chrome://favicon/url
            favicon = 'chrome://favicon/' + url;
            delay = 100; // larger values will probably be more reliable
        }

        setTimeout(function() {
            /// set favicon wherever it needs to be set here
            console.log('delay', delay, 'tabId', tab.id, 'favicon', favicon);
        }, delay);
    });
}

这种方法在大约 95% 的时间为新 URL 返回正确的图标，使用延迟 = 100.如果您可以接受，则增加延迟会增加可靠性(我在我的用例中使用 1500 毫秒，它在新 URL 上的时间少于 1%；当同时打开许多选项卡时，这种可靠性会恶化).显然，这是一种非常不精确的使其工作的方法，但它是我迄今为止想出的最好的方法.

This approach returns the correct favicon about 95% of the time for new URLs, using delay=100. Increasing the delay if you can accept it will increase the reliability (I'm using 1500ms for my use case and it misses <1% of the time on new URLs; this reliability worsens when many tabs are being opened simultaneously). Obviously this is a pretty imprecise way of making it work but it is the best method I've figured out so far.

另一种可能的方法是从 http://www.google 拉取收藏夹图标.com/s2/favicons?domain=somedomain.com.我不太喜欢这种方式，因为它需要访问外网，依赖的服务无法保证上线，而且本身有些不可靠；我已经看到它不一致地返回 www.domain.com URL 的地球"图标，但只返回 domain.com 的正确图标.

Another possible approach is to instead pull favicons from http://www.google.com/s2/favicons?domain=somedomain.com. I don't like this approach very much as it requires accessing the external network, relies on a service that has no guarantee of being up, and is itself somewhat unreliable; I have seen it inconsistently return the "globe" icon for a www.domain.com URL yet return the proper icon for just domain.com.

希望这在某种程度上有所帮助.

Hope this helps in some way.

这篇关于可靠地在 Chrome 扩展程序中获取 favicon，chrome://favicon?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！