उपयोगकर्ताओं को विकल्प दें

उपयोगकर्ताओं को विकल्प पेज उपलब्ध कराकर, एक्सटेंशन के काम करने के तरीके को पसंद के मुताबिक बनाने की अनुमति दें. कोई व्यक्ति, एक्सटेंशन के विकल्पों को इन तरीकों से देख सकता है: टूलबार में मौजूद एक्सटेंशन के आइकॉन पर राइट क्लिक करके, फिर विकल्प चुनकर या chrome://extensions पर जाकर एक्सटेंशन मैनेजमेंट पेज पर जाकर, मनचाहा एक्सटेंशन ढूंढकर, ज़्यादा जानकारी पर क्लिक करके, फिर विकल्प लिंक चुनकर.

विकल्प पेज लिखना

यहाँ विकल्पों वाले पेज का उदाहरण दिया गया है.

<!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);

विकल्प पेज के व्यवहार के बारे में जानकारी देना

एक्सटेंशन के विकल्प वाले पेज दो तरह के होते हैं: फ़ुल पेज और एम्बेड किया गया. विकल्पों का टाइप, मेनिफ़ेस्ट में तय किया जाता है.

पूरे पेज के विकल्प

एक्सटेंशन का विकल्प पेज, नए टैब में दिखेगा. विकल्पों वाली एचटीएमएल फ़ाइल, options_page फ़ील्ड में रजिस्टर की गई है.

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

पूरे पेज के विकल्प

एम्बेड करने के विकल्प

एम्बेड किए गए विकल्पों की मदद से, उपयोगकर्ता एम्बेड किए गए बॉक्स में एक्सटेंशन मैनेजमेंट पेज से हटे बिना, एक्सटेंशन के विकल्पों में बदलाव कर सकते हैं. एम्बेड किए गए विकल्पों का एलान करने के लिए, एक्सटेंशन मेनिफ़ेस्ट में मौजूद options_ui फ़ील्ड में एचटीएमएल फ़ाइल रजिस्टर करें. साथ ही, open_in_tab कुंजी को false पर सेट करें.

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

एम्बेड करने के विकल्प

  • page (string)

    एक्सटेंशन के रूट के हिसाब से, विकल्प वाले पेज का पाथ.

  • 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 API के इस्तेमाल पर असर पड़ता है:

  • tabs.query, एक्सटेंशन के विकल्प वाले पेज के यूआरएल में मौजूद टैब को कभी नहीं खोजेगा.
  • विकल्प पेज खोले जाने पर, tabs.onCreated ट्रिगर नहीं होगा.
  • विकल्प पेज के लोड होने की स्थिति बदलने पर, tabs.onUpdated ट्रिगर नहीं होगा.
  • विकल्प पेज से कम्यूनिकेट करने के लिए, tabs.connect या tabs.sendMessage का इस्तेमाल नहीं किया जा सकता.

अगर विकल्प वाले पेज को टैब में बदलाव करने की ज़रूरत है, तो इन पाबंदियों को runtime.connect और runtime.sendMessage का इस्तेमाल करके हटाया जा सकता है.

Messaging API

अगर किसी एक्सटेंशन का विकल्प पेज, runtime.connect या runtime.sendMessage का इस्तेमाल करके कोई मैसेज भेजता है, तो Sender's tab सेट नहीं होगा. साथ ही, Sender's URL, विकल्प पेज का यूआरएल होगा.

साइज़ बदलना

एम्बेड किए गए विकल्पों का साइज़, पेज के कॉन्टेंट के आधार पर अपने-आप तय होना चाहिए. हालांकि, ऐसा हो सकता है कि एम्बेड किए गए बॉक्स को कुछ तरह के कॉन्टेंट के लिए सही साइज़ न मिले. यह समस्या, उन विकल्प पेजों के लिए सबसे आम है जो विंडो के साइज़ के हिसाब से अपने कॉन्टेंट का आकार बदलते हैं.

अगर यह समस्या है, तो विकल्प वाले पेज के लिए तय किए गए कम से कम डाइमेंशन दें, ताकि एम्बेड किए गए पेज का साइज़ सही हो.