Récupérer des favicons

Un favicon (abréviation de "icône favorite") est une petite icône qui s'affiche dans la barre d'adresse du navigateur. Les icônes de favoris 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 la 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 de 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"],
  ...
}

En outre, lorsque vous récupérez des favicons dans des scripts de contenu, le dossier "_favicon/*" doit être déclaré comme une 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

Le dépôt chrome-extension-samples contient deux exemples de favicon: