正在获取网站图标

网站图标（“favorite icon”的缩写）是显示在浏览器地址栏中的小图标。网站图标通常用于识别和区分网站。 本文介绍了如何在 Manifest V3 扩展程序中检索网站的网站图标。

访问网站的网站图标

如需检索网站的网站图标，您需要构建以下网址：

chrome-extension://EXTENSION_ID/_favicon/?pageUrl=EXAMPLE_URL&size=FAV_SIZE
EXTENSION_ID
扩展程序的 ID。
EXAMPLE_URL
网站图标的网站的网址。
FAV_SIZE
网站图标的大小。最常见的尺寸为 16 x 16 像素。

以下步骤介绍了如何在 Chrome 扩展程序中构建此网址：

第 1 步：更新清单

首先，您必须在 清单 中请求 "favicon" 权限。

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

网站图标被视为扩展程序来源下的资源。如需将其公开到网络，包括您将从内容脚本将其注入网页的情况，您必须将其声明为可供网络访问的资源。例如：

{
  "name": "Favicon API in content scripts",
  "manifest_version": 3,
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "permissions": ["favicon"],
  "web_accessible_resources": [
    {
      "resources": ["_favicon/*"],
      "matches": ["<all_urls>"],
      "extension_ids": ["*"]
    }
  ]
  ...
}

第 2 步：构建网址

以下函数使用 runtime.getURL() 创建指向 "_favicon/" 文件夹的完全限定网址。然后，它会返回一个新字符串，表示包含多个查询参数的网址。最后，扩展程序会将图片附加到正文中。

function faviconURL(u) {
  const url = new URL(browser.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);

此示例是一个 www.google.com 32 像素网站图标网址，其中包含随机扩展程序 ID：

chrome-extension://eghkbfdcoeikaepkldhfgphlaiojonpc/_favicon/?pageUrl=https%3A%2F%2Fwww.google.com&size=32

扩展程序示例

chrome-extension-samples 代码库中有两个网站图标示例：