Mengambil favicon

favicon (kependekan dari "favorite icon") adalah ikon kecil yang ditampilkan di kolom URL browser. Favikon biasanya digunakan untuk mengidentifikasi dan membedakan situs. Artikel ini menjelaskan cara mengambil favicon situs dalam ekstensi Manifes V3.

Mengakses favicon situs

Untuk mengambil favicon situs, Anda harus membuat URL berikut:

chrome-extension://EXTENSION_ID/_favicon/?pageUrl=EXAMPLE_URL&size=FAV_SIZE
EXTENSION_ID
ID ekstensi Anda.
EXAMPLE_URL
URL situs favicon.
FAV_SIZE
Ukuran favicon. Ukuran yang paling umum adalah 16 x 16 piksel.

Langkah-langkah berikut menjelaskan cara membuat URL ini dalam ekstensi Chrome:

Langkah 1: update manifes

Pertama, Anda harus meminta izin "favicon" dalam manifes.

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

Selain itu, saat mengambil favicon di skrip konten, folder "_favicon/*" harus dideklarasikan sebagai resource yang dapat diakses web. Contoh:

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

Langkah 2: buat URL

Fungsi berikut menggunakan runtime.getURL() untuk membuat URL yang sepenuhnya memenuhi syarat yang mengarah ke folder "_favicon/". Kemudian, metode ini menampilkan string baru yang mewakili URL dengan beberapa parameter kueri. Terakhir, ekstensi menambahkan gambar ke isi pesan. 

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

Contoh ini adalah URL favicon 32 piksel www.google.com yang menyertakan ID ekstensi acak:

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

Contoh ekstensi

Ada dua contoh favicon di repositori chrome-extension-samples: