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

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

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

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

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

EXTENSION_ID

מזהה התוסף.

EXAMPLE_URL

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

FAV_SIZE

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

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

שלב 1: עדכון המניפסט

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

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

בנוסף, כשאוספים סמלי 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 בגודל 32px של www.google.com, שכוללת מזהה תוסף אקראי:

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

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

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

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