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 di ekstensi Manifest 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 di ekstensi Chrome:

Langkah 1: update manifes

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

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

Favicon diperlakukan sebagai resource di origin ekstensi Anda. Untuk mengeksposnya ke web, termasuk jika Anda akan memasukkannya ke halaman web dari skrip konten, Anda harus mendeklarasikannya 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, fungsi ini menampilkan string baru yang mewakili URL dengan beberapa parameter kueri. Terakhir, ekstensi menambahkan gambar ke isi. 

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

Contoh ini adalah URL favicon www.google.com 32 px 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: