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

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

גישה לסמל אתר

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

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

EXTENSION_ID

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

EXAMPLE_URL

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

FAV_SIZE

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

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

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

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

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

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