Un ícono de página (abreviatura de "ícono de favoritos") es un ícono pequeño que se muestra en la barra de direcciones del navegador. Por lo general, los íconos de página se usan para identificar y diferenciar sitios web. En este artículo, se describe cómo recuperar el ícono de página de un sitio web en una extensión de Manifest V3.
Cómo acceder al ícono de página de un sitio web
Para recuperar el ícono de página de un sitio web, debes crear la siguiente URL:
chrome-extension://EXTENSION_ID/_favicon/?pageUrl=EXAMPLE_URL&size=FAV_SIZE
EXTENSION_ID- Es el ID de tu extensión.
EXAMPLE_URL- Es la URL del sitio web del ícono de página.
FAV_SIZE- Es el tamaño del ícono de página. El tamaño más común es de 16 x 16 píxeles.
En los siguientes pasos, se describe cómo crear esta URL en una extensión de Chrome:
Paso 1: Actualiza el manifiesto
Primero, debes solicitar el permiso "favicon" en el manifiesto.
{
"name": "Favicon API in a popup",
"manifest_version": 3,
...
"permissions": ["favicon"],
...
}
Los íconos de página se tratan como recursos en el origen de tu extensión. Para exponerlos a la Web, incluso si los inyectas en una página web desde una secuencia de comandos de contenido, debes declararlos como recursos accesibles para la Web. Por ejemplo:
{
"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": ["*"]
}
]
...
}
Paso 2: Crea la URL
La siguiente función usa runtime.getURL() para crear una URL completamente calificada que apunta a la carpeta "_favicon/". Luego, muestra una cadena nueva que representa la URL con varios parámetros de consulta. Por último, la extensión agrega la imagen al cuerpo.
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);
En este ejemplo, se muestra una URL de ícono de página de 32 px de www.google.com que incluye un ID de extensión aleatorio:
chrome-extension://eghkbfdcoeikaepkldhfgphlaiojonpc/_favicon/?pageUrl=https%3A%2F%2Fwww.google.com&size=32
Ejemplos de extensiones
Hay dos ejemplos de íconos de página en el repositorio chrome-extension-samples: