Pobieram favikony

Favikona (Skrót od „ulubionej ikony”) to mała ikona wyświetlana na pasku adresu przeglądarki. Favikony służą zwykle do identyfikowania i rozróżniania stron internetowych. Z tego artykułu dowiesz się, jak pobrać favikonę witryny za pomocą rozszerzenia platformy Manifest V3.

Dostęp do favikony strony internetowej

Aby pobrać favikonę witryny, musisz utworzyć taki adres URL:

chrome-extension://EXTENSION_ID/_favicon/?pageUrl=EXAMPLE_URL&size=FAV_SIZE
EXTENSION_ID
Identyfikator rozszerzenia.
EXAMPLE_URL
Adres URL strony favikony.
FAV_SIZE
Rozmiar favikony. Najbardziej popularny rozmiar to 16 x 16 pikseli.

Poniżej znajdziesz instrukcje tworzenia tego adresu URL w rozszerzeniu do Chrome:

Krok 1. Zaktualizuj plik manifestu

Najpierw poproś o uprawnienie "favicon" w pliku manifestu.

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

Dodatkowo podczas pobierania favikon w skryptach treści folder "_favicon/*" musi być zadeklarowany jako zasób dostępny w internecie. Na 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

Poniższa funkcja używa runtime.getURL() do utworzenia pełnego adresu URL wskazującego folder "_favicon/". Następnie zwraca nowy ciąg znaków reprezentujący adres URL z kilkoma parametrami zapytania. Na koniec rozszerzenie dodaje grafikę do treści. 

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);

Ten przykład to URL favikony o rozmiarze 32 pikseli w formacie 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 są 2 przykłady favikon: