جارٍ جلب الرموز المفضّلة.

الرمز المفضّل (اختصار "رمز المفضلة") هو رمز صغير يظهر في شريط العناوين في المتصفّح. تُستخدم الرموز المفضّلة عادةً لتحديد مواقع الويب وتمييزها. توضّح هذه المقالة كيفية استرداد الرمز المفضّل لموقع ويب في إضافة Manifest V3.

الوصول إلى الرمز المفضّل لموقع ويب

لاسترداد الرمز المفضّل لموقع ويب، عليك إنشاء عنوان URL التالي:

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

EXTENSION_ID

رقم تعريف الإضافة

EXAMPLE_URL

عنوان URL لموقع الويب الذي يتضمّن الرمز المفضّل

FAV_SIZE

حجم الرمز المفضّل الحجم الأكثر شيوعًا هو 16 × 16 بكسل.

توضّح الخطوات التالية كيفية إنشاء عنوان URL هذا في إضافة Chrome:

الخطوة 1: تعديل ملف البيان

أولاً، عليك طلب إذن "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": ["*"]
    }
  ]
  ...
}

الخطوة 2: إنشاء عنوان URL

تستخدم الدالة التالية runtime.getURL() لإنشاء عنوان URL مؤهّل بالكامل يشير إلى المجلد "_favicon/". بعد ذلك، تعرض سلسلة جديدة تمثّل عنوان 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);

في هذا المثال، يكون عنوان URL للرمز المفضّل بحجم 32 بكسل لموقع www.google.com ويتضمّن رقم تعريف عشوائيًا للإضافة:

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

أمثلة على الإضافات

هناك مثالان على الرموز المفضّلة في مستودع chrome-extension-samples:

• مثال على نافذة منبثقة تتضمّن رمزًا مفضّلاً
• مثال على نص برمجي للمحتوى يتضمّن رمزًا مفضّلاً