網站小圖示 (「常用圖示」的縮寫) 是瀏覽器網址列中顯示的小圖示。網站小圖示通常用於識別及區分網站。 本文說明如何在 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"],
...
}
此外,在內容指令碼中擷取網站小圖示時,必須宣告 "_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 彈出式視窗範例。
- Favicon 內容指令碼範例。