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:
- Exemple de pop-up Favicon
- Exemple de script de contenu Favicon