Страница настроек

Страница настроек позволяет определять предпочтения для вашей расширения, которые могут изменить ваши пользователи. Пользователи могут получить доступ к странице настроек расширения из менеджера дополнений браузера:

Способ доступа пользователей к странице и ее интеграция в пользовательский интерфейс браузера будут различаться в зависимости от браузера.

Вы можете открыть страницу программно, вызвав runtime.openOptionsPage().

Страницы настроек имеют политику безопасности содержимого, которая ограничивает источники, из которых они могут загружать ресурсы, и запрещает некоторые небезопасные практики, такие как использование eval(). Более подробную информацию см. на странице Политика безопасности содержимого.

Определение страницы настроек

Чтобы создать страницу настроек, напишите HTML-файл, определяющий страницу. Эта страница может включать CSS- и JavaScript-файлы, как и обычная веб-страница. Эта страница из примера favourite-color включает JavaScript-файл:

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />
  </head>

  <body>
    <form>
      <label for="color">Favorite color</label>
      <input type="text" id="color" name="color" />
      <button type="submit">Save</button>
    </form>
    <script src="options.js"></script>
  </body>
</html>

JavaScript, выполняющийся на странице, может использовать все API WebExtension, для которых дополнение имеет разрешения. В частности, вы можете использовать API storage для сохранения предпочтений.

Упакуйте файлы страницы в ваше расширение.

Вы также должны включить ключ options_ui в свой файл manifest.json, указав URL страницы.

"options_ui": {
  "page": "options.html",
  "browser_style": true
},

Примечание: Google Chrome и Opera используют chrome_style вместо browser_style, поэтому, если вы хотите их поддержать, вам нужно добавить оба ключа.

См. страницу options_ui для обмена настройками между страницей настроек и скриптами фонового или контентного процессов.

Дизайн содержимого страницы настроек

Подробную информацию о том, как спроектировать содержимое страницы настроек, чтобы оно соответствовало стилю Firefox, см. в документации Acorn Design System и стили браузера.

Примеры

Репозиторий webextensions-examples на GitHub включает пример favourite-color, реализующий функции страницы настроек.

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages