正在擷取網站小圖示

網站小圖示 (favicon) 是顯示在瀏覽器網址列中的小圖示。網站通常會使用網站圖示來識別及區分網站。 本文說明如何在 Manifest V3 擴充功能中擷取網站的 Favicon。

存取網站的網站小圖示

如要擷取網站的網站小圖示，您必須建構下列網址：

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 存放區中有兩個網站小圖示範例：