Recuperando íconos de página

Un ícono de página (abreviatura de "ícono de favoritos") es un pequeño ícono que se muestra en la barra de direcciones del navegador. Los íconos de página normalmente se usan para identificar y diferenciar sitios web. En este artículo, se describe cómo recuperar el favicon de un sitio web en una extensión de manifiesto v3.

Acceder al ícono de página de un sitio web

Para recuperar el favicon 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 tu extensión.
EXAMPLE_URL
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 × 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"],
  ...
}

Además, cuando se recuperan los íconos de favoritos en las secuencias de comandos de contenido, la carpeta "_favicon/*" debe declararse como un recurso accesible a través de 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 dirija 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(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 favicon de 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: