正在擷取網站小圖示

網址圖示 (「favorite icon」的縮寫) 是顯示在瀏覽器網址列中的小圖示。書籤圖示通常用於識別及區分網站。本文說明如何在 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"],   ... }
敬上

此外，擷取內容指令碼中的網站小圖示時，必須將 "_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(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);

以下範例是包含隨機擴充功能 ID 的 www.google.com 32px 網站小圖示網址：

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

擴充功能範例

chrome-extension-samples 存放區中有兩個 favicon 範例：