Recuperando íconos de página

Un ícono de favoritos (abreviatura de "ícono de favoritos") es un ícono pequeño que se muestra en la barra de direcciones del navegador. Los íconos de página suelen usarse para identificar y diferenciar los 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
El ID de la extensión.
EXAMPLE_URL
La URL del sitio web del ícono de página
FAV_SIZE
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 construir 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"],
  ...
}

Además, cuando se recuperan íconos de página en secuencias de comandos de contenido, se debe declarar la carpeta "_favicon/*" como un recurso accesible desde 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: Construir la URL

La siguiente función usa runtime.getURL() para crear una URL completamente calificada que apunta a la carpeta "_favicon/". Luego, devuelve una nueva cadena 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(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);

Este ejemplo es una URL de ícono de página www.google.com de 32 px 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: