chrome.browserAction

קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

תיאור

זמינות

באיור הבא, הריבוע המגוון משמאל לסרגל הכתובות הוא הסמל של פעולה בדפדפן. תיפתח הודעה קופצת מתחת לסמל.

אם רוצים ליצור סמל שלא תמיד פעיל, צריך להשתמש בפעולת דף במקום בפעולה בדפדפן.

מניפסט

רושמים את פעולת הדפדפן במניפסט של התוסף באופן הבא:

{
  "name": "My extension",
  ...
  "browser_action": {
    "default_icon": {                // optional
      "16": "images/icon16.png",     // optional
      "24": "images/icon24.png",     // optional
      "32": "images/icon32.png"      // optional
    },
    "default_title": "Google Mail",  // optional, shown in tooltip
    "default_popup": "popup.html"    // optional
  },
  ...
}

אפשר לספק סמל בגודל כלשהו לשימוש ב-Chrome, ומערכת Chrome תבחר את הסמל הקרוב ביותר ותתאים אותו לגודל המתאים כדי למלא את המרחב של 16dip. עם זאת, אם לא מציינים את הגודל המדויק, יכול להיות שהשינוי בגודל יגרום לכך שהסמל יאבד פרטים או ייראה מטושטש.

מאחר שמכשירים עם גורמי התאמה פחות נפוצים, כמו 1.5x או 1.2x, הולכים ונהיים נפוצים יותר, מומלץ לספק כמה גדלים של סמלים. כך גם אם גודל התצוגה של הסמל ישתנה, לא תצטרכו לבצע עבודה נוספת כדי לספק סמלים שונים.

עדיין יש תמיכה בתחביר הישן לרישום סמל ברירת המחדל:

{
  "name": "My extension",
  ...
  "browser_action": {
    ...
    "default_icon": "images/icon32.png"  // optional
    // equivalent to "default_icon": { "32": "images/icon32.png" }
  },
  ...
}

חלקים בממשק המשתמש

פעולת דפדפן יכולה לכלול סמל, הסבר קצר, תג וחלון קופץ.

סמל

סמלי הפעולות בדפדפן ב-Chrome הם בגודל 16 dips (פיקסלים שאינם תלויים במכשיר) ברוחב ובגובה. סמלים גדולים יותר מותאמים לגודל המתאים, אבל כדי לקבל את התוצאות הטובות ביותר, מומלץ להשתמש בסמל מרובע בגודל 16dip.

אפשר להגדיר את הסמל בשתי דרכים: באמצעות תמונה סטטית או באמצעות רכיב הקנבס ב-HTML5. שימוש בתמונות סטטיות קל יותר באפליקציות פשוטות, אבל אפשר ליצור ממשקי משתמש דינמיים יותר – כמו אנימציה חלקה – באמצעות רכיב הקנבס.

תמונות סטטיות יכולות להיות בכל פורמט ש-WebKit יכול להציג, כולל BMP,‏ GIF,‏ ICO,‏ JPEG או PNG. בתוספים לא מוצקים, התמונות חייבות להיות בפורמט PNG.

כדי להגדיר את הסמל, משתמשים בשדה default_icon של browser_action ב-manifest, או קוראים לשיטה browserAction.setIcon.

כדי להציג את הסמל בצורה תקינה כשצפיפות הפיקסלים במסך (היחס size_in_pixel / size_in_dip) שונה מ-1, אפשר להגדיר את הסמל כקבוצת תמונות בגדלים שונים. התמונה בפועל שמוצגת תיבחר מהקבוצה כך שתתאים בצורה הטובה ביותר לגודל הפיקסלים של 16dip. קבוצת הסמלים יכולה להכיל מפרט של סמל בכל גודל, ו-Chrome יבחר את הסמל המתאים ביותר.

הסבר קצר

כדי להגדיר את ההודעה המסבירה, משתמשים בשדה default_title של browser_action במניפסט, או קוראים לשיטה browserAction.setTitle. אפשר לציין מחרוזות ספציפיות לאזור גיאוגרפי בשדה default_title. פרטים נוספים זמינים במאמר התאמה לשוק הבינלאומי.

תג

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

מכיוון ששטח התג מוגבל, הוא צריך להכיל 4 תווים או פחות.

מגדירים את הטקסט והצבע של התג באמצעות browserAction.setBadgeText ו-browserAction.setBadgeBackgroundColor, בהתאמה.

חלון קופץ

אם לפעולה בדפדפן יש חלון קופץ, החלון הקופץ מופיע כשהמשתמש לוחץ על סמל התוסף. חלון הקופץ יכול להכיל כל תוכן HTML שתרצו, והוא יותאם באופן אוטומטי לגודל התוכן שלו. חלון הקופץ לא יכול להיות קטן מ-25x25 ולא גדול מ-800x600.

כדי להוסיף חלון קופץ לפעולה בדפדפן, יוצרים קובץ HTML עם התוכן של החלון הקופץ. מציינים את קובץ ה-HTML בשדה default_popup של browser_action במניפסט, או קוראים לשיטה browserAction.setPopup.

טיפים

כדי להשיג את ההשפעה החזותית הטובה ביותר, כדאי לפעול לפי ההנחיות הבאות:

• כן כדאי להשתמש בפעולות בדפדפן לתכונות שגיוני להשתמש בהן ברוב הדפים.
• אל תשתמשו בפעולות בדפדפן לתכונות שתקפות רק לכמה דפים. במקום זאת, צריך להשתמש בפעולות דף.
• כן כדאי להשתמש בסמלים גדולים וצבעוניים שמנצלים את כל שטח התמונה בגודל 16x16dip. סמלי הפעולות בדפדפן צריכים להיראות גדולים יותר ומלאים יותר מסמלי הפעולות בדף.
• אין לנסות לחקות את סמל התפריט המונוכרומטי של Google Chrome. זה לא מתאים לשימוש עם נושאים, ובכל מקרה, תוספים צריכים לבלוט קצת.
• כן כדאי להשתמש בשקיפות אלפא כדי להוסיף קצוות רכים לסמל. הרבה אנשים משתמשים בעיצובים, ולכן חשוב שהסמל שלכם ייראה טוב במגוון צבעים של רקע.
• לא מומלץ להפעיל אנימציה לסמל באופן קבוע. זה פשוט מעצבן.

דוגמאות

דוגמאות פשוטות לשימוש בפעולות בדפדפן זמינות בספרייה examples/api/browserAction. דוגמאות נוספות ועזרה בהצגת קוד המקור זמינות במאמר דוגמאות.

chrome.browserAction.disable(
  tabId?: number,
  callback?: function,
)

chrome.browserAction.enable(
  tabId?: number,
  callback?: function,
)

chrome.browserAction.getBadgeBackgroundColor(
  details: TabDetails,
  callback?: function,
)

chrome.browserAction.getBadgeText(
  details: TabDetails,
  callback?: function,
)

chrome.browserAction.getPopup(
  details: TabDetails,
  callback?: function,
)

chrome.browserAction.getTitle(
  details: TabDetails,
  callback?: function,
)

chrome.browserAction.setBadgeBackgroundColor(
  details: object,
  callback?: function,
)

chrome.browserAction.setBadgeText(
  details: object,
  callback?: function,
)

chrome.browserAction.setIcon(
  details: object,
  callback?: function,
)

chrome.browserAction.setPopup(
  details: object,
  callback?: function,
)

chrome.browserAction.setTitle(
  details: object,
  callback?: function,
)

chrome.browserAction.onClicked.addListener(
  callback: function,
)