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

Подобно тому, как расширения позволяют пользователям настраивать браузер Chrome, страница настроек позволяет настраивать и само расширение. Используйте параметры, чтобы включить функции и позволить пользователям выбирать те возможности, которые соответствуют их потребностям.

Найти страницу параметров

Пользователи могут получить доступ к странице настроек по прямой ссылке или щелкнув правой кнопкой мыши значок расширения на панели инструментов и выбрав «Настройки». Кроме того, перейти на страницу настроек можно, сначала открыв 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 . Это позволит сохранять предпочтительные параметры пользователя на разных устройствах с помощью API storage.sync .

options.js:

// Saves options to browser.storage
const saveOptions = () => {
  const color = document.getElementById('color').value;
  const likesColor = document.getElementById('like').checked;

  browser.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 browser.storage.
const restoreOptions = () => {
  browser.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 страницы настроек имеют незначительные отличия в поведении по сравнению со страницами настроек во вкладках.

Ссылка на страницу с настройками

Расширение может напрямую ссылаться на страницу параметров, вызвав метод browser.runtime.openOptionsPage() . Например, его можно добавить во всплывающее окно:

popup.html:

<button id="go-to-options">Go to options</button>
<script src="popup.js"></script>

popup.js:

document.querySelector('#go-to-options').addEventListener('click', function() {
  if (browser.runtime.openOptionsPage) {
    browser.runtime.openOptionsPage();
  } else {
    window.open(browser.runtime.getURL('options.html'));
  }
});

API вкладок

Поскольку встроенный код параметров не размещается во вкладке, API вкладок использовать нельзя. Вместо этого используйте runtime.connect() и runtime.sendMessage() , если странице параметров необходимо управлять содержащей её вкладкой.

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

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

Размер

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

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