Recupero favicon in corso...

Un'icona favicon (abbreviazione di "icona preferita") è una piccola icona visualizzata nella barra degli indirizzi del browser. Le favicon vengono in genere utilizzate per identificare e differenziare i siti web. Questo articolo descrive come recuperare la favicon di un sito web in un'estensione Manifest V3.

Accesso alla favicon di un sito web

Per recuperare la favicon di un sito web, devi creare il seguente URL:

chrome-extension://EXTENSION_ID/_favicon/?pageUrl=EXAMPLE_URL&size=FAV_SIZE
EXTENSION_ID
L'ID dell'estensione.
EXAMPLE_URL
L'URL del sito web della favicon.
FAV_SIZE
Le dimensioni della favicon. Le dimensioni più comuni sono 16 x 16 pixel.

I passaggi riportati di seguito descrivono come creare questo URL in un'estensione di Chrome:

Passaggio 1: aggiorna il file manifest

Innanzitutto, devi richiedere l'autorizzazione "favicon" nel manifest.

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

Inoltre, quando ottieni le favicon negli script dei contenuti, la cartella "_favicon/*" deve essere dichiarata come risorsa accessibile tramite web. Ad esempio:

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

Passaggio 2: crea l'URL

La funzione seguente utilizza runtime.getURL() per creare un URL completo che rimandi alla cartella "_favicon/". Poi restituisce una nuova stringa che rappresenta l'URL con diversi parametri di query. Infine, l'estensione aggiunge l'immagine al corpo. 

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

Questo esempio è l'URL di una favicon www.google.com di 32 px che include un ID estensione casuale:

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

Esempi di estensioni

Nel repository chrome-extension-samples sono presenti due esempi di favicon: