mozilla
Your Search Results

    Создание расширения

    Введение

    Этот краткий курс касается построения простейшего расширения для Firefox, которое будет добавлять строку статуса надпись "Hello, World!".

    Что нужно знать для начала работы

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

    Создание проекта расширения

    Расширения состоят из нескольких файлов и для корректной его работы необходимо придерживаться определенных правил их расположения в директориях. Вот структура типичного расширения:

    /myExtension:
                  /install.rdf
                  /components/*
                  /defaults/
                  /defaults/preferences/*.js
                  /plugins/*                        
                  /chrome.manifest
                  /chrome/icons/default/*
                  /chrome/
                  /chrome/content/
    

    Впрочем, в вашем расширении необязательно должны быть все эти папки. Сейчас мы создадим схожий каркас для нашего расширения. Для начала создадим папку для его хранения (напр. C:\extensions\my_extension\ для Windows или ~/extensions/my_extension/ для Unix/Linux). Эта папка будет корневой. Создайте в ней подпапку chrome, а в последней - папку content.

    Теперь создайте в корневой папке 2 пустых файла: chrome.manifest и install.rdf.

    Итак, сейчас мы имеем такую структуру расширения:

    <ext path>/
              install.rdf
              chrome.manifest
              chrome/
                 content/
    

    Для облегчения дальнейшей разработки и тестирования рекомендуем настроить Firefox для разработки расширения.

    Создание скрипта ("манифеста") установки

    Откройте файл install.rdf в текстовом редакторе и поместите в него следующее:

    <?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:id>sample@example.net</em:id>
        <em:version>1.0</em:version>
        <em:type>2</em:type>
       
        <!-- Target Application this extension can install into, 
             with minimum and maximum supported versions. --> 
        <em:targetApplication>
          <Description>
            <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
            <em:minVersion>1.5</em:minVersion>
            <em:maxVersion>2.0.0.*</em:maxVersion>
          </Description>
        </em:targetApplication>
       
        <!-- Front End MetaData -->
        <em:name>sample</em:name>
        <em:description>A test extension</em:description>
        <em:creator>Your Name Here</em:creator>
        <em:homepageURL>http://www.example.com/</em:homepageURL>
      </Description>      
    </RDF>
    

    Как видите, этот файл имеет вид XML-файла. Полное описание необходимых и возможных параметров есть здесь, сейчас же отметим лишь, что этот файл предназначен для общего описания расширения, например, уникальный идентификатор расширения, его версию, имя, автора, информацию о совместимости и т.п. Назначение многих параметров понятно из их названия. Что необходимо знать сейчас:

    • sample@example.net - уникальный идентификатор вашего расширения. Это может быть адрес электронной почты (как здесь) или GUID. Обратите внимание, что адрес может быть несуществующим, главное, чтобы он был уникальным.
    • 2 - указывает, что это именно расширение (связано с тем, что такие же манифесты создаются для тем и плагинов).
    • {ec8030f7-c20a-464f-9b0e-13a3a9e97384} - идентификатор Firefox'а (конечно, он одинаковый для всех расширений).
    • 1.5 - минимальная версия Firefox, с которой будет работать ваше приложение. Обратите внимание, что указать здесь какой-либо номер не значит автоматически сделать расширение работающим с этой версией. Это лишь означает, что вы, как разработчик, утверждаете, что расширение будет работать с ней, а вот будет ли так, зависит только от вас.
    • 2.0.0.* - максимальный номер версии Firefox. * означает, что включаются все версии, имеющие вид 2.0.0.x, где x - любое число.

    Расширение браузера с помощью XUL

    Интерфейс Firefox написан на XUL и JavaScript. XUL - это язык, основанный на XML. Он отвечает за визуальную часть интерфейса. JavaScript реализует функциональность через привязку к действиям пользователя.

    Так как визуально браузер строится на XUL, то, следовательно, он весь представляется в виде XML-файла. Вы можете посмотреть на него (это будет полезно для четкого понимания своих дальнейших действий). Зайдите в папку установки Firefox, откройте там папку chrome. В ней будет browser.jar. Несмотря на расширение, этот файл - обычный zip-архив. Внутри него вы найдете файл content/browser/browser.xul. Открыв его, можно полюбоваться на общую структуру визуальной части браузера. Пусть вас не смущает большое количество непонятных пока строк - во всем разберетесь позже. Собственно, корневым узлом этого XML-файла являетcя элемент window, содержащиеся в нем узлы - это отдельные элементы интерфейса. Например, вы можете найти кнопку обновления страницы (поищите узел с id="reload-button") или пункт меню "Правка" (id="edit-menu").

    Так вот, суть расширения интерфейса браузера состоит в том, что мы берем некий узел из браузера, описываем его в своем файле с необходимыми нам изменениями, например, добавляя к нему новые дочерние узлы. Таким образом можно добавить новые кнопки в панель инструментов (или создать новую панель и поместить ее в нужное место), добавить новый пункт меню (как рядом со "Справкой" так и в подменю, скажем, "Инструменты" (Tools)). Это технология называется en:XUL Overlays.

    В нашем случае мы добавим новый элемент в строку статуса. В файле browser.xul можно найти узел с id="status-bar". Это и есть строка статуса. В этом узле есть несколько дочерних узлов. Добавим к ним наш, который будет описывать новую панель. Создайте файл, назовите его, скажем, sample.xul и поместите в папку chrome/content. Внесите туда такой код:

    <?xml version="1.0"?>
    <overlay id="sample" 
             xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
     <statusbar id="status-bar">
      <statusbarpanel id="my-panel" label="Hello, World"/>
     </statusbar>
    </overlay>
    

    Здесь <statusbar> с id="status-bar" является "точкой склейки" (merge point), т.е. узлом, который мы намереваемся изменить. <statusbarpanel> - новый виджет, который мы добавляем в <statusbar>.

    URI Chrome

    XUL-файлы (вроде того, который мы только что создали) загружаются через URI протокола chrome://. Вместо того, чтобы каждый раз определять место установки Firefox'а и загружать файлы через file://, можно загружать их через chrome://, не беспокоясь об их истинном положении на диске.

    Так, окно браузера, которое мы недавно просматривали, находится по адресу chrome://browser/content/browser.xul. Можете попробовать ввести его в адресную строку и посмотреть на результат.

    URI хрома состоит из нескольких частей:

    • протокол chrome говорит, что необходимо классифицировать и обработать содежимое файла как хром.
    • название пакета (в данном случае, это browser), указывающий на "сверток" (bundle) компонентов интерфейса. Это название уникально для каждого приложения/расширения.
    • тип запрашиваемых данных. Есть три типа: content (XUL, JavaScript, XBL Bindings и др., т.е. компоненты, формирующие вид и поведение интерфейса), locale (DTD, файлы propeties и т.п., производящие локализацию интерфейса) и skin (CSS и изображения для формирования темы интерфейса).
    • файл для загрузки.

    Так, например, chrome://foo/skin/bar.png загружает файл bar.png из секции skin пакета foo.

    Создание манифеста chrome

    Для хорошего понимания манифеста просмотрите статью en:Chrome Manifest

    Откройте chrome.manifest, созданный нами ранее и добавьте в него следующее:

    content     sample    chrome/content/
    

    Не забудьте завершающий слеш.

    Эта строка объявляет

    1. тип данных в пакете chrome,
    2. название пакета (используйте лишь строчные буквы),
    3. путь к файлам пакета.

    Таким образом, здесь мы говорим, что файлы типа content для пакета sample можно найти в chrome/content (путь относительно местоположения chrome.manifest).

    Сохраните файл. Позже, при запуске Firefox, пакет chrome вашего расширения будет зарегистрирован с помощью этого файла.

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

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

    overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul
    

    Это говорит Firefox'у, что нужно объединить sample.xul и browser.xul

    Тестирование

    Для начала необходимо уведомить Firefox о нашем расширении. Раньше (еще во времена Firefox 1.0) необходимо было упаковать расширение как en:XPI и установить через интерфейс браузера. Теперь же достаточно просто указать Firefox'у, где находится папка с вашим расширением - и он будет подключать его каждый раз при загрузке.

    Итак, ваши действия:

    1. Найдите папку с вашим профилем. Если вы не создавали его

    специально, браузер использует профиль по умолчанию. Как найти папку с профилем.

    1. Откройте папку extensions. Если ее нет, создайте ее.
    2. Создайте новый текстовый файл и поместите в него лишь путь к вашему

    расширению (напр., C:\extensions\my_extension\ для Windows или ~/extensions/my_extension/ для Unix/Linux). Сохраните файл под именем, одинаковым с id вашего расширения.

    Примечания:

    • Не забудьте конечный слеш.
    • Возможно возникновение проблем из-за знаков нижнего подчеркивания в названии; если так вышло измените его.

    Теперь вы готовы к тестированию вашего расширения. Запустите Firefox. Он увидит ссылку к вашему расширению и установит его. Если все прошло успешно, вы увидите надпись "Hello, World!" в строке статуса справа. Для внесения изменений достаточно править xul-файлы и перезапустить Firefox.

    Упаковка расширения

    Теперь можно упаковать расширение для его дальнейшего распространиения и установки.

    Создайте zip-архив из содержания корневой папки вашего расширения (но не архивируйте саму папку). Переименуйте файл, чтобы он имел расширение ".xpi". Вот и все. Для установки достаточно перетащить файл на окно браузера.

    Установка с веб-страницы

    Есть несколько способов это сделать. Можно разместить прямую ссылку на xpi-файл. Однако предпочтительным является InstallTrigger method, как более удобный для пользователей.

    Сайт расширений addons.mozilla.org

    Сайт расширений Mozilla (http://addons.mozilla.org) является местом, где вы можете бесплатно разместить свое расширение. Сайт является надежным и удобным местом для распространения своих расширений: достаточно лишь зарегистрироваться - и вы сможете загружать свои файлы на сервер.

    Регистрирование расширения в реестре Windows

    В Windows информация о расширении может быть добавлена в реестр. Это дает дополнительный возможности при установке расширений. Поробнее об этом читайте здесь.

    Узнайте больше об оверлеях XUL

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

    Локализация

    Для поддержки более чем одного языка необходимо отделить локализуемые строки от основного содержания с помощью сущностей (entities) и "свертков строк" (string bundles). Гораздо проще делать это в течение разработки расширения, чем после.

    Информация о локализации хранится в подпапке locale папки chrome (т.е. рядос с папкой content). В этой папке необходимо разместить столько папок, сколько локализаций вы намерены сделать. Обычной практикой является называть папки стандартными названиями локалей: скажем, папку с английской локализацией - en-US, русской - ru-RU и т.п., что, впрочем, не является обязательным. Теперь создайте в каждой из папок файл somename.ent (или anothername.dtd) (имя одинаково во всех папках локализаций) и заполните его соответствующим образом (показано ниже).

    Локализуем наше расширение на русский и английский языки. После создания 2 папок (назовем их ru-RU и en-US), создаем в каждой из них файл (пусть myStatusBar.ent) Поместите в тот файл, который в папке с английской локализацией, следующую строку:

    <!ENTITY statusbarpanel.label "Hello, World!">
    

    А в тот, который будет локализовать на русский язык, соответственно

    <!ENTITY statusbarpanel.label "Привет, мир!">
    

    Сохраните оба файла. Теперь необходимо зарегистрировать локализации. Для этого добавим в chrome.manifest следующие строки:

    locale sample en-US chrome/locale/en-US/
    locale sample ru-RU chrome/locale/ru-RU/
    

    Теперь для использования локализации достаточно добавить в начало (однако после xml-объявления) xul-файла строку

    <!DOCTYPE window SYSTEM "chrome://sample/locale/myStatusBar.ent">
    

    где window - это названия корневого элемента xul-документа (в нашем случае это overlay).

    Для использования сущностей измените ваш xul-файл так, чтобы атрибут label у новой statusbarpanel был равен "&statusbarpanel.label;".

    Исследование браузера

    Гораздо более простым (и эффективным) способом исследования браузера является использование DOM Inspector'а. Он позволяет полностью изучить структуру документа, загруженного в браузер. Так, например, можно загрузить вышеописанным способом browser.xul, просмотреть все его узлы и найти подходящий для наложения оверлея. Или же можно просматривать структуру своего расширения.

    Отладка расширений

    Инструменты для анализа расширений

    Отладочная распечатка

    Дополнительная информация

    Метки документа и участники

    Метки: 
    Contributors to this page: Yozh88, kup, fscholz, Tmax, teoli
    Обновлялась последний раз: teoli,