กำลังเรียกไอคอน Fav

ไอคอน Fav (ย่อมาจาก "ไอคอนรายการโปรด") คือไอคอนขนาดเล็กที่แสดงในแถบที่อยู่ของเบราว์เซอร์ โดยปกติแล้ว ไอคอน Fav จะใช้เพื่อระบุและแยกความแตกต่างของเว็บไซต์ บทความนี้อธิบายวิธีดึงข้อมูลไอคอน Fav ของเว็บไซต์ในส่วนขยายไฟล์ Manifest V3

การเข้าถึงไอคอน Fav ของเว็บไซต์

หากต้องการดึงไอคอน Fav ของเว็บไซต์ คุณต้องสร้าง URL ต่อไปนี้

chrome-extension://EXTENSION_ID/_favicon/?pageUrl=EXAMPLE_URL&size=FAV_SIZE
EXTENSION_ID
รหัสส่วนขยาย
EXAMPLE_URL
URL เว็บไซต์ของไอคอน Fav
FAV_SIZE
ขนาดของไอคอน Fav ขนาดที่ใช้กันมากที่สุดคือ 16 x 16 พิกเซล

ขั้นตอนต่อไปนี้อธิบายวิธีสร้าง URL นี้ในส่วนขยาย Chrome

ขั้นตอนที่ 1: อัปเดตไฟล์ Manifest

ก่อนอื่น คุณต้องขอสิทธิ์ "favicon" ในไฟล์ Manifest

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

นอกจากนี้ เมื่อดึงข้อมูลไอคอน Fav ในสคริปต์เนื้อหา ต้องประกาศโฟลเดอร์ "_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 ไอคอน Fav ขนาด www.google.com 32 พิกเซลซึ่งมีรหัสส่วนขยายแบบสุ่ม:

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

ตัวอย่างส่วนขยาย

ตัวอย่างไอคอน Fav ในที่เก็บ chrome-extension-sample มีอยู่ 2 ตัวอย่าง ได้แก่