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

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

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

নিচে একটি বিকল্প পৃষ্ঠার নমুনা দেওয়া হলো।

<!DOCTYPE html>
<html>
<head><title>My Test Extension Options</title></head>
<body>

Favorite color:
<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>

storage.sync API ব্যবহার করে ব্যবহারকারীর পছন্দের অপশনগুলো বিভিন্ন ডিভাইসে সংরক্ষণ করুন।

// Saves options to chrome.storage
function save_options() {
  var color = document.getElementById('color').value;
  var likesColor = document.getElementById('like').checked;
  chrome.storage.sync.set({
    favoriteColor: color,
    likesColor: likesColor
  }, function() {
    // Update status to let user know options were saved.
    var status = document.getElementById('status');
    status.textContent = 'Options saved.';
    setTimeout(function() {
      status.textContent = '';
    }, 750);
  });
}

// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
function restore_options() {
  // Use default value color = 'red' and likesColor = true.
  chrome.storage.sync.get({
    favoriteColor: 'red',
    likesColor: true
  }, function(items) {
    document.getElementById('color').value = items.favoriteColor;
    document.getElementById('like').checked = items.likesColor;
  });
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click',
    save_options);

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

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

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

একটি এক্সটেনশনের অপশন পেজ একটি নতুন ট্যাবে প্রদর্শিত হবে। অপশন HTML ফাইলটি options_page ফিল্ডের অধীনে নিবন্ধিত হিসেবে তালিকাভুক্ত থাকে।

{
  "name": "My extension",
  ...
  "options_page": "options.html",
  ...
}

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

এমবেডেড অপশন

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

{
  "name": "My extension",
  ...
  "options_ui": {
    "page": "options.html",
    "open_in_tab": false
  },
  ...
}

এমবেডেড অপশন

  • page (স্ট্রিং)

    এক্সটেনশনটির রুটের সাপেক্ষে অপশন পেজের পাথ।

  • open_in_tab (বুলিয়ান)

    একটি এমবেডেড অপশন পেজ ঘোষণা করতে false উল্লেখ করুন। যদি true , তাহলে এক্সটেনশনটির অপশন পেজটি chrome://extensions- এ এমবেড না হয়ে একটি নতুন ট্যাবে খুলবে।

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

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

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

একটি এক্সটেনশন chrome.runtime.openOptionsPage() কল করার মাধ্যমে সরাসরি অপশন পেজে লিঙ্ক করতে পারে।

<button id="go-to-options">Go to options</button>

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

ট্যাব এপিআই

এক্সটেনশনের এমবেডেড অপশন পেজের কোড কোনো ট্যাবের ভেতরে হোস্ট করা হয় না, যা ট্যাব এপিআই (Tabs API) ব্যবহারের পদ্ধতিকে প্রভাবিত করে:

  • `tabs.query` কোনো এক্সটেনশনের অপশন পেজের URL-এর মধ্যে থাকা ট্যাবকে কখনোই খুঁজে পাবে না।
  • অপশন পেজ খোলার সময় tabs.onCreated কার্যকর হবে না।
  • অপশন পেজের লোড স্টেট পরিবর্তিত হলে tabs.onUpdated ফাংশনটি ফায়ার হবে না।
  • অপশন পেজের সাথে যোগাযোগের জন্য tabs.connect বা tabs.sendMessage ব্যবহার করা যায় না।

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

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

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

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

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

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