בניית תפריט הקשר

תפריט הקשר מופיע עבור הקליק החלופי (נקרא בדרך כלל לחיצה ימנית) של עכבר. כדי ליצור תפריט הקשר, קודם צריך להוסיף את ההרשאה "contextMenus" לקובץ Manifest.json.

manifest.json:

  "permissions": [
    "contextMenus"
  ],

אפשר גם להקיש על "icons" כדי להציג סמל לצד האפשרות בתפריט. בדוגמה הזו, הפריט בתפריט של התוסף 'חיפוש גלובלי של Google' משתמש בסמל בגודל 16 על 16.

פריט בתפריט הקשר עם סמל בגודל 16 על 16.
פריט הקשר עם סמל בגודל 16 על 16.

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

תפריט הקשר מקונן.
איור 4: תפריט הקשר ותפריט משנה בתוך רכיב.

הדוגמה הזו ממחישה זאת על ידי קריאה ל-contextMenus.create() ב-קובץ השירות (service worker) של התוסף. הפריטים בתפריט המשנה מיובאים מהקובץ locales.js. לאחר מכן runtime.onInstalled חוזר עליהם.

service-worker.js:

const tldLocales = {
  'com.au': 'Australia',
  'com.br': 'Brazil',
  ...
}

chrome.runtime.onInstalled.addListener(async () => {
  for (let [tld, locale] of Object.entries(tldLocales)) {
    chrome.contextMenus.create({
      id: tld,
      title: locale,
      type: 'normal',
      contexts: ['selection'],
    });
  }
});