禁止加载本地资源：chrome://favicon/

Question

我尝试使用Chrome浏览器的网站图标链接加载一个URL的网站图标：

<img class='icon' src='chrome://favicon/yahoo.com' />

但我遇到了以下错误：

"Not allowed to load local resource: chrome://favicon/yahoo.com"

在清单文件中我有：

  "permissions": [
    "chrome://favicon/"
],

关于这个主题，网上没有太多相关的信息。有什么建议吗？

- Jonah Katz

---

你不能使用 <img class='icon' src='http://yahoo.com/favicon.ico' /> 的原因是什么？ - A. Rodas

@A.Rodas 是的，它速度较慢，如果没有网站图标，chrome://favicon 会返回默认图像。 - Jonah Katz

目前还没有支持这个功能：https://code.google.com/p/chromium/issues/detail?id=11854 - St. John Johnson

@JonahKatz：我知道这是一个旧的线程。但对于那些通过谷歌找到它的人来说，你的网站图标URL应该是chrome://favicon/https://www.yahoo.com/，然后它将与该权限行一起工作。换句话说，在您想要获取网站图标的URL中使用协议部分即可。 - ahmd0

Answer 1

你的代码存在问题

• "permissions": ["chrome://favicon/"]是清单文件中无效的模式。

如果想要使用标签页的URL favicon，请在扩展页面中使用chrome.tabs API。

演示

manifest.json

注册了背景页并添加了必要的权限。

{
    "name": "Fav Icon",
    "description": "https://dev59.com/TW7Xa4cB1Zd3GeqPoEzd",
    "version": "1",
    "manifest_version": 2,
    "background": {
        "scripts": [
            "background.js"
        ]
    },
    "permissions": [
        "tabs",
        "<all_urls>"
    ]
}

background.js

chrome.tabs.query({
    "active": true,//fetch active tabs
    "currentWindow": true,//fetch tabs in current window
    "status": "complete",//fetch completely loaded windows
    "windowType": "normal"//fetch normal windows
}, function (tabs) {
    for (tab in tabs) {
        console.log(tabs[tab].favIconUrl);// Use this URL as needed
    }
});

如果您想在内容脚本中使用chrome.tabs.query，请使用消息传递来通信URL。但是，如果您要在扩展程序页面中使用，则无需这样做。

参考资料

• chrome.tabs API
• 消息传递

- Sudarshan

---

我不确定这篇文章有多久了，但是"permissions": ["chrome://favicon/"]是一个完全有效的清单文件声明。实际上，它需要显示如下的URL：chrome://favicon/http://stackoverflow.com。 - ahmd0

Answer 2

URL需要包括方案：

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

- Josh Lee

---

你是在哪里尝试加载这张图片？它可能只能在后台页面或扩展窗口中工作。 - Josh Lee

我正在通过一个popup.js文件加载它。 - Jonah Katz

Answer 3

嗯，我知道这是一个旧帖子，但对于那些来寻找答案的人来说，为什么会显示成这样基本上是因为在你的mainfest.json中应该添加chrome://favicon/和chrome://favicon/*。

"permissions": ["chrome://favicon/", "chrome://favicon/*"]

注意：虽然 mainfest v3 将有专门的 API，但目前我们没有太多关于它的博客，而且 mainfest v2 将在 2023 年后不再受支持。

- myat myat

Answer 4

很遗憾，它不能像在清单v2中那样工作。你必须以不同的方式使用它。

方法1（懒惰）

https://www.google.com/s2/favicons?domain=https://stackoverflow.com/

方法二（官方）

manifest.json

  "permissions": [
    "favicon"
  ],

export const favicon = (pageUrl: string, size: number = 24) => {
  const url = new URL(`chrome-extension://${chrome.runtime.id}/_favicon/`);
  url.searchParams.append("pageUrl", pageUrl);
  url.searchParams.append("size", size.toString());

  return url.href;
};


favicon("https://stackoverflow.com/");

此外，为您的图像添加 loading="lazy" 属性，以防止大量请求。

- Profesor08

Answer 5

刚遇到了这个问题，两个

"permissions": ["chrome://favicon/"]

和

"permissions": ["chrome://favicon/*"]

都能正常工作。

Chrome 版本 52.0.2743.116

- Wizek

Answer 6

现在您可以使用 favicon 作为权限，通过 _favicon/?pageUrl=${url}&size=32 来加载图标

这里 是一个示例

- msaidzengin