chrome:// favicon可靠地在Chrome扩展程序中获得favicon？

Question

我正在使用chrome://favicon/我的Google Chrome扩展程序获取RSS Feed的favicon.我所做的是获取链接页面的基本路径,并将其附加到chrome://favicon/http://<domainpath>.

它的工作真的不可靠.很多时候它报告标准的"no-favicon" - 图标,即使页面确实有图标.关于该chrome://favicon机制的文档几乎有0个,因此很难理解它是如何工作的.它只是访问过的链接缓存吗？是否可以检测是否有图标？

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

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

Answer 1

我也看到了这个问题,这真的很讨厌.

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

因此,如果可以,可能只是刷新页面,您在向用户显示图标之前显示图标可以作为修复.

在我的用例中,我实际上打开了我想从中获取favicons的标签.到目前为止,我发现获得它们的最可靠方法看起来大致如下:

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);
    });
}

使用delay = 100,此方法在新URL的大约95%的时间内返回正确的favicon.如果你可以接受它,增加延迟将提高可靠性(我使用1500ms用于我的用例,它在新URL上错过了<1%的时间;当同时打开许多选项卡时,这种可靠性会恶化).显然,这是一种非常不精确的工作方式,但它是迄今为止我已经想到的最好的方法.

另一种可能的方法是从http://www.google.com/s2/favicons?domain=somedomain.com中提取favicons .我不太喜欢这种方法,因为它需要访问外部网络,依赖于无法保证启动的服务,并且本身有些不可靠; 我看到它不一致地返回www.domain.com网址的"globe"图标,但只返回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

截至 2020 年 10 月，使用清单版本 3 的 Chrome 扩展似乎不再能够访问chrome://favicon/*URL。我还没有找到该消息所指的“专用 API”。

Manifest v3 及更高版本的扩展将无法访问 chrome://favicon 主机；相反，我们将提供专用的 API 权限和不同的 URL。这使得我们能够收紧 chrome:-scheme 的权限。

Answer 4

chrome://faviconurl 已弃用，取而代之的是带有清单 v3 的新 favicon API。

// manifest.json
{
  "permissions": ["favicon"]
}

// utils.js
function getFaviconUrl(url) {
  return `chrome-extension://${chrome.runtime.id}/_favicon/?pageUrl=${encodeURIComponent(url)}&size=32`;
}

来源：https://groups.google.com/a/chromium.org/g/chromium-extensions/c/qS1rVpQVl8o/m/qmg1M13wBAAJ

Answer 5

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

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

不要忘记向 Chrome 添加“权限”和“content_security_policy”。( /sf/answers/3381329591/ )

Answer 6

现在有Favicon Permission - Fetching favicons的官方文档。

添加favicon您的权限

{
  "name": "Favicon API in a popup",
  "manifest_version": 3,
  ...
  "permissions": ["favicon"],
  ...
}

访问图标 URL

对于我的简单情况：

const favIconUrl = `chrome-extension://${chrome.runtime.id}/_favicon/?pageUrl=${encodeURIComponent(url)}&size=32`;

从他们的例子来看：

function faviconURL(u) {
  const url = new URL(chrome.runtime.getURL("/_favicon/"));
  url.searchParams.set("pageUrl", u);
  url.searchParams.set("size", "32");
  return url.toString();
}

const img = document.createElement('img');
img.src = faviconURL("https://www.google.com") 
document.body.appendChild(img);

这也适用于 Chromium Edge，它会自动转换chrome-extension:// 为extension://

注意：在内容脚本中获取收藏夹图标时，必须将“_favicon/*”文件夹声明为 Web 可访问资源。例如：

  "web_accessible_resources": [
    {
      "resources": ["_favicon/*"],
      "matches": ["<all_urls>"],
      "extension_ids": ["*"]
    }
  ]