درحال واکشی نمادهای وب‌سایت

فاویکون (مخفف «نماد موردعلاقه») نماد کوچکی است که در نوار نشانی مرورگر نمایش داده می‌شود. نمادهای وب‌سایت معمولاً برای شناسایی و متمایز کردن وب‌سایت‌ها استفاده می‌شوند. این مقاله نحوه بازیابی نماد سایت وب در افزونه «مانیفست نسخه ۳» را شرح می‌دهد.

دسترسی به نماد وب‌سایت

برای بازیابی نماد وب‌سایت، باید نشانی وب زیر را بسازید:

chrome-extension://EXTENSION_ID/_favicon/?pageUrl=EXAMPLE_URL&size=FAV_SIZE
EXTENSION_ID
شناسه افزونه شما.
EXAMPLE_URL
نشانی وب وب‌سایت نماد وب‌سایت.
FAV_SIZE
اندازه نماد وب‌سایت. رایج‌ترین اندازه ۱۶ × ۱۶ پیکسل است.

مراحل زیر نحوه ساختن این نشانی وب در افزونه 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 ۳۲ پیکسلی است که حاوی شناسه افزونه تصادفی است:

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

نمونه‌های افزونه

دو نمونه نماد وب‌سایت در مخزن chrome-extension-samples وجود دارد: