ব্যবহারকারীদের বিকল্প দিন, ব্যবহারকারীদের বিকল্প দিন

ঠিক যেমন এক্সটেনশন ব্যবহারকারীদের ক্রোম ব্রাউজার কাস্টমাইজ করার সুযোগ দেয়, তেমনি অপশন পেজটি এক্সটেনশনটি কাস্টমাইজ করার সুযোগ করে দেয়। বিভিন্ন ফিচার চালু করতে এবং ব্যবহারকারীদের তাদের প্রয়োজন অনুযায়ী কার্যকারিতা বেছে নেওয়ার সুযোগ দিতে অপশন ব্যবহার করুন।

বিকল্প পৃষ্ঠাটি খুঁজে বের করা

ব্যবহারকারীরা সরাসরি লিঙ্কের মাধ্যমে অথবা টুলবারে থাকা এক্সটেনশন আইকনে রাইট-ক্লিক করে এবং তারপর অপশনস নির্বাচন করে অপশনস পেজটি অ্যাক্সেস করতে পারেন। এছাড়াও, ব্যবহারকারীরা প্রথমে chrome://extensions খুলে, কাঙ্ক্ষিত এক্সটেনশনটি খুঁজে, Details-এ ক্লিক করে এবং তারপর অপশনস লিঙ্কটি নির্বাচন করে অপশনস পেজটিতে যেতে পারেন।

ইউজার ইন্টারফেসে অপশন পেজের লিঙ্ক
বিকল্প পৃষ্ঠার লিঙ্ক।
প্রসঙ্গ মেনু বিকল্প পৃষ্ঠা
এক্সটেনশনটির আইকনে ডান-ক্লিক করুন।

বিকল্প পৃষ্ঠাটি লিখুন

নিম্নলিখিতটি একটি বিকল্প পৃষ্ঠার উদাহরণ:

options.html:

<!DOCTYPE html>
<html>
  <head>
    <title>My Test Extension Options</title>
  </head>
  <body>
    <select id="color">
      <option value="red">red</option>
      <option value="green">green</option>
      <option value="blue">blue</option>
      <option value="yellow">yellow</option>
    </select>

    <label>
      <input type="checkbox" id="like" />
      I like colors.
    </label>

    <div id="status"></div>
    <button id="save">Save</button>

    <script src="options.js"></script>
  </body>
</html>

নিচে একটি উদাহরণ অপশন স্ক্রিপ্ট দেওয়া হলো। এটি options.html নামে একই ফোল্ডারে সংরক্ষণ করুন। এটি storage.sync API ব্যবহার করে ব্যবহারকারীর পছন্দের অপশনগুলো বিভিন্ন ডিভাইসে সংরক্ষণ করে।

options.js:

// Saves options to browser.storage
const saveOptions = () => {
  const color = document.getElementById('color').value;
  const likesColor = document.getElementById('like').checked;

  browser.storage.sync.set(
    { favoriteColor: color, likesColor: likesColor },
    () => {
      // Update status to let user know options were saved.
      const status = document.getElementById('status');
      status.textContent = 'Options saved.';
      setTimeout(() => {
        status.textContent = '';
      }, 750);
    }
  );
};

// Restores select box and checkbox state using the preferences
// stored in browser.storage.
const restoreOptions = () => {
  browser.storage.sync.get(
    { favoriteColor: 'red', likesColor: true },
    (items) => {
      document.getElementById('color').value = items.favoriteColor;
      document.getElementById('like').checked = items.likesColor;
    }
  );
};

document.addEventListener('DOMContentLoaded', restoreOptions);
document.getElementById('save').addEventListener('click', saveOptions);

অবশেষে, এক্সটেনশনটির ম্যানিফেস্ট ফাইলে "storage" পারমিশনটি যোগ করুন:

manifest.json:

{
  "name": "My extension",
  ...
  "permissions": [
    "storage"
  ]
  ...
}

বিকল্প পৃষ্ঠার আচরণ ঘোষণা করুন

এক্সটেনশন অপশন পেজ দুই প্রকারের হয়, ফুল পেজ এবং এমবেডেড । ম্যানিফেস্টে কীভাবে এটি ঘোষণা করা হয়েছে, তার ওপর ভিত্তি করে অপশন পেজের ধরনটি নির্ধারিত হয়।

সম্পূর্ণ পৃষ্ঠার বিকল্পগুলি

একটি নতুন ট্যাবে সম্পূর্ণ অপশন পেজ প্রদর্শিত হয়। ম্যানিফেস্টের "options_page" ফিল্ডে অপশন HTML ফাইলটি রেজিস্টার করুন।

manifest.json:

{
  "name": "My extension",
  ...
  "options_page": "options.html",
  ...
}
সম্পূর্ণ পৃষ্ঠার বিকল্পগুলি
নতুন ট্যাবে সম্পূর্ণ পৃষ্ঠার বিকল্পসমূহ।

এমবেডেড অপশন

একটি এমবেডেড অপশন পেজ ব্যবহারকারীদের এমবেডেড বক্সের ভিতরে এক্সটেনশন ম্যানেজমেন্ট পেজ থেকে বাইরে না গিয়েই এক্সটেনশনের অপশনগুলো পরিবর্তন করার সুযোগ দেয়। এমবেডেড অপশনগুলো ডিক্লেয়ার করতে, এক্সটেনশন ম্যানিফেস্টের "options_ui" ফিল্ডের অধীনে HTML ফাইলটি রেজিস্টার করুন এবং "open_in_tab" কী-টির মান false সেট করুন।

manifest.json:

{
  "name": "My extension",
  ...
  "options_ui": {
    "page": "options.html",
    "open_in_tab": false
  },
  ...
}
এমবেডেড অপশন
অন্তর্নিহিত বিকল্পসমূহ।
page (স্ট্রিং)
এক্সটেনশনের রুটের সাপেক্ষে অপশন পেজের পথ নির্দিষ্ট করে।
open_in_tab (বুলিয়ান)
এক্সটেনশনটির অপশন পেজটি একটি নতুন ট্যাবে খোলা হবে কিনা তা নির্দেশ করে। যদি এটি false সেট করা হয়, তাহলে এক্সটেনশনটির অপশন পেজটি নতুন ট্যাবে না খুলে chrome://extensions মধ্যেই এমবেড করা হয়।

পার্থক্যগুলো বিবেচনা করুন

chrome://extensions ভিতরে এমবেড করা অপশন পেজগুলোর আচরণ, ট্যাবে থাকা অপশন পেজগুলো থেকে সূক্ষ্মভাবে ভিন্ন।

বিকল্প পৃষ্ঠার লিঙ্ক

একটি এক্সটেনশন browser.runtime.openOptionsPage() কল করার মাধ্যমে সরাসরি অপশন পেজে লিঙ্ক করতে পারে। উদাহরণস্বরূপ, এটি একটি পপআপে যোগ করা যেতে পারে:

popup.html:

<button id="go-to-options">Go to options</button>
<script src="popup.js"></script>

popup.js:

document.querySelector('#go-to-options').addEventListener('click', function() {
  if (browser.runtime.openOptionsPage) {
    browser.runtime.openOptionsPage();
  } else {
    window.open(browser.runtime.getURL('options.html'));
  }
});

ট্যাব এপিআই

যেহেতু এমবেডেড অপশন কোড কোনো ট্যাবে হোস্ট করা হয় না, তাই ট্যাব এপিআই (Tabs API) ব্যবহার করা যাবে না। যদি অপশন পেজটির ধারণকারী ট্যাবটিকে ম্যানিপুলেট করার প্রয়োজন হয়, তবে এর পরিবর্তে runtime.connect() এবং runtime.sendMessage() ব্যবহার করুন।

মেসেজিং এপিআই

যদি কোনো এক্সটেনশনের অপশন পেজ runtime.connect() বা runtime.sendMessage() ব্যবহার করে কোনো মেসেজ পাঠায়, তাহলে প্রেরকের ট্যাব সেট হবে না এবং প্রেরকের URL হবে অপশন পেজের URL।

আকার নির্ধারণ

এমবেড করা অপশনগুলোর পেজের কন্টেন্টের ওপর ভিত্তি করে স্বয়ংক্রিয়ভাবে নিজেদের আকার নির্ধারণ করা উচিত। তবে, এমবেড করা বক্সটি কিছু নির্দিষ্ট ধরনের কন্টেন্টের জন্য উপযুক্ত আকার খুঁজে নাও পেতে পারে। এই সমস্যাটি সবচেয়ে বেশি দেখা যায় সেইসব অপশন পেজের ক্ষেত্রে, যেগুলো উইন্ডোর আকারের ওপর ভিত্তি করে তাদের কন্টেন্টের আকৃতি সমন্বয় করে।

যদি এটি একটি সমস্যা হয়, তাহলে অপশন পেজটির জন্য একটি নির্দিষ্ট ন্যূনতম মাপ নির্ধারণ করে দিন, যাতে এমবেড করা পেজটি একটি উপযুক্ত আকার খুঁজে পায়।