עיצוב ממשק המשתמש

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

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

הפעלת התוסף בכל הדפים

צריך להשתמש ב-browser_action כשתכונות של תוסף מתפקדות ברוב המצבים.

רישום פעולת הדפדפן

השדה "browser_action" רשום במניפסט.

{
  "name": "My Awesome browser_action Extension",
  ...
  "browser_action": {
    ...
  }
  ...
}

כשמצהירים על "browser_action", הסמל נשאר בצבע, כדי לציין שהתוסף זמין למשתמשים.

הוספת תג

תגים מציגים מודעת באנר צבעונית עם עד ארבעה תווים בחלק העליון של סמל הדפדפן. אפשר להשתמש בהן רק בתוספים שמצהירים על "browser_action" במניפסט שלהם.

אפשר להשתמש בתגים כדי לציין את מצב התוסף. בדוגמה של אירוע מים ב-Drink מוצג תג עם הסטטוס 'מופעל', כדי לציין למשתמש שהוא הגדיר התראה. בנוסף, לא מוצג דבר כשהתוסף לא פעיל.

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

chrome.browserAction.setBadgeText({text: 'ON'});
chrome.browserAction.setBadgeBackgroundColor({color: '#4688F1'});

הפעלת התוסף בדפים נבחרים

משתמשים ב-page_action כשהתכונות של התוסף זמינות רק בנסיבות מוגדרות.

הצהרה על פעולת הדף

השדה "page_action" רשום במניפסט.

{
  "name": "My Awesome page_action Extension",
  ...
  "page_action": {
    ...
  }
  ...
}

כאשר מצהירים על "page_action", הסמל ייצבע רק כשהתוסף יהיה זמין למשתמשים, אחרת הוא יוצג בגווני אפור.

הגדרה של כללים להפעלת התוסף

מגדירים כללים למקרים שבהם אפשר להשתמש בתוסף על ידי קריאה ל-chrome.declarativeContent מתחת ל-listener בסקריפט רקע של runtime.onInstalled. התוסף לדוגמה Page action by URL מגדיר תנאי שכתובת ה-URL חייבת לכלול g. אם התנאי מתקיים, התוסף קורא לפונקציה declarativeContent.ShowPageAction().

chrome.runtime.onInstalled.addListener(function() {
  // Replace all rules ...
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    // With a new rule ...
    chrome.declarativeContent.onPageChanged.addRules([
      {
        // That fires when a page's URL contains a 'g' ...
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl: { urlContains: 'g' },
          })
        ],
        // And shows the extension's page action.
        actions: [ new chrome.declarativeContent.ShowPageAction() ]
      }
    ]);
  });
});

הפעלה או השבתה של התוסף

אפשר להפעיל ולהשבית תוספים באופן דינמי באמצעות "page_action", באמצעות הטלפון pageAction.show ו-pageAction.hide.

התוסף לדוגמה Mappy סורק דף אינטרנט ומחפש כתובת מסוימת, ומציג את המיקום שלה במפה סטטית בחלון הקופץ. התוסף תלוי בתוכן הדף, ולכן הוא לא יכול להצהיר על כללים שיחזו אילו דפים יהיו רלוונטיים. במקום זאת, אם נמצאת כתובת בדף, מתבצעת קריאה לפונקציה pageAction.show כדי לצבוע את הסמל בצבע מסוים ולציין שאפשר להשתמש בתוסף בכרטיסייה הזו.

chrome.runtime.onMessage.addListener(function(req, sender) {
  chrome.storage.local.set({'address': req.address})
  chrome.pageAction.show(sender.tab.id);
  chrome.pageAction.setTitle({tabId: sender.tab.id, title: req.address});
});

הוספת הסמלים של התוספים

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

הקצאת סמלים לסרגל הכלים

סמלים ספציפיים לסרגל הכלים רשומים בשדה "default_icon" בקטע browser_action או page_action במניפסט. מומלץ לכלול כמה גדלים במתקן עם 16 נקודות. מומלץ להשתמש בגדלים של 16x16 ו-32x32 לפחות.

{
  "name": "My Awesome page_action Extension",
  ...
  "page_action": {
    "default_icon": {
      "16": "extension_toolbar_icon16.png",
      "32": "extension_toolbar_icon32.png"
    }
  }
  ...
}

כל הסמלים צריכים להיות מרובעים, אחרת הם עשויים להיות מעוותים. אם לא סופקו סמלים, Chrome יוסיף סמל גנרי לסרגל הכלים.

יצירה ורישום של סמלים נוספים

כלול סמלים נוספים בגדלים הבאים לשימושים מחוץ לסרגל הכלים.

גודל הסמל	שימוש בסמל
16x16	סמל האתר בדפי התוסף
32x32	לרוב, במחשבים עם Windows נדרש גודל כזה. כשמספקים את האפשרות הזו, לא תהיה אפשרות לעיוות בגודל שניתן לכווץ את האפשרות 48x48.
48x48	מוצגת בדף ניהול התוספים
128x128	מוצג בזמן ההתקנה ובחנות האינטרנט של Chrome

צריך לרשום סמלים במניפסט מתחת לשדה "icons".

{
  "name": "My Awesome Extension",
  ...
  "icons": {
    "16": "extension_icon16.png",
    "32": "extension_icon32.png",
    "48": "extension_icon48.png",
    "128": "extension_icon128.png"
  }
  ...
}

תכונות נוספות של ממשק המשתמש

פריט קופץ

חלון קופץ הוא קובץ HTML שמוצג בחלון מיוחד כאשר המשתמש לוחץ על סמל סרגל הכלים. חלון קופץ פועל בצורה דומה מאוד לדף אינטרנט. הוא יכול להכיל קישורים אל גיליונות סגנונות ותגי סקריפט, אבל לא מאפשר JavaScript מוטבע.

בחלון הקופץ לדוגמה אירוע מים של משקה מוצגות אפשרויות טיימר זמינות. המשתמשים מגדירים התראה על ידי לחיצה על אחד מהלחצנים שסופקו.

<html>
  <head>
    <title>Water Popup</title>
  </head>
  <body>
      <img src='./stay_hydrated.png' id='hydrateImage'>
      <button id='sampleSecond' value='0.1'>Sample Second</button>
      <button id='15min' value='15'>15 Minutes</button>
      <button id='30min' value='30'>30 Minutes</button>
      <button id='cancelAlarm'>Cancel Alarm</button>
    <script src="popup.js"></script>
  </body>
</html>

ניתן לרשום את החלון הקופץ במניפסט, תחת פעולת הדפדפן או פעולת הדף.

{
  "name": "Drink Water Event",
  ...
  "browser_action": {
    "default_popup": "popup.html"
  }
  ...
}

אפשר גם להגדיר חלונות קופצים באופן דינמי על ידי קריאה ל-browserAction.setPopup או pageAction.setPopup.

chrome.storage.local.get('signed_in', function(data) {
  if (data.signed_in) {
    chrome.browserAction.setPopup({popup: 'popup.html'});
  } else {
    chrome.browserAction.setPopup({popup: 'popup_sign_in.html'});
  }
});

הסבר קצר

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

הסברים קצרים רשומים בשדה "default_title" browser_action או page_action במניפסט.

{
"name": "Tab Flipper",
  ...
  "browser_action": {
    "default_title": "Press Ctrl(Win)/Command(Mac)+Shift+Right/Left to flip tabs"
  }
...
}

אפשר להגדיר או לעדכן הסברים קצרים גם בטלפון browserAction.setTitle ו-pageAction.setTitle.

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.browserAction.setTitle({tabId: tab.id, title: "You are on tab:" + tab.id});
});

מחרוזות לוקאל מיוחדות מוטמעות באמצעות Internationalization. יוצרים ספריות כדי לשמור הודעות ספציפיות לשפת הדף בתוך תיקייה בשם _locales, באופן הבא:

• _locales/en/messages.json
• _locales/es/messages.json

עיצוב הודעות בתוך messages.json של כל שפה.

{
  "__MSG_tooltip__": {
      "message": "Hello!",
      "description": "Tooltip Greeting."
  }
}

{
  "__MSG_tooltip__": {
      "message": "Hola!",
      "description": "Tooltip Greeting."
  }
}

כדי לאפשר לוקליזציה, יש לכלול את שם ההודעה בשדה ההסבר הקצר במקום בהודעה.

{
"name": "Tab Flipper",
  ...
  "browser_action": {
    "default_title": "__MSG_tooltip__"
  }
...
}

סרגל הכתובות

המשתמשים יכולים להפעיל פונקציונליות של תוספים דרך סרגל הכתובות. יש לכלול את השדה "omnibox" במניפסט ולהקצות מילת מפתח. בתוסף לדוגמה חיפוש כרטיסייה חדשה בסרגל הכתובות נעשה שימוש ב-"nt" כמילת המפתח.

{
  "name": "Omnibox New Tab Search",\
  ...
  "omnibox": { "keyword" : "nt" },
  "default_icon": {
    "16": "newtab_search16.png",
    "32": "newtab_search32.png"
  }
  ...
}

כשהמשתמש מקליד "nt" בסרגל הכתובות, התוסף מפעיל את התוסף. כדי לאות זאת למשתמש, הסמל 16x16 מסופק בגווני אפור, והוא כולל אותו בסרגל הכתובות ליד שם התוסף.

התוסף מאזין לאירוע omnibox.onInputEntered. אחרי שהוא מופעל, התוסף פותח כרטיסייה חדשה שמכילה את החיפוש של המשתמש ב-Google.

chrome.omnibox.onInputEntered.addListener(function(text) {
  // Encode user input for special characters , / ? : @ & = + $ #
  var newURL = 'https://www.google.com/search?q=' + encodeURIComponent(text);
  chrome.tabs.create({ url: newURL });
});

תפריט הקשר

יש להוסיף אפשרויות חדשות של תפריט הקשר על ידי הענקת ההרשאה "contextMenus" במניפסט.

{
  "name": "Global Google Search",
  ...
  "permissions": [
    "contextMenus",
    "storage"
  ],
  "icons": {
    "16": "globalGoogle16.png",
    "48": "globalGoogle48.png",
    "128": "globalGoogle128.png"
  }
  ...
}

הסמל בגודל 16x16 מוצג לצד הרשומה החדשה בתפריט.

כדי ליצור תפריט הקשר, מפעילים את contextMenus.create בסקריפט הרקע. צריך לבצע את הפעולה הזו במסגרת אירוע ה-listener של runtime.onInstalled.

chrome.runtime.onInstalled.addListener(function() {
  for (let key of Object.keys(kLocales)) {
    chrome.contextMenus.create({
      id: key,
      title: kLocales[key],
      type: 'normal',
      contexts: ['selection'],
    });
  }
});

const kLocales = {
  'com.au': 'Australia',
  'com.br': 'Brazil',
  'ca': 'Canada',
  'cn': 'China',
  'fr': 'France',
  'it': 'Italy',
  'co.in': 'India',
  'co.jp': 'Japan',
  'com.ms': 'Mexico',
  'ru': 'Russia',
  'co.za': 'South Africa',
  'co.uk': 'United Kingdom'
};

הדוגמה של תפריט ההקשר של חיפוש Google הגלובלי יוצרת אפשרויות מרובות מהרשימה ב-locales.js . כשתוסף מכיל יותר מתפריט הקשר אחד, Google Chrome מכווץ אותם אוטומטית לתפריט הורה אחד.

פקודות

תוספים יכולים להגדיר פקודות ספציפיות ולחבר אותן לשילוב מפתחות. רושמים פקודה אחת או יותר במניפסט מתחת לשדה "commands".

{
  "name": "Tab Flipper",
  ...
  "commands": {
    "flip-tabs-forward": {
      "suggested_key": {
        "default": "Ctrl+Shift+Right",
        "mac": "Command+Shift+Right"
      },
      "description": "Flip tabs forward"
    },
    "flip-tabs-backwards": {
      "suggested_key": {
        "default": "Ctrl+Shift+Left",
        "mac": "Command+Shift+Left"
      },
      "description": "Flip tabs backwards"
    }
  }
  ...
}

אתם יכולים להשתמש בפקודות כדי לספק קיצורי דרך חדשים או חלופיים בדפדפן. תוסף הדוגמה Tab Flipper מאזין לאירוע commands.onCommand בסקריפט הרקע ומגדיר את הפונקציונליות לכל שילוב רשום.

chrome.commands.onCommand.addListener(function(command) {
  chrome.tabs.query({currentWindow: true}, function(tabs) {
    // Sort tabs according to their index in the window.
    tabs.sort((a, b) => { return a.index < b.index; });
    let activeIndex = tabs.findIndex((tab) => { return tab.active; });
    let lastTab = tabs.length - 1;
    let newIndex = -1;
    if (command === 'flip-tabs-forward')
      newIndex = activeIndex === 0 ? lastTab : activeIndex - 1;
    else  // 'flip-tabs-backwards'
      newIndex = activeIndex === lastTab ? 0 : activeIndex + 1;
    chrome.tabs.update(tabs[newIndex].id, {active: true, highlighted: true});
  });
});

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

{
  "name": "Hello Extensions",
  "description" : "Base Level Extension",
  "version": "1.0",
  "browser_action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  },
  "manifest_version": 2,
  "commands": {
    "_execute_browser_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+F",
        "mac": "MacCtrl+Shift+F"
      },
      "description": "Opens hello.html"
    }
  }
}

מכיוון שהתוסף מגדיר browser_action, הוא יכול לציין את "execute_browser_action" בפקודות לפתיחת הקובץ הקופץ, בלי לכלול סקריפט רקע. אם משתמשים ב-page_action, אפשר להחליף אותו ב-"execute_page_action". ניתן להשתמש גם בפקודות של דפדפן וגם בפקודות של תוספים באותו תוסף.

שינוי הדפים

תוסף יכול לבטל את דף האינטרנט 'היסטוריה', 'כרטיסייה חדשה' או 'סימניות' בקובץ HTML מותאם אישית. כמו חלון קופץ, הוא יכול לכלול לוגיקה וסגנון מיוחדים, אבל לא מאפשר JavaScript מוטבע. תוסף אחד מוגבל לעקיפה של רק אחד משלושת הדפים האפשריים.

רושמים דף שינוי במניפסט מתחת לשדה "chrome_url_overrides".

{
  "name": "Awesome Override Extension",
  ...

  "chrome_url_overrides" : {
    "newtab": "override_page.html"
  },
  ...
}

כשמחליפים את הדפים האלה, צריך להחליף את השדה "newtab" ב-"bookmarks" או ב-"history".

<html>
  <head>
  <title>New Tab</title>
  </head>
  <body>
    <h1>Hello World</h1>
  <script src="logic.js"></script>
  </body>
</html>