Mengambil favicon

Favicon (singkatan dari "ikon favorit") adalah ikon kecil yang ditampilkan di kolom URL browser. Favicon 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 perlu 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 di ekstensi Chrome:

Langkah 1: perbarui manifes

Pertama, Anda harus meminta izin "favicon" di 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/". Lalu, kueri ini menampilkan string baru yang mewakili URL dengan beberapa parameter kueri. Terakhir, ekstensi menambahkan gambar ke isi. 

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 www.google.com 32 piksel 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: