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

Первую статью, надеюсь из будущего цикла моих статей, можно найти здесь.

Система настроек расширений в Firefox имеет очень простую структуру. Наберите в адресной строке about:config, и вы увидите все настройки не только самого браузера, но и всех установленных расширений. Тут же их можно изменить под свои нужды.

Чтобы ваше расширение имело собственный набор настроек, нужно создать каталог defaults/preferences (если он ранее не был создан) и поместить туда .js-файл с настройками. Вот пример такого файла.

1. pref("extensions.sample.username", "Joe");
2. pref("extensions.sample.sort", 2);
3. pref("extensions.sample.showAdvanced", true);

* This source code was highlighted with Source Code Highlighter.

Таким образом, мы создали набор настроек по-умолчанию. Перезапустите Firefox. Теперь просмотреть, а также изменить значения этих параметров можно на странице about:config.

Чтение настроек

Следующий отрывок кода показывает, как получить доступ к настройкам:

1. init : function()
2. {
3. this.prefs = Components.classes["@mozilla.org/preferences-service;1"]
4. .getService(Components.interfaces.nsIPrefService)
5. .getBranch("extensions.sample.");
6. this.prefs.QueryInterface(Components.interfaces.nsIPrefBranch2);
7. this.prefs.addObserver("", this, false);
8. }

* This source code was highlighted with Source Code Highlighter.

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

Итак, теперь переменная this.prefs ссылается на объект с интерфейсом nsIPrefBranch. Прочитать значения какой либо опции можно следующим образом:

1. this.prefs.getCharPref("username");

* This source code was highlighted with Source Code Highlighter.

Т.к. при инициализации объекта настроек мы указали в качестве пространства имен extensions.sample., то будет прочитана опция extensions.sample.username, которую мы создали ранее.

Дополнительно о методах предоставляемых интерфейсом nsIPrefBranch можно прочитать тут.

Изменение настроек

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

Создайте файл options.xul в каталоге chrome/content и добавьте в него следующее содержимое:

1. <?xml version="1.0"?>
2. <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
3. <prefwindow id="test-prefs"
4. title="Test options"
5. xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
6. <prefpane id="test-pane" label="Test Settings">
7. <preferences>
8. <preference id="pref_username" name="extensions.sample.username" type="string"/>
9. </preferences>
10. <hbox align="center">
11. <label control="username" value="Username: "/>
12. <textbox preference="pref_username" id="username" maxlength="24"/>
13. </hbox>
14. </prefpane>
15. </prefwindow>

* This source code was highlighted with Source Code Highlighter.

Теперь по порядку:

• <prefpane> — является контейнером для элементов управления диалогового окна, также этот элемент содержит ссылки на настройки компонента
• <preferences> — содержит ссылки на опции вашего компонента
• <preference> — ссылка на опцию. В параметре name указывается имя опции, в параметре type тип этой опции (string, int или boolean), параметр id задает идентификатор настройки внутри диалогового окна, по которому уже элементы управления будут сами считывать и записывать значения настроек (посмотрите на атрибут preference элемента textbox)
• Далее следуют элементы управления диалогового окна, с помощью которых можно изменить опции вашего расширения

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

И последнее, о чем я хотел рассказать — это реакция расширения на какие-либо изменения его настроек. В самом начале мы указали, что хотим обрабатывать все сообщения, связанные с изменением настроек. Вот пример функции, которая может с этим справиться:

1. observe: function(subject, topic, data)
2. {
3. if (topic != "nsPref:changed")
4. {
5. return;
6. }
8. switch(data)
9. {
10. case "username":
11. alert(this.getUserName());
12. break;
13. }
14. }

* This source code was highlighted with Source Code Highlighter.

Коротко о входных параметрах:

1. subject — ссылка на измененный объект или событие (подробней тут)
2. topic — указывает на тип события, нас в данном случае интересует «nsPref:changed»
3. data — это данные, передаваемые вместе с событием, в нашем случае это будет имя опции, которую изменили

Это необходимый минимум для работы с настройками расширений, более подробно можно об этом узнать по предоставленным мною ссылкам или на сайте developer.mozilla.org.

Исходники примера можно взять здесь.

http://habrahabr.ru/blogs/firefox/72117/