如何在Chrome中获取书签图标？

Question

当我使用时：

<img src="chrome://favicon/http://www.google.com.hk"/>

我编写的扩展程序出现了问题，它提示:

"不允许加载本地资源: chrome://favicon/http://www.google.com.hk"

我该如何解决这个问题呢？

- Tom

---

为什么不直接将这个图像作为扩展资源添加呢？如果需要的话，您可以使用chrome.extension.getURL来调用它。 - Denys Séguret

不同的人有不同的书签。我怎么才能获取所有的图片呢？“www.googel.com”只是一个例子，我还想要其他的图标。 - Tom

你的意思是想获取特定 URL 的网站图标吗？ - Denys Séguret

如果是这样，您可以尝试在检查页面是否包含以下内容后获取http://thedomain.com/favicon.ico：<link rel="icon" type="image/png" href="../favicon.png"/>。我不会将其发布为答案，因为我猜您更喜欢更健壮的解决方案。这只是我的个人意见... - Denys Séguret

我认为从本地获取可能会更快，而我所需要的就是本地拥有的内容。我曾经看到有人完美地使用了这种方法。所以我想知道为什么在这里不起作用？ - Tom

Answer 1

请仔细检查是否已添加了"chrome://favicon/" 权限。

这是一个 "manifest_version" : 2 扩展程序吗？我不太熟悉，但它们可能需要您指定一个允许此操作的内容安全策略。

- Pixievolt No. 1

---

我已经添加了权限。但是我发现它只能在popup.html或其他属于扩展的页面中使用。但是我希望通过使用JS将其放入当前页面。 - Tom

@Tom: 是的，属于页面的任何元素都有该页面的权限。但是来自内容脚本的XMLHttpRequest，或者显示您扩展程序页面的iframe，可能能够检索到该网站的图标。也许。 - Pixievolt No. 1

Answer 2

我遇到了同样的问题。我尝试并发现chrome://favicon/只能与您的扩展程序创建的弹出窗口或选项卡等扩展程序页面一起使用。如果您在注入的内容脚本中加载它，则无法正常工作。

如果您想从注入的内容脚本中加载favicon，有几种方法：

1. 第一种方法是向某些服务请求获取网站的favicon。例如：http://www.google.com/s2/favicons?domain=https://stackoverflow.com/。这种方法很好用，但如果内容脚本被注入到通过https加载的页面中，则无法正常工作。原因是混合内容阻止。
2. 第二种方法是从chrome://favicon/后台加载favicon，然后传递给内容脚本。

例如：此函数用于在后台脚本中运行。

function fetchFavicon(url) {
    return new Promise(function(resolve, reject) {
        var img = new Image();
        img.onload = function () {
            var canvas = document.createElement("canvas");
            canvas.width =this.width;
            canvas.height =this.height;

            var ctx = canvas.getContext("2d");
            ctx.drawImage(this, 0, 0);

            var dataURL = canvas.toDataURL("image/png");
            resolve(dataURL);
        };
        img.src = 'chrome://favicon/' + url;
    });
}

我正在使用这种方法来编写我的扩展程序，它运行良好。请查看Super Focus Tabs扩展程序。

- user3444693

Answer 3

我曾遇到同样的问题，在Google开发者网站搜索后发现，您需要在manifest.json中添加一个权限，以访问chrome://favicon/。

然后只需转到chrome://extensions并按重新加载来读取清单更改即可。

注意：斜杠后面的反斜杠非常重要！

- Renārs Vilnis

Answer 4

自从MV3版本以后，您不能再使用chrome://favicon/。相反，您需要使用新的网站图标权限：

添加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);

注意：在内容脚本中获取网站图标时，"_favicon/*"文件夹必须声明为可访问的网络资源。例如：

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

- Luke Vo