Favicons ophalen

Een favicon (afkorting van 'favorite icon') is een klein icoon dat in de adresbalk van de browser wordt getoond. Favicons worden meestal gebruikt om websites te identificeren en van elkaar te onderscheiden. In dit artikel wordt beschreven hoe je het favicon van een website ophaalt in een Manifest V3-extensie.

Toegang tot de favicon van een website

Als je de favicon van een website wilt ophalen, maak je de volgende URL:

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

In de volgende stappen staat hoe je deze URL maakt in een Chrome-extensie:

Stap 1: Update het manifest

Vraag eerst het recht "favicon" aan in het manifest.

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

Favicons worden behandeld als bronnen onder de oorsprong van je extensie. Als je ze wilt blootstellen aan het web, ook als je ze in een webpagina injecteert vanuit een contentscript, moet je ze declareren als bronnen die toegankelijk zijn via het web. Voorbeeld:

{
  "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: Maak de URL

De volgende functie gebruikt runtime.getURL() om een volledig gekwalificeerde URL te maken die naar de map "_favicon/" verwijst. Daarna wordt een nieuwe tekenreeks geretourneerd die de URL met verschillende queryparameters vertegenwoordigt. Tot slot voegt de extensie de afbeelding toe aan de hoofdtekst. 

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

Dit voorbeeld is een favicon-URL van www.google.com 32 px die een willekeurige extensie-ID bevat:

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

Voorbeelden van extensies

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