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

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


Система настроек расширений в 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.         }
  7.  
  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.

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