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

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

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

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

विकल्पों वाला पेज लिखें

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

options.html:

  
    
  
  
    
      red
      green
      blue
      yellow
    

    
      
      I like colors.
    

    

    Save

    
  

विकल्प स्क्रिप्ट का एक उदाहरण नीचे दिया गया है. इसे उसी फ़ोल्डर में सेव करें जिसमें 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 (बूलियन)

इससे पता चलता है कि एक्सटेंशन का विकल्प पेज, नए टैब में खुलेगा या नहीं. अगर false पर सेट किया जाता है, तो एक्सटेंशन के विकल्प पेज को नए टैब में खोलने के बजाय, chrome://extensions में एम्बेड किया जाता है.

दोनों के बीच के अंतर को ध्यान में रखें

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

विकल्प पेज का लिंक

एक्सटेंशन कॉल करके विकल्प पेज से सीधे लिंक कर सकता है chrome.runtime.openOptionsPage(). उदाहरण के लिए, उसे किसी पॉप-अप में जोड़ा जा सकता है:

popup.html:

Go to options

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 एपीआई का इस्तेमाल नहीं किया जा सकता. इसके बजाय, runtime.connect() और runtime.sendMessage() का इस्तेमाल करें. विकल्प पेज को शामिल करने वाले टैब में हेर-फेर करना ज़रूरी है.

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

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

साइज़ बदलना

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

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