Google आपकी पसंदीदा भाषा में कॉन्टेंट का अनुवाद करने के लिए, एआई टेक्नोलॉजी का इस्तेमाल करता है. एआई से मिले अनुवादों में गलतियां हो सकती हैं.

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

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

options.js:

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

  browser.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 browser.storage.
const restoreOptions = () => {
  browser.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 (string): यह एक्सटेंशन के रूट के हिसाब से, विकल्प वाले पेज का पाथ तय करता है.
open_in_tab (बूलियन): इससे पता चलता है कि एक्सटेंशन के विकल्प वाला पेज, नए टैब में खुलेगा या नहीं. अगर इसे false पर सेट किया जाता है, तो एक्सटेंशन के विकल्प वाला पेज, नए टैब में खुलने के बजाय chrome://extensions में एम्बेड हो जाता है.

अंतरों के बारे में जानकारी

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

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

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

Tabs API

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

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

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

साइज़ बदलना

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

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