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

الرمز المفضّل (اختصار لكلمة "رمز المفضّل") هو رمز صغير يتم عرضه في شريط عناوين المتصفح. تُستخدم الرموز المفضّلة عادةً لتحديد المواقع الإلكترونية والتمييز بينها. توضّح هذه المقالة كيفية استرداد الرمز المفضّل لموقع إلكتروني في إضافة 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 للرمز المفضّل www.google.com بحجم 32 بكسل ويتضمّن رقم تعريف عشوائي للإضافة:

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

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

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