ফেভিকন ফেচ করা হচ্ছে

ফেভিকন (এটি "ফেভারিট আইকন"-এর সংক্ষিপ্ত রূপ) হল একটি ছোট আইকন যা ব্রাউজারের অ্যাড্রেস বারে দেখানো হয়। সাধারণত ওয়েবসাইট শনাক্ত করতে ও আলাদা করে চিনতে ফেভিকন ব্যবহার করা হয়। Manifest V3 এক্সটেনশনে কীভাবে কোনও ওয়েবসাইটের ফেভিকন ফিরিয়ে আনা যায় তা এই নিবন্ধে বর্ণনা করা হয়েছে।

ওয়েবসাইটের ফেভিকন অ্যাক্সেস করা

কোনও ওয়েবসাইটের ফেভিকন ফিরিয়ে আনতে, আপনাকে নিম্নলিখিত URL তৈরি করতে হবে:

chrome-extension://EXTENSION_ID/_favicon/?pageUrl=EXAMPLE_URL&size=FAV_SIZE

EXTENSION_ID

আপনার এক্সটেনশনের আইডি।

EXAMPLE_URL

ফেভিকনের ওয়েবসাইটের URL।

FAV_SIZE

ফেভিকনের সাইজ। সবচেয়ে সাধারণ সাইজ হল ১৬ x ১৬ পিক্সেল।

Chrome এক্সটেনশনে কীভাবে এই URL তৈরি করবেন তা নিম্নলিখিত ধাপগুলি থেকে জানতে পারবেন:

ধাপ ১: ম্যানিফেস্ট আপডেট করা

প্রথমে, আপনাকে মেনিফেস্টে "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": ["*"]
    }
  ]
  ...
}

ধাপ ২: URL তৈরি করুন

নিম্নলিখিত ফাংশন runtime.getURL() ব্যবহার করে "_favicon/" ফোল্ডারকে নির্দেশ করে এমন একটি সম্পূর্ণরূপে উপযুক্ত URL তৈরি করে। তারপরে, এটি একাধিক কোয়েরি প্যারামিটার সহ 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);

এই উদাহরণটি হল একটি www.google.com 32px ফেভিকন URL যাতে একটি র‍্যান্ডম এক্সটেনশন আইডি অন্তর্ভুক্ত থাকে:

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

এক্সটেনশনের উদাহরণ

chrome-extension-samples রিপোজিটরিতে দুটি ফেভিকন উদাহরণ আছে:

• ফেভিকন পপ-আপের উদাহরণ।
• ফেভিকন কন্টেন্ট স্ক্রিপ্ট-এর উদাহরণ।