Favicons ophalen

Een favicon (afkorting van "favorietpictogram") is een klein pictogram dat wordt weergegeven in de adresbalk van de browser. Favicons worden doorgaans gebruikt om websites te identificeren en te onderscheiden. In dit artikel wordt beschreven hoe u de favicon van een website kunt ophalen in een Manifest V3-extensie.

Toegang tot het favicon van een website

Om de favicon van een website op te halen, moet u de volgende URL construeren:

chrome-extension://EXTENSION_ID/_favicon/?pageUrl=EXAMPLE_URL&size=FAV_SIZE
EXTENSION_ID
De ID van uw extensie.
EXAMPLE_URL
De URL van de website van de favicon.
FAV_SIZE
De grootte van de favicon. Het meest voorkomende formaat is 16 x 16 pixels.

De volgende stappen beschrijven hoe u deze URL in een Chrome-extensie kunt construeren:

Stap 1: update het manifest

Eerst moet u de toestemming "favicon" in het manifest aanvragen.

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

Bovendien moet bij het ophalen van favicons in inhoudsscripts de map "_favicon/*" worden gedeclareerd als een webtoegankelijke bron . Bijvoorbeeld: 

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

Stap 2: construeer de URL

De volgende functie gebruikt runtime.getURL() om een ​​volledig gekwalificeerde URL te maken die naar de map "_favicon/" verwijst. Vervolgens retourneert het een nieuwe tekenreeks die de URL vertegenwoordigt met verschillende queryparameters. Ten slotte voegt de extensie de afbeelding toe aan het lichaam.

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

Dit voorbeeld is een favicon-URL van 32 pixels www.google.com met een willekeurige extensie-ID: 

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

Voorbeelden van uitbreidingen

Er zijn twee favicon-voorbeelden in de chrome-extension-samples- repository: