संदर्भ मेन्यू बनाना

माउस के दूसरे क्लिक (इसे अक्सर राइट क्लिक कहा जाता है) के लिए, एक कॉन्टेक्स्ट मेन्यू दिखता है. कॉन्टेक्स्ट मेन्यू बनाने के लिए, सबसे पहले manifest.json फ़ाइल में "contextMenus" permission जोड़ें.

manifest.json:

  "permissions": [
    "contextMenus"
  ],

अगर आपको मेन्यू आइटम के बगल में कोई आइकॉन दिखाना है, तो "icons" कुंजी का इस्तेमाल करें. यह ज़रूरी नहीं है. इस उदाहरण में, "Global Google Search" एक्सटेंशन के मेन्यू आइटम के लिए, 16x16 आइकॉन का इस्तेमाल किया गया है.

संदर्भ मेन्यू का एक आइटम, जिसमें 16x16 का आइकॉन है.
यह 16x16 आइकॉन वाला कॉन्टेक्स्ट मेन्यू आइटम है.

इस उदाहरण का बाकी हिस्सा, Global Google Search के कॉन्टेक्स्ट मेन्यू के सैंपल से लिया गया है. इसमें कॉन्टेक्स्ट मेन्यू के कई विकल्प दिए गए हैं. जब किसी एक्सटेंशन में एक से ज़्यादा कॉन्टेक्स्ट मेन्यू होते हैं, तो Chrome उन्हें अपने-आप एक ही पैरंट मेन्यू में छोटा कर देता है. जैसा कि यहां दिखाया गया है:

नेस्ट किया गया कॉन्टेक्स्ट मेन्यू.
चौथी इमेज: कॉन्टेक्स्ट मेन्यू और नेस्ट किया गया सब-मेन्यू.

इस सैंपल में, एक्सटेंशन सर्विस वर्कर में contextMenus.create() को कॉल करके यह दिखाया गया है. सब मेन्यू आइटम, 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'],
    });
  }
});