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

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

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

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

API для обмена сообщениями

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

Размер

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

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