Favicons werden abgerufen

Ein Favicon (kurz für „Favorite Icon“) ist ein kleines Symbol, das in der Adressleiste des Browsers angezeigt wird. Favicons werden in der Regel verwendet, um Websites zu identifizieren und 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

Wenn Sie das Favicon einer Website abrufen möchten, 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 Website des Favicons.
FAV_SIZE
Die Größe des Favicons. Die häufigste 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 im Manifest die "favicon" Berechtigung anfordern.

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

Favicons werden als Ressourcen unter dem Ursprung Ihrer Erweiterung behandelt. Wenn Sie sie im Web verfügbar machen möchten, auch wenn Sie sie über ein Content-Script in eine Webseite einfügen, müssen Sie sie als webzugängliche Ressourcen deklarieren. 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 fügt die Erweiterung das Bild dem Textkörper hinzu. 

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

Dieses Beispiel ist eine 32-Pixel-Favicon-URL für www.google.com mit einer zufälligen Erweiterungs-ID:

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

Erweiterungsbeispiele

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