Расширения Firefox — Работа с настройками

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

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


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

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