Récupérer des favicons

Un favicon (abréviation de "favori icon") est une petite icône qui s'affiche dans la barre d'adresse du navigateur. Les favicons sont généralement utilisées pour identifier et différencier les sites Web. Cet article explique comment récupérer le favicon d'un site Web dans une extension Manifest V3.

Accéder au favicon d'un site Web

Pour récupérer le favicon d'un site Web, vous devez créer l'URL suivante:

chrome-extension://EXTENSION_ID/_favicon/?pageUrl=EXAMPLE_URL&size=FAV_SIZE
EXTENSION_ID
ID de votre extension.
EXAMPLE_URL
URL du site Web du favicon.
FAV_SIZE
Taille du favicon. La taille la plus courante est 16 x 16 pixels.

Pour créer cette URL dans une extension Chrome, procédez comme suit:

Étape 1: Mettez à jour le fichier manifeste

Tout d'abord, vous devez demander l'autorisation "favicon" dans le fichier manifeste.

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

De plus, lors de la récupération de favicons dans les scripts de contenu, le dossier "_favicon/*" doit être déclaré en tant que ressource accessible sur le Web. Exemple :

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

Étape 2: Créez l'URL

La fonction suivante utilise runtime.getURL() pour créer une URL complète pointant vers le dossier "_favicon/". Elle renvoie ensuite une nouvelle chaîne représentant l'URL avec plusieurs paramètres de requête. Enfin, l'extension ajoute l'image au corps. 

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

Voici un exemple d'URL de favicon www.google.com de 32 pixels qui inclut un ID d'extension aléatoire:

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

Exemples d'extensions

Il y a deux exemples de favicons dans le dépôt chrome-extension-samples: