可靠地在 Chrome 扩展程序中获取网站图标，chrome://favicon?

Question

我在Google Chrome extension 中使用chrome://favicon/ 来获取RSS 提要的图标。我所做的是获取链接页面的基本路径，并将其附加到chrome://favicon/http://<domainpath>。

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

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

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

Answer 1

我也看到过这个问题，它真的很讨厌。

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

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

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

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 上错过了

另一种可能的方法是从http://www.google.com/s2/favicons?domain=somedomain.com 中提取网站图标。我不太喜欢这种方法，因为它需要访问外部网络，依赖于无法保证启动的服务，并且本身有些不可靠；我看到它不一致地返回 www.domain.com URL 的“地球”图标，但只返回 domain.com 的正确图标。

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

Answer 2

为了在扩展中使用 chrome://favicon/some-site。 manifest.json 需要更新：

"permissions": ["chrome://favicon/"],
"content_security_policy": "img-src chrome://favicon;"

在版本 63.0.3239.132（官方构建）（64 位）上测试

Answer 3

我检查了 Chrome 历史页面中的网站图标，发现了这个更简单的方法。 您可以通过 --

获取 favicon url

favIconURL = "chrome://favicon/size/16@1x/" + tab.url;

不要忘记向 Chrome 添加“权限”和“内容安全策略”。 (https://stackoverflow.com/a/48304708/9586876)

Answer 4

在最新版本的 Chrome 中，Version 78.0.3904.87 (Official Build) (64-bit)) 测试时，将 img-src chrome://favicon; 添加为 content_security_policy 仍会显示 2 个警告：

'content_security_policy'：必须指定 CSP 指令 'script-src'（显式或通过 'default-src' 隐式指定）并且必须仅将安全资源列入白名单。

还有：

'content_security_policy'：必须指定 CSP 指令 'object-src'（显式或通过 'default-src' 隐式指定）并且必须仅将安全资源列入白名单。

要摆脱它们，请使用：

"permissions": ["chrome://favicon/"],
"content_security_policy": "script-src 'self'; object-src 'self'; img-src chrome://favicon;"

现在您可以使用chrome://favicon/http://example.com 而不会收到任何错误或警告。

Answer 5

As of Oct 2020，使用清单版本 3 的 chrome 扩展似乎不再能够访问 chrome://favicon/* 网址。我没有找到消息所指的“专用 API”。

Manifest v3 和更高版本的扩展将无法访问 chrome://favicon 主机；相反，我们将提供一个专用的 API 权限和不同的 URL。这导致能够 加强我们对 chrome:-scheme 的权限。