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

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

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

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

जब किसी एक्सटेंशन की सुविधाएं ज़्यादातर स्थितियों में काम करने लगती हैं, तब 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" का एलान करने से आइकॉन को सिर्फ़ तब रंगीन किया जाएगा, जब एक्सटेंशन उपयोगकर्ताओं के लिए उपलब्ध होगा. ऐसा न होने पर, आइकॉन को ग्रेस्केल में दिखाया जाएगा.

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

बैकग्राउंड स्क्रिप्ट में runtime.onInstalled लिसनर के तहत chrome.declarativeContent को कॉल करके, नियम तय करें कि एक्सटेंशन कब इस्तेमाल किया जा सकता है. यूआरएल के अनुसार पेज कार्रवाई नमूना एक्सटेंशन यह शर्त सेट करता है कि यूआरएल में '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 फ़ॉर्मैट में आइकॉन दें. हालांकि, WebKit पर काम करने वाले सभी फ़ॉर्मैट को स्वीकार किया जाता है. इनमें BMP, GIF, ICO, और JPEG शामिल हैं.

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

टूलबार के खास आइकॉन, मेनिफ़ेस्ट के "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 टूलबार में एक सामान्य आइकॉन जोड़ देगा.

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

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

आइकॉन का साइज़	आइकॉन का इस्तेमाल
16x16	एक्सटेंशन के पेजों पर फ़ेविकॉन
32x32	Windows कंप्यूटर को अक्सर इस साइज़ की ज़रूरत होती है. यह विकल्प देने पर, साइज़ डिस्टॉर्शन को 48x48 विकल्प को छोटा करने से रोका जाएगा.
48x48 पिक्सल	एक्सटेंशन मैनेजमेंट पेज पर दिखता है
128x128	Chrome Webstore और इंस्टॉलेशन पर दिखता है

"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>