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

יופיע תפריט הקשר של הלחיצה החלופית (שנקראת לעיתים קרובות לחיצה ימנית) בעכבר. בדף הזה מוסבר איך מטמיעים תפריט הקשר. רשימה מלאה של חברי ה-API שקשורים לנושא מופיעה במאמר browser.contextMenu.

כדי ליצור תפריט הקשר, קודם מוסיפים את "contextMenus" ההרשאה לקובץ manifest.json.

manifest.json:

  "permissions": [
    "contextMenus"
  ],

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

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

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

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

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

service-worker.js:

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

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