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

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

با استفاده از رابط برنامه‌نویسی کاربردی (API) 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);

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

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

گزینه‌های تمام صفحه

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

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

گزینه‌های تمام صفحه

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

گزینه‌های تعبیه‌شده به کاربران اجازه می‌دهد گزینه‌های افزونه را بدون نیاز به خروج از صفحه مدیریت افزونه‌ها در داخل یک کادر تعبیه‌شده تنظیم کنند. برای اعلام گزینه‌های تعبیه‌شده، فایل HTML را در زیر فیلد options_ui در مانیفست افزونه ثبت کنید و کلید open_in_tab را روی false تنظیم کنید.

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

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

  • page (رشته)

    مسیر صفحه گزینه‌ها، نسبت به ریشه افزونه.

  • تابع (boolean) برای باز کردن در تب ( open_in_tab )

    برای اعلام صفحه گزینه‌های جاسازی‌شده، آن را به صورت 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'));
  }
});

API تب‌ها

کد صفحه گزینه‌های تعبیه‌شده در افزونه، درون یک تب میزبانی نمی‌شود و این موضوع بر نحوه استفاده از Tabs API تأثیر می‌گذارد:

  • tabs.query هرگز تبی را در آدرس اینترنتی صفحه گزینه‌های افزونه پیدا نمی‌کند.
  • tabs.onCreated هنگام باز شدن صفحه گزینه‌ها اجرا نخواهد شد.
  • tabs.onUpdated وقتی وضعیت بارگذاری صفحه options تغییر کند، اجرا نخواهد شد.
  • از tabs.connect یا tabs.sendMessage نمی‌توان برای ارتباط با صفحه گزینه‌ها استفاده کرد.

اگر صفحه گزینه‌ها نیاز به دستکاری تب حاوی اطلاعات داشته باشد، استفاده از runtime.connect و runtime.sendMessage می‌تواند این محدودیت‌ها را دور بزند.

APIهای پیام‌رسانی

اگر صفحه گزینه‌های یک افزونه با استفاده از runtime.connect یا runtime.sendMessage پیامی ارسال کند، تب فرستنده تنظیم نخواهد شد و نشانی اینترنتی فرستنده، نشانی اینترنتی صفحه گزینه‌ها خواهد بود.

اندازه

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

اگر این یک مشکل است، حداقل ابعاد ثابتی را برای صفحه گزینه‌ها ارائه دهید تا مطمئن شوید که صفحه جاسازی‌شده اندازه مناسبی را پیدا می‌کند.