به کاربران گزینه هایی بدهید، به کاربران گزینه هایی بدهید

همانطور که برنامه‌های افزودنی به کاربران اجازه می‌دهند مرورگر کروم را سفارشی کنند، صفحه گزینه‌ها نیز سفارشی‌سازی برنامه افزودنی را فعال می‌کند. از گزینه‌ها برای فعال کردن ویژگی‌ها استفاده کنید و به کاربران اجازه دهید تا انتخاب کنند چه عملکردی با نیازهایشان مرتبط است.

مکان یابی صفحه گزینه ها

کاربران می توانند با لینک مستقیم یا با کلیک راست بر روی نماد برنامه افزودنی در نوار ابزار و سپس انتخاب گزینه ها به صفحه گزینه ها دسترسی پیدا کنند. علاوه بر این، کاربران می‌توانند ابتدا با باز کردن 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 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"
  ]
  ...
}

رفتار صفحه گزینه ها را اعلام کنید

دو نوع صفحه گزینه های افزونه وجود دارد، صفحه کامل و جاسازی شده . نوع صفحه گزینه ها بر اساس نحوه اعلام آن در مانیفست تعیین می شود.

گزینه های صفحه کامل

یک صفحه گزینه های کامل صفحه در یک برگه جدید نمایش داده می شود. فایل HTML گزینه ها را در مانیفست در قسمت "options_page" ثبت کنید.

manifest.json:

{
  "name": "My extension",
  ...
  "options_page": "options.html",
  ...
}
گزینه های صفحه کامل
گزینه های صفحه کامل در یک برگه جدید.

گزینه های تعبیه شده

یک صفحه گزینه های جاسازی شده به کاربران اجازه می دهد تا گزینه های برنامه افزودنی را بدون دور شدن از صفحه مدیریت برنامه های افزودنی در یک کادر تعبیه شده تنظیم کنند. برای اعلام گزینه‌های تعبیه‌شده، فایل 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: