Un favicon (abréviation de "favorite icon") est une petite icône qui s'affiche dans la barre d'adresse du navigateur. Les favicons sont généralement utilisés 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 de 16 x 16 pixels.
La procédure suivante explique comment créer cette URL dans une extension Chrome :
Étape 1 : Mettez à jour le fichier manifeste
Vous devez d'abord demander l'autorisation "favicon" dans le fichier manifeste.
{
"name": "Favicon API in a popup",
"manifest_version": 3,
...
"permissions": ["favicon"],
...
}
Les favicons sont traités comme des ressources sous l'origine de votre extension. Pour les exposer sur le Web, y compris si vous les injectez dans une page Web à partir d'un script de contenu, vous devez les déclarer comme des ressources accessibles 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(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);
Cet exemple est une URL de favicon de 32 pixels pour www.google.com 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 favicons :