फ़ेविकॉन फ़ेच किए जा रहे हैं

फ़ेविकॉन, ब्राउज़र के पता बार में दिखने वाला एक छोटा आइकॉन होता है. इसका पूरा नाम "पसंदीदा आइकॉन" होता है. फ़ेविकॉन का इस्तेमाल आम तौर पर, वेबसाइटों की पहचान करने और उनमें अंतर करने के लिए किया जाता है. इस लेख में, मेनिफ़ेस्ट V3 एक्सटेंशन में वेबसाइट का फ़ैविकॉन वापस पाने का तरीका बताया गया है.

किसी वेबसाइट के फ़ेविकॉन को ऐक्सेस करने का तरीका

किसी वेबसाइट का फ़ैविकॉन पाने के लिए, आपको यह यूआरएल बनाना होगा:

chrome-extension://EXTENSION_ID/_favicon/?pageUrl=EXAMPLE_URL&size=FAV_SIZE
EXTENSION_ID
आपके एक्सटेंशन का आईडी.
EXAMPLE_URL
फ़ेविकॉन की वेबसाइट का यूआरएल.
FAV_SIZE
फ़ेविकॉन का साइज़. आम तौर पर, इसका साइज़ 16 x 16 पिक्सल होता है.

नीचे दिए गए चरणों में इस यूआरएल को Chrome एक्सटेंशन में बनाने का तरीका बताया गया है:

पहला चरण: मेनिफ़ेस्ट अपडेट करना

सबसे पहले, आपको मेनिफ़ेस्ट में "favicon" अनुमति का अनुरोध करना होगा.

{
  "name": "Favicon API in a popup",
  "manifest_version": 3,
  ...
  "permissions": ["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": ["*"]
    }
  ]
  ...
}

दूसरा चरण: यूआरएल बनाना

नीचे दिया गया फ़ंक्शन, runtime.getURL() का इस्तेमाल करके "_favicon/" फ़ोल्डर पर ले जाने वाला, पूरी तरह क्वालिफ़ाइड यूआरएल बनाता है. इसके बाद, यह कई क्वेरी पैरामीटर के साथ यूआरएल को दिखाने वाली एक नई स्ट्रिंग दिखाता है. आखिर में, एक्सटेंशन इमेज को मुख्य हिस्से में जोड़ देता है. 

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

इस उदाहरण में, www.google.com 32 पिक्सल का फ़ैविकन यूआरएल दिया गया है. इसमें एक रैंडम एक्सटेंशन आईडी शामिल है:

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

एक्सटेंशन के उदाहरण

chrome-extension-samples रिपॉज़िटरी में, फ़ैविकॉन के दो उदाहरण हैं: