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

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

manifest.json:

  "permissions": [
    "contextMenus"
  ],

אופציונלי: אם רוצים להציג סמל לצד אפשרות בתפריט, משתמשים במקש "icons". בדוגמה הזו, פריט התפריט של התוסף Global Google Search (חיפוש 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',
  ...
}

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