इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

जिस तरह एक्सटेंशन उपयोगकर्ताओं को Chrome ब्राउज़र को पसंद के मुताबिक बनाने की सुविधा देते हैं, उसी तरह विकल्प पेज पर एक्सटेंशन को पसंद के मुताबिक बनाने की सुविधा चालू होती है. सुविधाओं को चालू करने के लिए विकल्पों का इस्तेमाल करें. साथ ही, लोगों को यह चुनने की अनुमति दें कि उनकी ज़रूरतों के हिसाब से कौनसी सुविधाएं सही हैं.

विकल्प पेज का पता लगाना

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

यूज़र इंटरफ़ेस में 'विकल्प' पेज का लिंक — 'विकल्प' पेज का लिंक.

कॉन्टेक्स्ट मेन्यू के विकल्पों का पेज — एक्सटेंशन के आइकॉन पर राइट क्लिक करें.

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

नीचे विकल्प पेज का एक उदाहरण दिया गया है:

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

options.js:

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

  chrome.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 chrome.storage.
const restoreOptions = () => {
  chrome.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" फ़ील्ड के मेनिफ़ेस्ट में विकल्प एचटीएमएल फ़ाइल को रजिस्टर करें.

manifest.json:

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

एम्बेड किए गए विकल्प

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

manifest.json:

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

page (स्ट्रिंग): एक्सटेंशन के रूट के आधार पर, विकल्पों वाले पेज का पाथ बताता है.
open_in_tab (boolean): यह बताता है कि एक्सटेंशन के विकल्प पेज को नए टैब में खोला जाएगा या नहीं. अगर एक्सटेंशन के विकल्प पेज को false पर सेट किया जाता है, तो उसे नए टैब में खोलने के बजाय, chrome://extensions में एम्बेड कर दिया जाता है.

अंतर पर विचार करें

chrome://extensions में एम्बेड किए गए विकल्प पेजों के काम करने के तरीके, टैब में मौजूद विकल्प पेजों से बहुत कम होते हैं.

विकल्प पेज से लिंक करें

एक्सटेंशन, chrome.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 (chrome.runtime.openOptionsPage) {
    chrome.runtime.openOptionsPage();
  } else {
    window.open(chrome.runtime.getURL('options.html'));
  }
});

टैब एपीआई

एम्बेड किए गए विकल्प कोड को किसी टैब में होस्ट नहीं किया जाता, इसलिए Tabs API का इस्तेमाल नहीं किया जा सकता. अगर विकल्प वाले पेज में, वीडियो वाले टैब में हेर-फेर करने की ज़रूरत है, तो runtime.connect() और runtime.sendMessage() का इस्तेमाल करें.

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

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

साइज़ बदलना

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

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