Recupero favicon in corso...

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

Accedere 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 della tua 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 seguenti passaggi descrivono 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"],
  ...
}

Le favicon vengono trattate come risorse nell'origine dell'estensione. Per esporle al web, anche se le inserisci in una pagina web da uno script di contenuti, devi dichiararle come risorse accessibili al 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 rimanda 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(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);

Questo esempio è un URL della favicon di 32 px di www.google.com 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 disponibili due esempi di favicon: