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

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

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

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

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-sample रिपॉज़िटरी में दो फ़ेविकॉन के उदाहरण हैं: