यूज़र इंटरफ़ेस डिज़ाइन करना

एक्सटेंशन का यूज़र इंटरफ़ेस किसी खास मकसद से बनाया गया और कम से कम होना चाहिए. एक्सटेंशन की तरह ही, यूज़र इंटरफ़ेस (यूआई) को, ब्राउज़िंग के अनुभव को पसंद के मुताबिक बनाना चाहिए या उसे बेहतर बनाना चाहिए, ताकि उस पर से ध्यान न भटके.

इस गाइड में यूज़र इंटरफ़ेस की ज़रूरी और वैकल्पिक सुविधाओं के बारे में बताया गया है. इसका इस्तेमाल यह समझने के लिए करें कि कैसे और कब का उपयोग करें.

सभी पेजों पर एक्सटेंशन चालू करें

अगर किसी एक्सटेंशन की सुविधाएं ज़्यादातर मामलों में काम करती हैं, तो browser_action का इस्तेमाल करें.

ब्राउज़र की कार्रवाई रजिस्टर करें

मेनिफ़ेस्ट में "browser_action" फ़ील्ड को रजिस्टर किया जाता है.

{
  "name": "My Awesome browser_action Extension",
  ...
  "browser_action": {
    ...
  }
  ...
}

"browser_action" तय करने पर, आइकॉन रंगीन होता है. इससे पता चलता है कि एक्सटेंशन इनके लिए उपलब्ध है उपयोगकर्ता.

कोई बैज जोड़ें

बैज, ब्राउज़र आइकॉन के सबसे ऊपर चार वर्णों वाला रंगीन बैनर दिखाते हैं. वे सिर्फ़ ये काम कर सकते हैं इसका इस्तेमाल ऐसे एक्सटेंशन करते हैं जो अपने मेनिफ़ेस्ट में "browser_action" के बारे में जानकारी देते हैं.

एक्सटेंशन की स्थिति को दिखाने के लिए, बैज का इस्तेमाल करें. ड्रिंक वॉटर इवेंट के सैंपल में "चालू है" वाला बैज यह दिखाने के लिए कि उन्होंने सफलतापूर्वक अलार्म सेट किया है और एक्सटेंशन प्रयोग में नहीं है.

बैज का टेक्स्ट सेट करने के लिए, chrome.browserAction.setBadgeText को कॉल करें और बैनर का रंग सेट करें chrome.browserAction.setBadgeBackgroundColor पर कॉल करके .

chrome.browserAction.setBadgeText({text: 'ON'});
chrome.browserAction.setBadgeBackgroundColor({color: '#4688F1'});

चुनिंदा पेजों पर एक्सटेंशन चालू करें

अगर किसी एक्सटेंशन की सुविधाएं सिर्फ़ तय की गई स्थितियों में ही उपलब्ध होती हैं, तो page_action का इस्तेमाल करें.

पेज पर की गई कार्रवाई के बारे में बताएं

मेनिफ़ेस्ट में "page_action" फ़ील्ड को रजिस्टर किया जाता है.

{
  "name": "My Awesome page_action Extension",
  ...
  "page_action": {
    ...
  }
  ...
}

"page_action" तय करने से, आइकॉन सिर्फ़ तब कलर होगा, जब उपयोगकर्ताओं के लिए एक्सटेंशन उपलब्ध होगा. नहीं तो यह ग्रेस्केल में दिखेगा.

एक्सटेंशन को चालू करने के नियम तय करें

एक्सटेंशन का इस्तेमाल कब किया जा सकता है, इसके लिए chrome.declarativeContent को कॉल करके नियम तय करें बैकग्राउंड स्क्रिप्ट में runtime.onInstalled लिसनर. यूआरएल के हिसाब से पेज कार्रवाई का नमूना एक्सटेंशन यह शर्त सेट करता है कि यूआरएल में 'g' शामिल होना चाहिए. शर्त पूरी होने पर, एक्सटेंशन declarativeContent.ShowPageAction() को कॉल करता है.

chrome.runtime.onInstalled.addListener(function() {
  // Replace all rules ...
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    // With a new rule ...
    chrome.declarativeContent.onPageChanged.addRules([
      {
        // That fires when a page's URL contains a 'g' ...
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl: { urlContains: 'g' },
          })
        ],
        // And shows the extension's page action.
        actions: [ new chrome.declarativeContent.ShowPageAction() ]
      }
    ]);
  });
});

एक्सटेंशन को चालू या बंद करना

"page_action" का इस्तेमाल करने वाले एक्सटेंशन, कॉल करके डाइनैमिक तौर पर चालू और बंद कर सकते हैं pageAction.show और pageAction.hide.

Mappy सैंपल एक्सटेंशन, किसी पते के लिए वेब पेज को स्कैन करता है और उसकी जगह को स्टैटिक पर दिखाता है पॉप-अप में मैप का इस्तेमाल करें. एक्सटेंशन, पेज के कॉन्टेंट पर निर्भर होता है. इसलिए, यह नियम नहीं बना सकता इसका इस्तेमाल करके, यह अनुमान लगाया जा सकता है कि कौनसे पेज काम के होंगे. इसके बजाय, अगर कोई पता उस पेज पर मिलता है जिस पर यह कॉल किया गया है pageAction.show का इस्तेमाल, आइकॉन को कलर करने और यह बताने के लिए किया जाता है कि एक्सटेंशन को उस टैब पर इस्तेमाल किया जा सकता है या नहीं.

chrome.runtime.onMessage.addListener(function(req, sender) {
  chrome.storage.local.set({'address': req.address})
  chrome.pageAction.show(sender.tab.id);
  chrome.pageAction.setTitle({tabId: sender.tab.id, title: req.address});
});

एक्सटेंशन आइकॉन उपलब्ध कराएं

एक्सटेंशन को दिखाने के लिए, कम से कम एक आइकॉन की ज़रूरत होती है. आइकॉन को PNG फ़ॉर्मैट में उपलब्ध कराएं विज़ुअल नतीजे, भले ही BMP, GIF, ICO, और JPEG जैसे WebKit के साथ काम करने वाला कोई भी फ़ॉर्मैट स्वीकार किया जाता है.

टूलबार के आइकॉन तय करें

टूलबार के लिए खास आइकॉन, इसके तहत दिए गए "default_icon" फ़ील्ड में रजिस्टर होते हैं मेनिफ़ेस्ट में browser_action या page_action. कई साइज़ को शामिल करना है को 16 डिप स्पेस में सहयोग करने के लिए प्रोत्साहित किया. कम से कम 16x16 और 32x32 साइज़ का सुझाव दिया जाता है.

{
  "name": "My Awesome page_action Extension",
  ...
  "page_action": {
    "default_icon": {
      "16": "extension_toolbar_icon16.png",
      "32": "extension_toolbar_icon32.png"
    }
  }
  ...
}

सभी आइकॉन स्क्वेयर होने चाहिए या वे डिस्टॉर्ट हो सकते हैं. यदि कोई आइकन नहीं दिया गया है, तो Chrome सामान्य टूलबार में जोड़ दिया जाता है.

अतिरिक्त आइकॉन बनाएं और रजिस्टर करें

टूलबार के बाहर इस्तेमाल करने के लिए, नीचे दिए गए साइज़ में अतिरिक्त आइकॉन शामिल करें.

"icons" फ़ील्ड में मेनिफ़ेस्ट में आइकॉन रजिस्टर करें.

{
  "name": "My Awesome Extension",
  ...
  "icons": {
    "16": "extension_icon16.png",
    "32": "extension_icon32.png",
    "48": "extension_icon48.png",
    "128": "extension_icon128.png"
  }
  ...
}

यूज़र इंटरफ़ेस (यूआई) की अन्य सुविधाएं

पॉप-अप

पॉप-अप एक एचटीएमएल फ़ाइल होती है, जो उपयोगकर्ता के टूलबार आइकॉन पर क्लिक करने पर एक खास विंडो में दिखती है. पॉप-अप, किसी वेब पेज की तरह ही काम करता है; इसमें स्टाइलशीट और स्क्रिप्ट टैग के लिंक हो सकते हैं, लेकिन इनलाइन JavaScript की अनुमति नहीं देती है.

ड्रिंक वॉटर इवेंट के उदाहरण वाला पॉप-अप, टाइमर के उपलब्ध विकल्प दिखाता है. उपयोगकर्ताओं ने इसके हिसाब से अलार्म सेट किया है दिए गए किसी भी बटन पर क्लिक करके.

<html>
  <head>
    <title>Water Popup</title>
  </head>
  <body>
      <img src='./stay_hydrated.png' id='hydrateImage'>
      <button id='sampleSecond' value='0.1'>Sample Second</button>
      <button id='15min' value='15'>15 Minutes</button>
      <button id='30min' value='30'>30 Minutes</button>
      <button id='cancelAlarm'>Cancel Alarm</button>
    <script src="popup.js"></script>
  </body>
</html>

पॉप-अप को ब्राउज़र के ऐक्शन या पेज ऐक्शन के तहत, मेनिफ़ेस्ट में रजिस्टर किया जा सकता है.

{
  "name": "Drink Water Event",
  ...
  "browser_action": {
    "default_popup": "popup.html"
  }
  ...
}

browserAction.setPopup को कॉल करके भी, पॉप-अप को डाइनैमिक तौर पर सेट किया जा सकता है या pageAction.setPopup.

chrome.storage.local.get('signed_in', function(data) {
  if (data.signed_in) {
    chrome.browserAction.setPopup({popup: 'popup.html'});
  } else {
    chrome.browserAction.setPopup({popup: 'popup_sign_in.html'});
  }
});

टूलटिप

ब्राउज़र पर कर्सर घुमाते समय, उपयोगकर्ताओं को कम शब्दों में जानकारी या निर्देश देने के लिए, टूलटिप का इस्तेमाल करें आइकन.

टूलटिप, "default_title" फ़ील्ड browser_action या page_action में रजिस्टर होते हैं मेनिफ़ेस्ट फ़ाइल में मौजूद है.

{
"name": "Tab Flipper",
  ...
  "browser_action": {
    "default_title": "Press Ctrl(Win)/Command(Mac)+Shift+Right/Left to flip tabs"
  }
...
}

टूलटिप को browserAction.setTitle को कॉल करके और pageAction.setTitle.

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.browserAction.setTitle({tabId: tab.id, title: "You are on tab:" + tab.id});
});

खास स्थान-भाषा वाली स्ट्रिंग अंतरराष्ट्रीय स्तर का बनाने के साथ लागू की जाती हैं. इसके लिए डायरेक्ट्री बनाएं _locales फ़ोल्डर में हाउस भाषा के खास मैसेज, जैसे:

• _locales/en/messages.json
• _locales/es/messages.json

हर भाषा के messages.json में मैसेज को फ़ॉर्मैट करें.

{
  "__MSG_tooltip__": {
      "message": "Hello!",
      "description": "Tooltip Greeting."
  }
}

{
  "__MSG_tooltip__": {
      "message": "Hola!",
      "description": "Tooltip Greeting."
  }
}

स्थानीय भाषा के मुताबिक अनुवाद करने की सुविधा चालू करने के लिए, मैसेज के बजाय टूलटिप फ़ील्ड में मैसेज का नाम डालें.

{
"name": "Tab Flipper",
  ...
  "browser_action": {
    "default_title": "__MSG_tooltip__"
  }
...
}

खोज बार में डाली गई क्वेरी

उपयोगकर्ता खोज वाली पट्टी से एक्सटेंशन फ़ंक्शन शुरू कर सकते हैं. "omnibox" फ़ील्ड को इसमें शामिल करें मेनिफ़ेस्ट को पूरा करने और कीवर्ड तय करने में मदद मिलती है. खोज वाली पट्टी में नया टैब खोज का नमूना एक्सटेंशन "nt" का इस्तेमाल करता है जैसे कीवर्ड.

{
  "name": "Omnibox New Tab Search",\
  ...
  "omnibox": { "keyword" : "nt" },
  "default_icon": {
    "16": "newtab_search16.png",
    "32": "newtab_search32.png"
  }
  ...
}

जब उपयोगकर्ता "nt" टाइप करता है क्लिक करता है, तो यह एक्सटेंशन को सक्रिय कर देता है. उपयोगकर्ता को इसका सिग्नल देने के लिए, यह दिए गए 16x16 आइकॉन को धूसर करके दिखाता है और इसे एक्सटेंशन के नाम के बगल वाली खोज बार में शामिल करता है.

एक्सटेंशन, omnibox.onInputEntered इवेंट को सुनता है. ट्रिगर होने के बाद, एक्सटेंशन एक नया टैब खोलता है, जिसमें उपयोगकर्ता की एंट्री के लिए Google Search मौजूद होता है.

chrome.omnibox.onInputEntered.addListener(function(text) {
  // Encode user input for special characters , / ? : @ & = + $ #
  var newURL = 'https://www.google.com/search?q=' + encodeURIComponent(text);
  chrome.tabs.create({ url: newURL });
});

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

मेनिफ़ेस्ट में "contextMenus" की अनुमति देकर, संदर्भ मेन्यू के नए विकल्प जोड़ें.

{
  "name": "Global Google Search",
  ...
  "permissions": [
    "contextMenus",
    "storage"
  ],
  "icons": {
    "16": "globalGoogle16.png",
    "48": "globalGoogle48.png",
    "128": "globalGoogle128.png"
  }
  ...
}

16x16 का आइकॉन, मेन्यू में नई एंट्री के बगल में दिखाया जाता है.

बैकग्राउंड स्क्रिप्ट में contextMenus.create को कॉल करके संदर्भ मेन्यू बनाएं. यह इसे runtime.onInstalled लिसनर इवेंट के तहत पूरा किया जाना चाहिए.

chrome.runtime.onInstalled.addListener(function() {
  for (let key of Object.keys(kLocales)) {
    chrome.contextMenus.create({
      id: key,
      title: kLocales[key],
      type: 'normal',
      contexts: ['selection'],
    });
  }
});

const kLocales = {
  'com.au': 'Australia',
  'com.br': 'Brazil',
  'ca': 'Canada',
  'cn': 'China',
  'fr': 'France',
  'it': 'Italy',
  'co.in': 'India',
  'co.jp': 'Japan',
  'com.ms': 'Mexico',
  'ru': 'Russia',
  'co.za': 'South Africa',
  'co.uk': 'United Kingdom'
};

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

निर्देश

एक्सटेंशन, खास कमांड को तय कर सकते हैं और उन्हें एक की कॉम्बिनेशन से बाइंड कर सकते हैं. किसी एक को रजिस्टर करें या "commands" फ़ील्ड के तहत मेनिफ़ेस्ट में और ज़्यादा निर्देश दिए जाएंगे.

{
  "name": "Tab Flipper",
  ...
  "commands": {
    "flip-tabs-forward": {
      "suggested_key": {
        "default": "Ctrl+Shift+Right",
        "mac": "Command+Shift+Right"
      },
      "description": "Flip tabs forward"
    },
    "flip-tabs-backwards": {
      "suggested_key": {
        "default": "Ctrl+Shift+Left",
        "mac": "Command+Shift+Left"
      },
      "description": "Flip tabs backwards"
    }
  }
  ...
}

निर्देशों का इस्तेमाल नए या विकल्प के तौर पर ब्राउज़र शॉर्टकट देने के लिए किया जा सकता है. Tab Flipper सैंपल एक्सटेंशन, बैकग्राउंड स्क्रिप्ट में commands.onCommand इवेंट को सुनता है और और हर रजिस्टर किए गए कॉम्बिनेशन के लिए अलग-अलग फ़ंक्शन का इस्तेमाल कर सकते हैं.

chrome.commands.onCommand.addListener(function(command) {
  chrome.tabs.query({currentWindow: true}, function(tabs) {
    // Sort tabs according to their index in the window.
    tabs.sort((a, b) => { return a.index < b.index; });
    let activeIndex = tabs.findIndex((tab) => { return tab.active; });
    let lastTab = tabs.length - 1;
    let newIndex = -1;
    if (command === 'flip-tabs-forward')
      newIndex = activeIndex === 0 ? lastTab : activeIndex - 1;
    else  // 'flip-tabs-backwards'
      newIndex = activeIndex === lastTab ? 0 : activeIndex + 1;
    chrome.tabs.update(tabs[newIndex].id, {active: true, highlighted: true});
  });
});

निर्देश, एक की बाइंडिंग भी बना सकते हैं जो अपने एक्सटेंशन के साथ खास तौर पर काम करती है. नमस्ते एक्सटेंशन के उदाहरण में, पॉप-अप खोलने के लिए निर्देश दिया गया है.

{
  "name": "Hello Extensions",
  "description" : "Base Level Extension",
  "version": "1.0",
  "browser_action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  },
  "manifest_version": 2,
  "commands": {
    "_execute_browser_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+F",
        "mac": "MacCtrl+Shift+F"
      },
      "description": "Opens hello.html"
    }
  }
}

एक्सटेंशन browser_action के बारे में बताता है, इसलिए यह "execute_browser_action" को बैकग्राउंड स्क्रिप्ट को शामिल किए बिना, पॉप-अप फ़ाइल को खोलने के लिए कमांड. अगर इसका इस्तेमाल किया जा रहा है page_action, इसे "execute_page_action" से बदला जा सकता है. ब्राउज़र और एक्सटेंशन, दोनों कमांड का इस्तेमाल एक ही एक्सटेंशन में किया जा सकता है.

पेज बदलें

एक्सटेंशन को ओवरराइड कर सकता है और इतिहास, नया टैब, या बुकमार्क वेब पेज को किसी कस्टम एचटीएमएल फ़ाइल में सेव होता है. किसी पॉप-अप की तरह, इसमें खास तरह का तर्क और स्टाइल शामिल हो सकती है. हालांकि, इसमें अनुमति नहीं है इनलाइन JavaScript. एक एक्सटेंशन तीन संभावित पेजों में से सिर्फ़ एक को बदलने तक ही सीमित होता है.

मेनिफ़ेस्ट में, "chrome_url_overrides" फ़ील्ड में बदलाव करने वाला पेज रजिस्टर करें.

{
  "name": "Awesome Override Extension",
  ...

  "chrome_url_overrides" : {
    "newtab": "override_page.html"
  },
  ...
}

इन्हें ओवरराइड करते समय "newtab" फ़ील्ड को "bookmarks" या "history" से बदलना चाहिए पेज.

<html>
  <head>
  <title>New Tab</title>
  </head>
  <body>
    <h1>Hello World</h1>
  <script src="logic.js"></script>
  </body>
</html>