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

الرمز المفضّل (اختصار "الرمز المفضّل") هو رمز صغير يتم عرضه في شريط عناوين المتصفّح. تُستخدَم رموز الشارة المفضّلة عادةً لتحديد المواقع الإلكترونية وتمييزها. توضّح هذه المقالة كيفية استرداد رمز موقع إلكتروني في إضافة 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"],
  ...
}

بالإضافة إلى ذلك، عند جلب رموز التطبيقات المميّزة في نصوص برمجية للمحتوى، يجب الإفصاح عن مجلد "_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);

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

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

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

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

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