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

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

विकल्प पेज के व्यवहार का एलान करें

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

पेज के सभी विकल्प

एक्सटेंशन के विकल्प पेज नए टैब में दिखाया जाएगा. विकल्प एचटीएमएल फ़ाइल, 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 (boolean)

    एम्बेड किए गए विकल्पों वाले पेज का एलान करने के लिए, 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 का इस्तेमाल करके मैसेज भेजता है, तो भेजने वाले का टैब सेट नहीं होगा और भेजने वाले का यूआरएल, विकल्पों वाले पेज का यूआरएल होगा.

साइज़ बदलना

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

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