Favikona (skrót od "favorite icon") to mała ikona wyświetlana na pasku adresu przeglądarki. Favikony są zwykle używane do identyfikowania i rozróżniania witryn. Z tego artykułu dowiesz się, jak pobrać favikonę witryny w rozszerzeniu Manifest V3.
Uzyskiwanie dostępu do favikony witryny
Aby pobrać favikonę witryny, musisz utworzyć ten adres URL:
chrome-extension://EXTENSION_ID/_favicon/?pageUrl=EXAMPLE_URL&size=FAV_SIZE
EXTENSION_ID- Identyfikator rozszerzenia.
EXAMPLE_URL- Adres URL witryny, której favikonę chcesz pobrać.
FAV_SIZE- Rozmiar favikony. Najpopularniejszy rozmiar to 16 x 16 pikseli.
Poniżej znajdziesz instrukcje tworzenia tego adresu URL w rozszerzeniu do Chrome:
Krok 1. Zaktualizuj plik manifestu
Najpierw musisz poprosić o uprawnienie "favicon" w pliku manifestu.
{
"name": "Favicon API in a popup",
"manifest_version": 3,
...
"permissions": ["favicon"],
...
}
Favikony są traktowane jako zasoby w ramach źródła rozszerzenia. Aby udostępnić je w internecie, w tym jeśli chcesz wstawić je na stronę internetową ze skryptu treści, musisz zadeklarować je jako zasoby dostępne w internecie. Przykład:
{
"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": ["*"]
}
]
...
}
Krok 2. Utwórz adres URL
Ta funkcja używa runtime.getURL(), aby utworzyć w pełni kwalifikowany adres URL wskazujący folder "_favicon/". Następnie zwraca nowy ciąg znaków reprezentujący adres URL z kilkoma parametrami zapytania. Na koniec rozszerzenie dołącza obraz do treści.
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);
Ten przykład to adres URL favikony o rozmiarze 32 pikseli z witryny www.google.com, który zawiera losowy identyfikator rozszerzenia:
chrome-extension://eghkbfdcoeikaepkldhfgphlaiojonpc/_favicon/?pageUrl=https%3A%2F%2Fwww.google.com&size=32
Przykłady rozszerzeń
W repozytorium chrome-extension-samples znajdziesz 2 przykłady favikon: