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

एक फ़ेविकॉन ("फ़ेवरेट आइकॉन" का छोटा नाम) एक छोटा आइकॉन होता है, जो ब्राउज़र के पता बार में दिखता है. आम तौर पर, फ़ेविकॉन का इस्तेमाल वेबसाइटों की पहचान करने और उन्हें अलग दिखाने के लिए किया जाता है. इस लेख में, Manifest 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"],
  ...
}

फ़ेविकॉन को आपके एक्सटेंशन के ऑरिजिन में मौजूद संसाधन माना जाता है. इन्हें वेब पर दिखाने के लिए, आपको इन्हें वेब पर ऐक्सेस किए जा सकने वाले संसाधनों के तौर पर घोषित करना होगा. ऐसा तब भी करना होगा, जब आपको इन्हें कॉन्टेंट स्क्रिप्ट से किसी वेब पेज में इंजेक्ट करना हो. उदाहरण के लिए:

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

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

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

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

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