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

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

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

หากต้องการเรียกข้อมูล Favicon ของเว็บไซต์ คุณต้องสร้าง 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"],
  ...
}
"tabs"

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

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

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

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