Favicons werden abgerufen

Ein Favicon (kurz für „Favoritensymbol“) ist ein kleines Symbol, das in der Adressleiste des Browsers angezeigt wird. Favicons werden in der Regel zur Identifizierung und Unterscheidung von Websites verwendet. In diesem Artikel wird beschrieben, wie Sie das Favicon einer Website in einer Manifest V3-Erweiterung abrufen.

Auf 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 der Erweiterung.
EXAMPLE_URL
Die URL der Favicon-Website.
FAV_SIZE
Die Größe des Favicons. Die gebräuchlichste Größe ist 16 × 16 Pixel.

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

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"],
  ...
}

Außerdem muss der Ordner "_favicon/*" beim Abrufen von Favicons in Inhaltsskripts als über das Web zugä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. Dann wird ein neuer String zurückgegeben, der die URL mit mehreren Abfrageparametern darstellt. Die Erweiterung hängt das Bild schließlich 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);

Dieses Beispiel ist eine www.google.com-Favicon-URL mit 32 px und einer zufälligen Erweiterungs-ID:

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

Beispiele für Erweiterungen

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