מאחזר סמלי אתרים

סמל אתר (קיצור של "סמל מועדפים") הוא סמל קטן שמוצג בסרגל הכתובות של הדפדפן. סמלי אתרים משמשים בדרך כלל לזיהוי ולהבחנה בין אתרים. במאמר הזה נסביר איך לאחזר סמל אתר בתוסף Manifest V3.

גישה לסמל אתר של אתר

כדי לאחזר את סמל האתר, עליכם ליצור את כתובת ה-URL הבאה:

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

EXTENSION_ID

מזהה התוסף שלכם.

EXAMPLE_URL

כתובת האתר של סמל האתר.

FAV_SIZE

גודל סמל האתר. הגודל הנפוץ ביותר הוא 16 x 16 פיקסלים.

השלבים הבאים מתארים כיצד ליצור את כתובת האתר הזו בתוסף ל-Chrome:

שלב 1: מעדכנים את המניפסט

קודם כול צריך לבקש את ההרשאה "favicon" במניפסט.

{
  "name": "Favicon API in a popup",
  "manifest_version": 3,
  ...
  "permissions": ["favicon"],
  ...
}

זהירות: ההרשאה "favicon" מפעילה אזהרה רק אם ההרשאה "tabs" או הרשאות המארח לא התבקשו עדיין.

בנוסף, בעת אחזור סמלי אתר בסקריפטים של תוכן, יש להצהיר על התיקייה "_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 32px שכוללת מזהה תוסף אקראי:

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

דוגמאות לתוספים

במאגר chrome-extension-samples יש שתי דוגמאות לסמלי אתר:

• דוגמה לחלון קופץ עם דף אתר.
• דוגמה לסקריפט תוכן של אתר.