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

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

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

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

browser_action

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 की जानकारी देना

मेनिफ़ेस्ट में "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});
});

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

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

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

टूलबार के लिए खास आइकॉन, मेनिफ़ेस्ट में browser_action या page_action के तहत "default_icon" फ़ील्ड में रजिस्टर किए जाते हैं. 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>

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

{
  "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"
    }
  }
  ...
}

निर्देशों का इस्तेमाल, ब्राउज़र के नए या वैकल्पिक शॉर्टकट उपलब्ध कराने के लिए किया जा सकता है. टैब फ़्लिपर के सैंपल एक्सटेंशन में, बैकग्राउंड स्क्रिप्ट में 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});
  });
});

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

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