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

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

manifest.json:

  "permissions": [
    "contextMenus"
  ],

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

16 x 16 आइकॉन वाला संदर्भ मेन्यू आइटम.
16 x 16 आइकॉन वाला संदर्भ मेन्यू आइटम.

इस उदाहरण का बाकी हिस्सा ग्लोबल 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'],
    });
  }
});