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

Фавикон (сокращение от «значок избранного») — это небольшой значок, который отображается в адресной строке браузера. Фавиконки обычно используются для идентификации и дифференциации веб-сайтов. В этой статье описывается, как получить значок веб-сайта в расширении 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"],
  ...
}

Кроме того, при получении значков в сценариях контента папка "_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(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);

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

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

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

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