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:
- Contoh pop-up Favicon.
- Contoh skrip konten faks.