Расширения для Opera: Страница настроек перевод

Вступление

В этой статье рассказывается как использовать новую фичу расширений для Opera, называемую страницей настроек. Это страница в расширении, которая содержит настройки, которые может устанавливать пользователь. Эта страница называется options.html и находится в корневой папке расширения.

Работает это предельно просто — когда вы устанавливаете расширение, если Opera находит в нём файл options.html, то делает активной кнопку Preferences для данного расширения в менеджере расширений (Tools > Extensions > Manage Extensions).

Вы можете размещать на странице настроек всё, что захотите, но вообще там должны располагаться элементы формы, которые позволят пользователя выбрать различные настройки и сохранить их изменения в localStorage либо widget.preferences для их использования в расширении. В этой статье мы предложим вам просто расширение, содержащее шаблон страницы настроек, который вы можете спокойной использовать в своих собственных расширениях.

Представляем шаблон

Перед тем, как идти дальше, скачайте наше тестовое расширение. Шаблон, содержащийся в нём, на самом деле ничего не делает и используется лишь для того, чтобы показать функциональность страницы настроек. Установите расширение, затем отправляйтесь в менеджер расширений и нажмите кнопку с шестернёй. Вы увидите, что опцию «Preferences», как это показано на Рисунке 1.



Рисунок 1: Новая функциональность расширений для Opera, доступная через менеджер расширений.

Когда вы выберете опцию «Preferences», откроется страница настроек, которая выглядит так, как это показано на Рисунке 2.



Рисунок 2: Страница настроек тестового расширения, содержащая элементы формы, позволяющие пользователя определять настройки расширения.

Как работает страница расширений?

Если вы распакуете тестовое расширение, то найдёте в корне файл options.html. Существование этого файла говорит Opera о необходимости сделать доступным пункт «Preferences». Ответственность за корректное функционирование этой страницы возлагается на вас.

К счаcтью, вы можете использовать наш шаблон для экономии времени. Он содержит набор элементов формы, позволяющих вам выбирать различные опции для настроек расширения, плюс немного умного JavaScript.

Когда пользователь открывает страницу, скрипт проходит по всем элементам <select> и <input> с аттрибутом name и устанавливаем им соответствующие значения из widget.preferences. Вы можете спокойно удалять или добавлять элементы на страницу, скрипт продолжит корректно функционировать.

В дополнение, это скрипт автоматически устанавливает заголовок страницы, его название и имя автора, используя значения из объекта window.widget, который в свою очередь берёт их в config.xml.

По умолчанию, значения настроек вписаны в разметку файла options.html. Когда пользователь изменяет значение любого элемента формы, оно моментально сохраняется в объекте widget.preferences. Вам даже не нужно делать сабмит формы!

Интерфейс widget.preferences представляет собой тоже самое, что и объект localStorage, за исключением того, что не имеет такого же ограничения по размеру и его значения по умолчанию могут быть определены в секции «preference» файла config.xml, как указано в секции The preference Element and its Attributes спецификации Widget Packaging and Configuration. В момент, когда скрипт нашего options.html сохраняет значение в объект widget.preferences, возбуждается событие во всех активных документах расширения (особенно в фоновом скрипте). Перехватывая это событие, фоновый скрипт может немедленно реагировать на изменение настроек.

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

Для обработки настроект с множественными значениями, такими как группа чекбоксов или множественные селекты, мы сливаем/разделяем множественные значения используя переменную glue: это простая \n. Если ваше расширение требует более сложного интерфейса настроек, то вам следуют написать свою собственную версию файла options.html для корректной работы.

Итоги

На этом завершается наш тур по функциональности страницы настроек расширений для Opera. Смело берите наш шаблон и используйте его в своих расширениях.