Favicons werden abgerufen

Ein Favicon (Kurzform für „Favoritensymbol“) ist ein kleines Symbol, das in der Adressleiste des Browsers angezeigt wird. Favicons werden in der Regel verwendet, um Websites zu identifizieren und voneinander zu unterscheiden. In diesem Artikel wird beschrieben, wie Sie das Favicon einer Website in einer Manifest V3-Erweiterung abrufen.

Auf das Favicon einer Website zugreifen

Um das Favicon einer Website abzurufen, müssen Sie die folgende URL erstellen:

chrome-extension://EXTENSION_ID/_favicon/?pageUrl=EXAMPLE_URL&size=FAV_SIZE
EXTENSION_ID
Die ID Ihrer Erweiterung.
EXAMPLE_URL
Die URL der Favicon-Website.
FAV_SIZE
Die Größe des Favicons. Die gängigste Größe ist 16 × 16 Pixel.

In den folgenden Schritten wird beschrieben, wie Sie diese URL in einer Chrome-Erweiterung erstellen:

Schritt 1: Manifest aktualisieren

Zuerst müssen Sie die Berechtigung "favicon" im Manifest anfordern.

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

Wenn Inhaltsscripts favicons abrufen, muss der Ordner "_favicon/*" außerdem als webzugängliche Ressource deklariert werden. Beispiel:

{
  "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": ["*"]
    }
  ]
  ...
}

Schritt 2: URL erstellen

Die folgende Funktion verwendet runtime.getURL(), um eine voll qualifizierte URL zu erstellen, die auf den Ordner "_favicon/" verweist. Anschließend wird ein neuer String zurückgegeben, der die URL mit mehreren Suchparametern darstellt. Schließlich hängt die Erweiterung das Bild an den Textkörper an. 

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

In diesem Beispiel ist eine www.google.com-URL für ein 32-Pixel-Favicon zu sehen, die eine zufällige Erweiterungs-ID enthält:

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

Beispiele für Erweiterungen

Im Repository chrome-extension-samples finden Sie zwei favicon-Beispiele: