ইউজার ইন্টারফেস ডিজাইন করুন

এক্সটেনশনের ইউজার ইন্টারফেসটি উদ্দেশ্যমূলক এবং বাহুল্যবর্জিত হওয়া উচিত। এক্সটেনশনগুলোর মতোই, ইউআই-টি ব্রাউজিং অভিজ্ঞতা থেকে মনোযোগ বিচ্যুত না করে সেটিকে কাস্টমাইজ বা উন্নত করবে।

এই নির্দেশিকাটিতে প্রয়োজনীয় এবং ঐচ্ছিক ইউজার ইন্টারফেস বৈশিষ্ট্যগুলো আলোচনা করা হয়েছে। একটি এক্সটেনশনের মধ্যে বিভিন্ন UI উপাদান কীভাবে এবং কখন প্রয়োগ করতে হয়, তা বুঝতে এটি ব্যবহার করুন।

সমস্ত পৃষ্ঠায় এক্সটেনশনটি সক্রিয় করুন

যখন কোনো এক্সটেনশনের ফিচারগুলো বেশিরভাগ ক্ষেত্রেই কার্যকর থাকে, তখন browser_action ব্যবহার করুন।

ব্রাউজার অ্যাকশন নিবন্ধন করুন

"browser_action" ফিল্ডটি ম্যানিফেস্টে নিবন্ধিত করা হয়।

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

"browser_action" ঘোষণা করলে আইকনটি রঙিন থাকে, যা নির্দেশ করে যে এক্সটেনশনটি ব্যবহারকারীদের জন্য উপলব্ধ।

একটি ব্যাজ যোগ করুন

ব্যাজগুলি ব্রাউজার আইকনের উপরে সর্বোচ্চ চারটি অক্ষর সহ একটি রঙিন ব্যানার প্রদর্শন করে। এগুলি শুধুমাত্র সেইসব এক্সটেনশন দ্বারা ব্যবহার করা যেতে পারে, যারা তাদের ম্যানিফেস্টে "browser_action" ঘোষণা করে।

এক্সটেনশনের অবস্থা বোঝাতে ব্যাজ ব্যবহার করুন। ‘ Drink Water Event’ নমুনাটি ব্যবহারকারীকে সফলভাবে অ্যালার্ম সেট করার বিষয়টি জানাতে ‘ON’ লেখা একটি ব্যাজ প্রদর্শন করে এবং এক্সটেনশনটি নিষ্ক্রিয় থাকলে কিছুই প্রদর্শন করে না।

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 কল করে এক্সটেনশনটি কখন ব্যবহারযোগ্য হবে তার নিয়ম নির্ধারণ করুন। ` Page action by URL` নমুনা এক্সটেনশনটি একটি শর্ত নির্ধারণ করে যে ইউআরএল-এ অবশ্যই একটি '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 সহ যেকোনো ফরম্যাটই গ্রহণযোগ্য।

টুলবার আইকন নির্ধারণ করুন

টুলবারের জন্য নির্দিষ্ট আইকনগুলো ম্যানিফেস্টের browser_action বা page_action অধীনে "default_icon" ফিল্ডে নিবন্ধিত করা হয়। ১৬-ডিপ স্পেসের জন্য স্কেল করার সুবিধার্থে একাধিক আকার অন্তর্ভুক্ত করার পরামর্শ দেওয়া হয়। ন্যূনতম ১৬x১৬ এবং ৩২x৩২ আকারগুলো সুপারিশ করা হয়।

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

সব আইকন বর্গাকার হওয়া উচিত, নতুবা সেগুলো বিকৃত হয়ে যেতে পারে। কোনো আইকন সরবরাহ করা না হলে, ক্রোম টুলবারে একটি সাধারণ আইকন যুক্ত করে দেবে।

অতিরিক্ত আইকন তৈরি ও নিবন্ধন করুন

টুলবারের বাইরে ব্যবহারের জন্য নিম্নলিখিত আকারের অতিরিক্ত আইকনগুলো অন্তর্ভুক্ত করুন।

ম্যানিফেস্টের "icons" ফিল্ডের অধীনে আইকনগুলো নিবন্ধন করুন।

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

অতিরিক্ত UI বৈশিষ্ট্য

পপআপ

পপআপ হলো একটি HTML ফাইল যা ব্যবহারকারী টুলবার আইকনে ক্লিক করলে একটি বিশেষ উইন্ডোতে প্রদর্শিত হয়। একটি পপআপ অনেকটা ওয়েব পেজের মতোই কাজ করে; এতে স্টাইলশীটের লিঙ্ক এবং স্ক্রিপ্ট ট্যাগ থাকতে পারে, কিন্তু ইনলাইন জাভাস্ক্রিপ্ট ব্যবহারের অনুমতি নেই।

‘ পানি পান করুন’ ইভেন্টের উদাহরণ পপআপটিতে উপলব্ধ টাইমার বিকল্পগুলো দেখানো হয়। ব্যবহারকারীরা প্রদত্ত বাটনগুলোর মধ্যে যেকোনো একটিতে ক্লিক করে অ্যালার্ম সেট করেন।

<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' টাইপ করেন, তখন এক্সটেনশনটি সক্রিয় হয়। ব্যবহারকারীকে এই বিষয়টি জানানোর জন্য, এটি প্রদত্ত ১৬x১৬ আইকনটিকে ধূসর রঙে পরিবর্তন করে এবং এক্সটেনশনের নামের পাশে অমনিবক্সে অন্তর্ভুক্ত করে।

এক্সটেনশনটি omnibox.onInputEntered ইভেন্টটি শোনে। এটি ট্রিগার হওয়ার পর, এক্সটেনশনটি ব্যবহারকারীর দেওয়া ইনপুটের জন্য একটি গুগল সার্চসহ একটি নতুন ট্যাব খোলে।

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

নতুন মেনু এন্ট্রির পাশে ১৬x১৬ আইকনটি প্রদর্শিত হয়।

ব্যাকগ্রাউন্ড স্ক্রিপ্টে ` 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'
};

গ্লোবাল গুগল সার্চ কনটেক্সট মেনুর উদাহরণটি locales.js-এর তালিকা থেকে একাধিক অপশন তৈরি করে। যখন কোনো এক্সটেনশনে একাধিক কনটেক্সট মেনু থাকে, গুগল ক্রোম স্বয়ংক্রিয়ভাবে সেগুলোকে একটিমাত্র প্যারেন্ট মেনুতে একত্রিত করে ফেলে।

কমান্ড

এক্সটেনশনগুলো নির্দিষ্ট কমান্ড নির্ধারণ করতে এবং সেগুলোকে একটি কী-কম্বিনেশনের সাথে যুক্ত করতে পারে। ম্যানিফেস্টের "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});
  });
});

কমান্ডগুলো একটি কী বাইন্ডিংও তৈরি করতে পারে যা বিশেষভাবে এর এক্সটেনশনের সাথে কাজ করে। হ্যালো এক্সটেনশনস উদাহরণটিতে পপআপ খোলার জন্য একটি কমান্ড দেওয়া হয়েছে।

{
  "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" দিয়ে প্রতিস্থাপন করা যেতে পারে। একই এক্সটেনশনে ব্রাউজার এবং এক্সটেনশন উভয় কমান্ডই ব্যবহার করা যায়।

পৃষ্ঠাগুলি ওভাররাইড করুন

একটি এক্সটেনশন হিস্ট্রি, নিউ ট্যাব বা বুকমার্কস ওয়েব পেজকে একটি কাস্টম এইচটিএমএল ফাইল দিয়ে ওভাররাইড ও প্রতিস্থাপন করতে পারে। একটি পপআপের মতো, এতে বিশেষায়িত লজিক ও স্টাইল অন্তর্ভুক্ত থাকতে পারে, কিন্তু ইনলাইন জাভাস্ক্রিপ্ট ব্যবহারের অনুমতি নেই। একটিমাত্র এক্সটেনশন তিনটি সম্ভাব্য পেজের মধ্যে কেবল একটিকেই ওভাররাইড করতে পারে।

ম্যানিফেস্টের "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>