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

একটি ফেভিকন ("প্রিয় আইকন" এর জন্য সংক্ষিপ্ত) একটি ছোট আইকন যা ব্রাউজারের ঠিকানা বারে প্রদর্শিত হয়। ফেভিকনগুলি সাধারণত ওয়েবসাইটগুলি সনাক্ত করতে এবং আলাদা করতে ব্যবহৃত হয়। এই নিবন্ধটি বর্ণনা করে কিভাবে একটি ম্যানিফেস্ট V3 এক্সটেনশনে একটি ওয়েবসাইটের ফেভিকন পুনরুদ্ধার করা যায়।

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

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

chrome-extension://EXTENSION_ID/_favicon/?pageUrl=EXAMPLE_URL&size=FAV_SIZE
EXTENSION_ID
আপনার এক্সটেনশনের আইডি।
EXAMPLE_URL
ফেভিকনের ওয়েবসাইটের URL।
FAV_SIZE
ফেভিকনের আকার। সবচেয়ে সাধারণ আকার হল 16 x 16 পিক্সেল।

নিম্নলিখিত ধাপগুলি বর্ণনা করে কিভাবে একটি Chrome এক্সটেনশনে এই URLটি তৈরি করতে হয়:

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

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

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

নিম্নলিখিত ফাংশনটি "_favicon/" ফোল্ডারের দিকে নির্দেশ করে একটি সম্পূর্ণ-যোগ্য URL তৈরি করতে 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 32px ফেভিকন URL যা একটি র্যান্ডম এক্সটেনশন আইডি অন্তর্ভুক্ত করে:

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

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

ক্রোম-এক্সটেনশন-নমুনা সংগ্রহস্থলে দুটি ফ্যাভিকন উদাহরণ রয়েছে: