กำลังเรียกไอคอน 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 เป็นทรัพยากรภายใต้ต้นทางของส่วนขยาย หากต้องการแสดงไอคอน Fav บนเว็บ รวมถึงกรณีที่คุณจะแทรกลงในหน้าเว็บจาก สคริปต์เนื้อหา คุณต้องประกาศไอคอน Fav เป็น ทรัพยากรที่เข้าถึงได้ทางเว็บ เช่น

{
  "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(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);

ตัวอย่างนี้คือ URL ไอคอน Fav ขนาด 32 พิกเซลของ www.google.com ซึ่งมีรหัสส่วนขยายแบบสุ่ม

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

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

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

• ตัวอย่างป๊อปอัปไอคอน Fav
• ตัวอย่างสคริปต์เนื้อหาไอคอน Fav