Recupero favicon in corso...

Una favicon (abbreviazione di "icona preferita") è una piccola icona che viene visualizzata nella barra degli indirizzi del browser. Le favicon vengono generalmente 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 seguenti spiegano come creare questo URL in un'estensione di Chrome:

Passaggio 1: aggiorna il manifest

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

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

Inoltre, quando recupera le favicon negli script di contenuti, la cartella "_favicon/*" deve essere dichiarata come risorsa accessibile sul 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 seguente funzione utilizza runtime.getURL() per creare un URL completo che rimandi alla cartella "_favicon/". Quindi, 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 è un URL di favicon www.google.com da 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 ci sono due esempi di favicon: