واکشی فاویکون ها

فاویکون (مخفف "نماد مورد علاقه") یک نماد کوچک است که در نوار آدرس مرورگر نمایش داده می شود. فاویکون ها معمولا برای شناسایی و متمایز کردن وب سایت ها استفاده می شوند. این مقاله نحوه بازیابی فاویکون یک وب سایت در افزونه Manifest V3 را شرح می دهد.

دسترسی به فاویکون یک وب سایت

برای بازیابی فاویکون یک وب سایت، باید URL زیر را بسازید:

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

EXTENSION_ID

شناسه داخلی شما.

EXAMPLE_URL

آدرس وب سایت فاویکون.

FAV_SIZE

اندازه فاویکون. رایج ترین اندازه 16×16 پیکسل است.

مراحل زیر نحوه ساخت این 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 را بسازید

تابع زیر از runtime.getURL() برای ایجاد یک URL کاملا واجد شرایط با اشاره به پوشه "_favicon/" استفاده می کند. سپس یک رشته جدید نشان دهنده URL با چندین پارامتر پرس و جو برمی گرداند. در نهایت، پسوند تصویر را به بدنه اضافه می کند.

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);

این مثال یک نشانی وب فاویکون 32 پیکسلی www.google.com است که شامل شناسه برنامه افزودنی تصادفی است:

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

نمونه های پسوند

دو نمونه فاویکون در مخزن chrome-extension-samples وجود دارد:

• نمونه بازشو فاویکون
• نمونه اسکریپت محتوای فاویکون .