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

विकल्प पेज देकर, उपयोगकर्ताओं को एक्सटेंशन के व्यवहार को पसंद के मुताबिक बनाने की अनुमति दें. एक उपयोगकर्ता देख सकता है किसी एक्सटेंशन पर क्लिक करने के लिए, टूलबार में एक्सटेंशन आइकॉन पर राइट क्लिक करें. इसके बाद, विकल्पों को चुनें या इसके लिए, 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 एपीआई का इस्तेमाल करके, उपयोगकर्ता की पसंद के विकल्पों को सभी डिवाइसों पर सेव करें.

// 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 फ़ील्ड में मौजूद है, जिसमें open_in_tab कुंजी इस पर सेट है गलत.

{
  "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 को कभी भी किसी एक्सटेंशन के विकल्प पेज यूआरएल में कोई टैब नहीं मिलेगा.
  • विकल्प पेज खुलने पर tabs.onCreated का इस्तेमाल करना चालू नहीं होगा.
  • विकल्प पेज के लोड की स्थिति में बदलाव होने पर, tabs.onUpdated ट्रिगर नहीं होगा.
  • विकल्प पेज से इंटरैक्ट करने के लिए, tabs.connect या tabs.sendMessage का इस्तेमाल नहीं किया जा सकता.

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

मैसेजिंग एपीआई

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

साइज़ बदलना

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

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