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

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

با استفاده از storage.sync API، گزینه‌های برگزیده کاربر را در همه دستگاه‌ها ذخیره کنید.

// 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 (رشته)

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

  • 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'));
  }
});

Tabs API

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

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

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

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

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

سایز بندی

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

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