Предоставьте пользователям варианты, Предоставьте пользователям варианты

Разрешите пользователям настраивать поведение расширения, предоставив страницу параметров. Пользователь может просмотреть параметры расширения, щелкнув правой кнопкой мыши значок расширения на панели инструментов и выбрав параметры, или перейдя на страницу управления расширениями по адресу 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 (строка)

    Путь к странице параметров относительно корня расширения.

  • open_in_tab (логическое значение)

    Укажите значение false , чтобы объявить встроенную страницу параметров. Если true , страница параметров расширения будет открыта на новой вкладке, а не встроена в chrome://extensions .

Рассмотрим различия

Страницы параметров, встроенные в расширения chrome:// , имеют некоторые тонкие различия в поведении, связанные с тем, что они не размещаются на собственных вкладках.

Ссылка на страницу параметров

Расширение может напрямую ссылаться на страницу параметров, вызывая 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 вкладок

Код страницы встроенных параметров расширения не размещается внутри вкладки, что влияет на использование API вкладок :

  • tabs.query никогда не найдет вкладку в URL-адресе страницы параметров расширения.
  • tabs.onCreated не сработает при открытии страницы параметров.
  • tabs.onUpdated не сработает при изменении состояния загрузки страницы параметров.
  • tabs.connect или tabs.sendMessage нельзя использовать для связи со страницей параметров.

Использование runtime.connect и runtime.sendMessage позволяет обойти эти ограничения, если странице параметров необходимо манипулировать содержащейся вкладкой.

API-интерфейсы обмена сообщениями

Если страница параметров расширения отправляет сообщение с помощью runtime.connect или runtime.sendMessage , вкладка «Отправитель» не будет установлена, а URL-адрес отправителя будет URL-адресом страницы параметров.

Размеры

Встроенные параметры должны автоматически определять свой размер в зависимости от содержимого страницы. Однако встроенный блок может не подходить по размеру для некоторых типов контента. Эта проблема наиболее распространена на страницах параметров, форма содержимого которых регулируется в зависимости от размера окна.

Если это проблема, укажите фиксированные минимальные размеры для страницы параметров, чтобы гарантировать, что встроенная страница найдет подходящий размер.