Получение значков сайтов

Значок сайта – это небольшое изображение, которое показывается в адресной строке браузера. Обычно значки используются для идентификации и различения сайтов. В этой статье рассказывается, как получить значок сайта в расширении Manifest V3.

Доступ к значку сайта

Чтобы получить значок сайта, создайте следующий URL:

chrome-extension://EXTENSION_ID/_favicon/?pageUrl=EXAMPLE_URL&size=FAV_SIZE
EXTENSION_ID
Идентификатор расширения.
EXAMPLE_URL
URL сайта, на котором размещен значок.
FAV_SIZE
Размер значка сайта. Чаще всего используется размер 16 x 16 пикселей.

Ниже описано, как создать такой URL в расширении Chrome.

Шаг 1. Обновите манифест

Сначала запросите разрешение "favicon" в манифесте.

{
  "name": "Favicon API in a popup",
  "manifest_version": 3,
  ...
  "permissions": ["favicon"],
  ...
}

Значки сайтов обрабатываются как ресурсы в источнике расширения. Чтобы сделать их доступными в интернете, в том числе если вы будете внедрять их на веб-страницу из скрипта контента, вы должны объявить их как ресурсы, доступные через Интернет. Пример:

{
  "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": ["*"]
    }
  ]
  ...
}

Шаг 2. Создайте URL

В следующей функции используется метод runtime.getURL() для создания полного URL, указывающего на папку "_favicon/". Затем он возвращает новую строку, представляющую URL с несколькими параметрами запроса. В конце расширение добавляет изображение в тело письма. 

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);

В этом примере показан URL значка сайта www.google.com размером 32 пикселя, который включает случайный идентификатор расширения:

chrome-extension://eghkbfdcoeikaepkldhfgphlaiojonpc/_favicon/?pageUrl=https%3A%2F%2Fwww.google.com&size=32

Примеры расширений

В репозитории chrome-extension-samples есть два примера значков сайтов: