INODE.RU / / Программирование / Создание расширения для FireFox (первые шаги)

Авторизация Регистрация

Создание расширения для FireFox (первые шаги)

Статья добавлена: 2005-10-04

Одним из полезнейших свойств популярного браузера FireFox является система расширений (extentions). Благодаря им возможно получить дополнительную функциональность, отсутсвующую в самом браузере. И если Вы не нашли нужных вам расширений среди уже сущестующих, можно (и нужно) попробовать написать самому. В Интернете можно найти достаточно документации, как создавать расширения для браузера FireFox, но русскоязычных довольно мало. Так что я решил слегка исправить это положение и написать этот текст.

Вступление

Файловая структура

Расширения FireFox имеют собственную структуру файлов и нам нужно создать ее правильно, чтобы все работало как надо. Прежде всего, создадим корневой каталог, где будут размещаться все файлы расширения. Логично, что первое созданное мной расширение будет выводить фразу "Hello World!", так что назовем верхний каталог HelloWorld.

Внутри создадим еще одну директорую. Ее имя должно быть chrome (обязательно в нижнем регистре). А внутри еще директорию content (опять в нижнем регистре). Таким образом, мы создали файловую структуру следующего вида:

+- HelloWorld/
   +- chrome/
      +- content/

Начинаем работу

В любом расширении FireFox должно быть как минимум два файла - install.rdf и contents.rdf. В первом описано, как наше расширение будет устанавливатся в браузер, второй файл определяет структуру расширения. Это простые текстовые файлы в XML-формате, так что их можно созавать в любом текстовом редакторе. Но для удобства, лучше пользоваться специальными редакторами для xml-файлов (например: XMLSpy). Расширение rdf - это сокращение для "Resource Description Framework".

install.rdf

Сперва мы создадим "install.rdf". Этот файл должен располагаться на самом верхнем уровне нашей файловой иеирархии.

+- HelloWorld/
   +- install.rdf
   +- chrome/
      +- content/

В этом файле мы должны описать наше расширения для менеджера расширений браузера FireFox, сообщив ему разную полезную информацию (например - с какими версиями браузера совместимо данное расширение).

<?xml version="1.0"?>

<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:em="http://www.mozilla.org/2004/em-rdf#">

  <Description about="urn:mozilla:install-manifest">

  <em:creator>Vasya Pupkin</em:creator>
  <em:description>A very simple Firefox extention</em:description>
  <em:homepageURL>http://www.google.com/</em:homepageURL>
  <em:id>{65b3130e-8513-41b6-8ea8-43dbd9cc0b12}</em:id>
  <em:name>HelloWorld</em:name>
  <em:version>1.0</em:version>
  
  
  <em:targetApplication>
    <Description>
      <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
      <em:minVersion>1.0</em:minVersion>
      <em:maxVersion>1.0</em:maxVersion>
    </Description>
  </em:targetApplication>
  
  <em:file>
    <Description about="urn:mozilla:extension:file:HelloWorld.jar">
      <em:package>content/</em:package>
    </Description>
  </em:file>
  
  </Description>
  
</RDF>

Первые строки говорит нам, что этот файл - ничто иное как стандартный XML-файл. Так что давайте посмотрим, а какие данные нам надо предоставить для менеджера расширений.

  <em:creator>Vasya Pupkin</em:creator>
  <em:description>A very simple Firefox extention.</em:description>
  <em:homepageURL>http://www.google.ru/</em:homepageURL>
  <em:id>{65b3130e-8513-41b6-8ea8-43dbd9cc0b12}</em:id>
  <em:name>HelloWorld</em:name>
  <em:version>1.0</em:version>

Первая строка указывает автора кода, для чего используется тег <em:creator>. В данном случае укажем авторство на Васю Пупкина :-). Следующая строка - краткое описание того, а для чего, собственно, это расширение предназначено. Эта информация будет видна пользователям в менеджере расширений. Третья строка указывает на домашную страницу расширения.

Четвертая строка в этой секции, в таге <em:id>, это наиболее важная информация в всем файле. Здесь указывается уникальный идентификатор вашего расширения. Существует много способов генерации уникальных идентификаторов. Вот несколько рекомендованных:

GUID Generator от Andy Hoskinson: http://www.hoskinson.net/webservices/guidgeneratorclient.aspx
GUID Generator от Microsoft: http://www.microsoft.com/downloads/details...displaylang=en
Программа для генерации множества ID: http://kruithof.xs4all.nl/uuid/uuidgen
Бот, генерирующий GUID в IRC-чате. Запрос /msg thebot uuid: irc.mozilla.org

Создайте любым доступным способом уникальный идентификатор и поместите его в таг <em:id>.

Следующий таг <em:name> содержит название расширения, как оно будет отображаться в менеджере расширений. Не стоит указывать здесь версию, так как для этого существует отдельный таг <em:version>

Мы описали некоторые характеристики нашего расширения, теперь посмотрим, что еще нужно указать в этом файле. Посмотрим на этот кусок текста:


<em:targetApplication>
  <Description>
    <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
    <em:minVersion>1.0</em:minVersion>
    <em:maxVersion>1.0</em:maxVersion>
  </Description>
</em:targetApplication>

Эта запись определяет, для какого приложения предназначено это расширение. В данном случае в таге <em:name> указан уникальный код браузера FireFox и его значение не должно изменяться. Здесь же мы видим два тага для указания минимальной и максимальной версии приложения, с которыми данное расширение совместимо. В нашем случае эти два значения совпадают. Текущая версия FireFox придерживается следующего соглашения по версиям.

major.minor.release.build[+]

Поля, следующие за major - необязательны. Подробности можно узнать в этой статье на сайте mozilla.org.

Многие расширения могут успешно работать и в браузере Mozilla. Так что в файле install.rdf можно встретить и такой текст (вместе с вышеуказанным).


<em:targetApplication>
  <Description>
    <em:id>{86c18b42-e466-45a9-ae7a-9b95ba6f5640}</em:id>
    <em:minVersion>1.6</em:minVersion>
    <em:maxVersion>1.8+</em:maxVersion>
  </Description>
</em:targetApplication>

И у нас остался еще одна часть описания:

<em:file>
  <Description about="urn:mozilla:extension:file:HelloWorld.jar">
    <em:package>content/</em:package>
  </Description>
</em:file>

Здесь мы указываем расположение JAR-файла (мы создадим его позднее). В атрибуте about тега <Description> указывается его имя. В нашем примере это "HelloWorld.jar". Для удобства, название файла обычно дают совпадающим с именем расширения. В элементе <em:package> указывается расположение нашего JAR-файла. Так как у нас в директории chrome есть только один фолдер content, то его мы и укажем. Обратите внимание на замыкающий символ слеш (/). Он необходим, так как мы указываем директорию, содержимое которой будет содержаться в нашем JAR-файле. Если его не указать, то инсталляция не пройдет.

contents.rdf

В этом файле описывается, как наше расширение хранится. Это текстовый файл в XML-формате и он должен располагаться в директории content. Таким образом, после создания этого файла, мы получим следующую структуру:

+- HelloWorld/
   +- install.rdf
   +- chrome/
      +- content/
         +- contents.rdf

Посмотрим содержимое этого файла. Строки, которые нам необходимо править, выделены:

<?xml version="1.0"?>

<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:chrome="http://www.mozilla.org/rdf/chrome#">

  <RDF:Seq about="urn:mozilla:package:root">
    <RDF:li resource="urn:mozilla:package:helloworld"/>
  </RDF:Seq>
  
  <RDF:Description about="urn:mozilla:package:helloworld"
    chrome:extension="true" chrome:name="helloworld"/>
  
  <RDF:Seq about="urn:mozilla:overlays">
    <RDF:li resource="chrome://browser/content/browser.xul"/>
  </RDF:Seq>
  
  <RDF:Seq about="chrome://browser/content/browser.xul">
    <RDF:li>chrome://helloworld/content/helloworld-Overlay.xul</RDF:li>
  </RDF:Seq>

</RDF:RDF>

Сперва рассмотрим эти строки:

<RDF:Seq about="urn:mozilla:package:root">
  <RDF:li resource="urn:mozilla:package:helloworld"/>
</RDF:Seq>

Мы видим, что это в первой строке мы снова указываем название пакета в первом атрибуте. Во втором атрибуте мы сообщаем, что да, это приложение является расширением. И, наконец, мы указываем имя нашего пакета. Заметьте, что из-за ошибки в FireFox 1.0 значение атрибута chrome:name должно быть указано в нижнем регистре.

Все видимые элементы в браузере FireFox созданы при помощи framework XUL (произносится как "зул") и все вмести они называются chrome. В следующем фрагменте кода мы указываем, какой файл chrome наше расширение будет "расширять". В большистве случаев расширяется только файл brouser.xul, хотя есть и другие. В нашем случае все просто:

<RDF:Seq about="urn:mozilla:overlays">
  <RDF:li resource="chrome://browser/content/browser.xul"/>
</RDF:Seq>

Теперь нам осталось только указать, какой XUL-файл будет "расширять" brouser.xul. Об этом говорит следующий участок кода:

<RDF:Seq about="chrome://browser/content/browser.xul">
  <RDF:li>chrome://helloworld/content/helloworld-Overlay.xul</RDF:li>
</RDF:Seq>

Пользовательский интерфейс

Для разработки пользовательского интерфейса расширений FireFox используется язык разметки XUL (от "XML User interface Language"). Красота XUL выражается в том, что называется "динамические оверлеи" (dynamic overlays). Они позволяют изменять поведение интерфейса без необходимости изменения оригинального кода.

Для начала, давайте создадим что-нибудь простое. Например разместим в меню Tools пункт "Hello World". Для этого создадим overlay-файл с названием, указанным в таге <RDF:li>. Он должен располагаться в том же директории что и contents.rdf.

Файл HelloWorld-Overlay.xul

<?xml version="1.0"?>

<overlay id="helloworldOverlay" 
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <menupopup id="menu_ToolsPopup">
    <menuitem label="Hello World" position="1" />
  </menupopup>

</overlay>

Собираем все вместе

Теперь, если все сделали правильно, то должны получить следующую структуру файлов:

+- HelloWorld/
   +- install.rdf
   +- chrome/
      +- content/
         +- contents.rdf
         +- HelloWorld-Overlay.xul

Теперь надо их собрать в один пакет с расширением XPI (произносится "зиппи") и попытаться установить в браузер. Процесс состоит из двух стадий. Cоздаем HelloWorld.jar, содержащий в себе директорию content и все находящиеся там файлы. Для этого можно воспользоваться любой программой, создающей архивы в формате zip (например, WinZip или WinRar) и поменять расширение с .zip на .jar. А теперь таким же образом создаем zip-архив содержащий в себе следующие файлы:

   +- install.rdf
   +- chrome/
      +- HelloWorld.jar

И переименовать его с расширением .xpi, назвав, к примеру, helloworld.xpi. Наше расширение готово и его можно установить, открыв из браузера FireFox (File->Open File>.

Для упрощения работы можно воспользоваться системой Ant. Поместите файл build.xml, содержащий нижеследующий код в корневую директорию вашего расширения и запустите ant чтобы создать XPI-файл.

<?xml version="1.0"?>

<project name="helloworld" default="createxpi">

  <target name="createjar">
    <zip destfile="helloworld.jar"> 
     	<fileset dir="chrome">
		<include name="**/*"/>
	</fileset>    
    </zip>
  </target>

  <target name="createxpi" depends="createjar">
    <zip destfile="helloworld.xpi">
      <zipfileset dir="." includes="helloworld.jar" 
                  prefix="chrome" />
	   <zipfileset dir="." includes="install.rdf" />
	 </zip>
  </target>
							 
</project>

Локализация

Если все сделано правильно, то мы должны получить картинку, похожую на эту.

Согласитесь, выглядит как-то непатриотично, что почти все пункты меню написаны по-русски, а наше - по-английски. Необходимо сделать локализованную версию. Посмотрим еще раз файл hello-world-Overlay.xul. Фразу "Hello World" нужно вынести во внешний ресурс, а здесь оставить только ссылку, указывающую на подходящий ресурс. Запишем так

<?xml version="1.0"?>

<!DOCTYPE window SYSTEM "chrome://helloworld/locale/helloworld.dtd" >

<overlay id="helloworldOverlay" 	
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <menupopup id="menu_ToolsPopup">
    <menuitem label="&HelloWorld.label;" position="1" />
  </menupopup>

</overlay>

Теперь надо разместить где-то сами ресурсы. Сперва создадим каталоги, где будут размещаться ресурсы. Общее дерево проекта получится таким.

+- HelloWorld/
   +- install.rdf
   +- chrome/
      +- content/
         +- contents.rdf
         +- HelloWorld-Overlay.xul
      +- locale
         +- en-US
         +- ru-RU

Логично, что в директории en-US будут лежать англоязычные ресурсы, а в ru-Ru - русскоязычные. Поместим в каталог en-US файл contents.rdf следующего содержания.

<?xml version="1.0"?>
<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns:chrome="http://www.mozilla.org/rdf/chrome#">

    <RDF:Seq about="urn:mozilla:locale:root">
        <RDF:li resource="urn:mozilla:locale:en-US"/>
    </RDF:Seq>

    <RDF:Description about="urn:mozilla:locale:en-US" chrome:name="en-US">
        <chrome:packages>
            <RDF:Seq about="urn:mozilla:locale:en-US:packages">
                <RDF:li resource="urn:mozilla:locale:en-US:helloworld"/>
            </RDF:Seq>
        </chrome:packages>
    </RDF:Description>
</RDF:RDF>

Мы сообщаем системе, что здесь лежат ресурсы для англоязычной локализации. Теперь создадим файл helloworld.dtd с, собственно, ресурсами. В нашем случае он будет состоять из одной строки:

<!ENTITY helloworld.label "Hello World!">

Теперь по аналогии создаем русскоязычные ресурсы. В директории ru-RU создаем файл contents.rdf:

<?xml version="1.0"?>
<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns:chrome="http://www.mozilla.org/rdf/chrome#">

    <RDF:Seq about="urn:mozilla:locale:root">
        <RDF:li resource="urn:mozilla:locale:ru-RU"/>
    </RDF:Seq>

    <RDF:Description about="urn:mozilla:locale:ru-RU" chrome:name="ru-RU">
        <chrome:packages>
            <RDF:Seq about="urn:mozilla:locale:ru-RU:packages">
                <RDF:li resource="urn:mozilla:locale:ru-RU:helloworld"/>
            </RDF:Seq>
        </chrome:packages>
    </RDF:Description>
</RDF:RDF>

Как видно, едиственное различие, что здесь везде указывается кодировка ru-RU. Для создания ресурсов просто скопируем файл helloworld.dtd и заменим английскую фразу на русскую. Основная тонкость здесь в том, что нужно сохранить все русскоязычные фразы в кодировке UTF-8. Можно воспользоваться стандартным notepad-ом.

И остается только сказать инсталлятору расширения, что у нас теперь есть файлы локализаций. Для этого в файл install.rdf добавим две строки (соответственно числу локализаций):

  <em:file>
    <Description about="urn:mozilla:extension:file:helloworld.jar">
      <em:package>content/</em:package>
      <em:locale>locale/en-US/</em:locale>
      <em:locale>locale/ru-RU/</em:locale>
    </Description>
  </em:file>

Теперь, снова собрав и установив наше расширение, мы получим вот такую картинку.

Полезные советы

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

Для этого откажемся от создания JAR-файла и поместим все chrome-файлы в директории helloworld. Получим следующую структуру файлов:

+- HelloWorld/
   +- install.rdf
   +- chrome/
      +- helloworld
         +- content
            +- contents.rdf
            +- HelloWorld-Overlay.xul
         +- locale
            +- en-US
               +- contents.rdf
               +- helloworld.dtd
            +- ru-RU
               +- contents.rdf
               +- helloworld.dtd

Соответственно, укажем на это изменение в файле install.rdf.

  <em:file>
    <Description about="urn:mozilla:extension:file:helloworld">
      <em:package>content/</em:package>
      <em:locale>locale/en-US/</em:locale>
      <em:locale>locale/ru-RU/</em:locale>
    </Description>
  </em:file>

Мы указали, что вместо файла helloworld.jar будем использовать папку helloworld. Остается только собрать наше расширение в один XPI-файл. Можно воспользоваться следующим скриптом для ant:

<?xml version="1.0"?>

<project name="helloworld" default="createxpi">

  <target name="createxpi" >
    <zip destfile="helloworld.xpi">
	   <zipfileset dir="." includes="install.rdf" />
	   <fileset dir=".">
		 <include name="chrome/**/*"/>
	   </fileset>     
	 </zip>
  </target>
							 
</project>

Установив расширение,мы увидим, что все файлы лежат в раскрытом виде в вашем профайле (находится Documents and Settings/Имя пользователя/Application Data/Mozilla/FireFox/Profiles/) и их можно править. Но, чтобы изменения вступали в силу немедлено, нужно отключить кэширования XUL-элементов. Откройте страницу about:config и создайте новый элемент nglayout.debug.disable_xul_cache с значением true. Теперь любые изменения будут видны сразу при перезагрузке страницы либо при создании нового окна браузера (через Cnrl-N).

Дальнейшее действия

Теперь мы имеем начальные знания для написания расширений для FireFox. Разумеется, для того, чтобы получить хоть сколько-нибудь полезный продукт, придется изучить еще много документации по XUL, JavaScript и CSS. И, разумеется, большую помощь окажет изучение текстов других расширений.

Здесь находятся все скрипты, используемые в этом тексте.

Источник: http://yevgenypetrunin.nm.ru/

[tags]

Связи:

Появилась возможность ознакомиться с Firefox 2.0 2006-03-21 раздел: Новости
Уменьшение прожорливости Mozilla FireFox 2006-02-15 раздел: Разное
XUL приложения 2006-02-02 раздел: XML
Firefox вошел в десятку популярных мировых брендов 2006-01-25 раздел: Новости
В Firefox появился атрибут "Ping" 2006-01-20 раздел: Новости
Dell "убьет" Internet Explorer? 2006-01-10 раздел: Новости
Вышла финальная версия Firefox 1.5 2005-11-30 раздел: Новости
Ответ Mozilla на отчет о безопасности браузера 2005-09-21 раздел: Новости
Symantec: браузеры Mozilla более уязвимы, чем IE 2005-09-20 раздел: Новости
Людям с ограниченными возможностями будет проще работать с Firefox 2005-08-16 раздел: Новости

Комментарии пользователей

Anonymous

Побольше бы документации. Я хочу сделать как в опере: удерживая Ctrl клацаем мышью на любую картинку на сайте, и она сохраняется. Очень нужно когда много аватарок/волперов и т.д. вподряд сохраняишь