MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Archive of obsolete content

Создание темы

Введение

Это руководство проведет вас через шаги, необходимые, чтобы создать очень простую тему - ту, которая обновляет фоновый цвет панелей инструментов в Firefox.

Примечание: Это руководство о создании тем для Firefox 29 и более поздних версий. Другие руководства существуют для создания тем для более ранних версий Firefox. Для старшего руководства, смотрите Создание скина для Firefox.

Примечание: В Firefox для Mac OS X изменились некоторые директории, так что руководство может быть устаревшим.

Настройка среды разработки

Темы и расширения упакованы и распределены в ZIP файлах или Пакетах, с расширением XPI (произносится как "zippy").

Пример содержимого в типичном XPI файле для темы:

example.xpi:
              /install.rdf
              /chrome.manifest
              /preview.png
              /icon.png
              /chrome/
                     browser/
                     communicator/
                     global/
                     mozapps/

Мы хотим создать файловую структуру аналогичную описанные структуре выше, так что давайне начнем с создания папки для вышей темы где-нибудь на вашем жестком диске (например C:\themes\my_theme\ или ~\themes\my_theme\). Внутри вашей новой папки для темы, создайте два пустых текстовых файла, один из них назовите chrome.manifest , а другой install.rdf. Файл preview.png отображается, как превью темы в панели тем в окне дополнений. Файл icon.png используется как инока в той же панели. Оставим оба из них сейчас, если вы уже выбрали что-то, что хотели использовать бы.

Остальные директории будут извлечены из темы по умолчанию. Во-первых, вы захотите создать где-нибудь каталог. Скопируйте ваши установки omni.ja в этот каталог. Расположение будет отличаться для различных операционных систем:

Linux: /usr/lib/MozillaFirefox/chrome/classic.ja or /usr/lib/firefox-*.*.*/omni.ja

Windows: \Program Files\Mozilla Firefox\omni.ja

Mac OS X: /Applications/Firefox.app/Contents/MacOS/omni.ja

Теперь откройте (или распакуйте) этот файл в директорию, которую вы создали. Он содержит несколько папок, модули, jssubloader и другие. Файлы мы будем вынуждены расположить в папке chrome\toolkit\skin\classic.

Создайте папку с именем хром в папке вашей темы. Далее, содержимое следующих каталогов расположите в соответствующие папки.

  1. global to chrome/global
  2. mozapps to chrome/mozapps

Теперь, когда вы скопировали папки global и mozapps, необходимы несколько других папок из browser/omni.ja archive. Они находится в папке браузера, в указанном выше месте. Файлы нам будут нужны чтобы browser/omni.ja archive расположить под chrome/browser/skin/classic.

Скопируйте содержимое из следующих каталогов в соответствующие папки. Это даст нам базовый набор стилей для работы с.

  1. browser to chrome/browser/
  2. communicator to chrome/communicator/

Вы должны закончить с такой структурой каталогов:

<ext path>/
          /install.rdf
          /chrome.manifest
          /chrome/
                 browser/
                 communicator/
                 global/
                 mozapps/

После этого, было бы замечательно прочитать статью Setting up extension development environment и следовать её инструкциям. Это особенно важно для установки DOM Inspector, который мы будем использовать в последующих стадиях.

Создание инсталяции

Откройте файл с именем 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>4</em:type>
   
    <!-- Target Application this theme can install into, 
         with minimum and maximum supported versions. --> 
    <em:targetApplication>
      <Description>
        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
        <em:minVersion>29.0</em:minVersion>
        <em:maxVersion>39.*</em:maxVersion>
      </Description>
    </em:targetApplication>
   
    <!-- Front End MetaData -->
    <em:name>My Theme</em:name>
    <em:internalName>sample</em:internalName>
    <em:description>A test extension</em:description>
    <em:creator>Your Name Here</em:creator>
    <em:homepageURL>http://www.example.com/</em:homepageURL>
  </Description>      
</RDF>
  • sample@example.net - ID из разширения. Это значение, которое вы придумали, чтобы определить ваш добавочный номер в формате адреса электронной почты (обратите внимание, что это не должна быть ваша электронная почта). Сделайте его уникальным. Кроме того, можно использовать GUID. Примечание: Этот параметр должен быть в формате адреса электронной почты, хотя он и не должен быть действительным адресом электронной почты. (example.example.example)
  • 4 - тип дополнения. '4' заявляет, что она устанавливает тему. Если вы должны были установить расширение было бы 2 (смотрите Install Manifests#type для других типов кода).
  • {ec8030f7-c20a-464f-9b0e-13a3a9e97384} - Firefox's заявление ID.
  • 29.0 - точный номер самой ранней версии Firefox, которую вы указываете, для работы расширения. Никогда не используйте * в minVersion, это почти наверняка не будет делать то, что вы ожидаете от него.
  • 39.* - самая последняя версия Firefox, которую вы указываете, для работы расширения. Указанная версия должна быть не выше, чем новейшая версия доступная в настоящее время! В этом случае, "39.*" указывает на то, что расширение работает с Firefox 39 и любым последующим 39.x выпуском. Темы совместимы по умолчанию, если не установлен строгий режим совместимости для вашей темы.

Если вы получаете сообщение о том, что install.rdf деформирован, полезно загрузить его в Firefox с помощью команды File->Open File и он сообщит вам XML ошибки.

See Install Manifests for a complete listing of the required and optional properties.

Сохраните файл.

Стилизация браузеров UI с CSS

Firefox's пользовательский интерфейс написан на XUL и JavaScript. XUL является XML грамматика, которая обеспечивает виджеты пользовательского интерфейса, такие как кнопки, меню, панели инструментов, деревья и т.д. Действия пользователя связаны с функциональными возможностями, используя JavaScript. Эти XUL элементы оформлены с использованием CSS. Если вы не знаете CSS, это будет шаг в сторону от обучения, используйте HTML-based обучающие программы, чтоб знать хотябы на уровне новичка .

Браузер UI, сам по себе не имеет абсолютно никакого стиля - если вы пытаетесь начать с пустой темы, Firefox будет непригодным для использования, в качестве элементов, кнопок, будет отображен обычный текст. Именно поэтому мы скопировали стили по умолчанию на этапе установки.

При написании темы, самый простой способ определить, какие CSS селекторы вам нужно написать, используйте DOM Inspector, который вы должны быть установлен, на этапе установки. Он используется, чтобы проверить любой элемент на веб-странице или XUL документе, что делает его бесценным для темы.

Обновление Стилизация панели инструментов

Примечание: В Firefox 4.0 и выше, основная способность DOM Inspector не работает. Чтобы обойти это, отключить аппаратное ускорение в Options Firefox '.

Откройте DOM Inspector ( он находится в меню "Сервис"), и перейдите в раздел "Файл-> Проверить Chrome документ". вы попадете в меню, содержащее все документы XUL открытые в данный момент в Firefox.
Выберите первый документ с заголовком веб-страницы, как "Firefox Start Page" и выберите его.

Для этого урока мы будем обновлять цвет фона панели инструментов. Выберите инструмент в узле обнаружения (стрелка плюс квадрат в верхнем левом углу DOM Inspector), и нажмите на любое неиспользуемое пространство на панели инструментов. Это должно выбрать узел типа "xul:toolbar" в DOM Inspector.

Сдесь вы можете поиграть с различными стилистиками для панели инструментов и связанных с ними элементов. По умолчанию правая панель должна показать  DOM как узел, который имеет полезную информацию по созданию стиля как CSS класс и идентификатор узла. Элемент имеющий идентификатор navigator-toolbox, не имеет идеи. Для того, чтобы изменить стиль в вашей теме, вы должны написать правило выбора, чтобы выбрать этот класс.

Откройте файл chrome/browser/browser.css в вашей теме. Найдите тот файл для селектора  #navigator-toolbox, и добавьте background: orange; правило к ней.

Сохраните файл.

Chrome URIs

Далее, вы указываете Firefox, где найти файлы  для вашей темы. CSS, XUL, и другие файлы являются частью "Chrome Packages" - расслоения компонентов пользовательского интерфейса, которые загружаются с помощью chrome:// URIs. Вместо того, чтобы загрузить браузер с диска с помощью file:// URI (так как местоположение Firefox в системе может меняться от платформы к платформе и от системы к системе), разработчики Mozilla придумали решение для создания URI, с содержимым известным установленной надстройке.

Окно браузера: chrome://browser/content/browser.xul. Попробуйте ввести этот URL в адресной строке в Firefox!

Chrome URIs состоят из нескольких компонентов:

  • Во-первых, URI scheme (chrome), который говорит сетевым библиотекам Firefox's, что это Chrome URI, что указывает на то, что содержание URI должны быть обработанно как (chrome). Приравниваем (chrome) к (http), который указывает Firefox рассматривать URI, как веб-страницу.
  • Во-вторых, имя пакета (в приведенном выше примере, browser) который идентифицирует пакет компонентов пользовательского интерфейса.
  • В-третьих, тип запрашиваемых данных. Есть три типа: content (XUL, JavaScript, XBL bindings, etc. которые формируют структуру и поведение приложения UI), locale (DTD, .properties files etc, которые содержат строки для UI's localization), и skin (CSS и изображения, которые формируют theme из UI)
  • И, наконец, путь к файлу для загрузки.

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

При загрузке контента с помощью Chrome URI, Firefox использует Chrome реестр, чтобы перевести идентификаторы URI в исходные файлы на диск (или в пакет JAR).

Создание Chrome Manifest

Chrome Manifest это файл, показывающий путь для URI Chrome к файлам вашей темы. Для получения дополнительной информации о Chrome Manifest и свойствах, которые они поддерживают, см Chrome Manifest справка.

Откройте файл под названием chrome.manifest вами создан бок о бок chrome каталог в корне расширений источника папки иерархии

Добавьте в этом коде:

skin    browser         sample   chrome/browser/
skin    communicator    sample   chrome/communicator/
skin    global          sample   chrome/global/
skin    mozapps         sample   chrome/mozapps/

Не забывайте слэш, "/"! Без него пакет не будет зарегистрирован. Третий столбец должен соответствовать значению internalName вашей темы от установки манифеста выше.

Это карта каталога мест внутри вашей темы. Например, линия skin browser sample skin/browser/ означает "когда пользователь выбирая тему, использует каталог browser/ чтобы посмотреть скины пакета browser." Более сжато, это означает, что URL chrome://browser/skin/some/path/file.css будет искать файл browser/some/path/file.css в корневом каталоге вашей темы,.

Сохраните файл.

Тест

Во-первых, вы должны сообщить Firefox о вашей теме. На стадии разработки для Firefox версии 2.0 и выше, вы можете указать Firefox на папку в которой вы разрабатываете тему, и она будет загружать её каждый раз при перезагрузке Firefox.

  1. Разместить свою profile folder и под ней профиль, с которым вы хотите работать (e.g. Firefox/Profiles/<profile_id>.default/).
  2. Откройте папку extensions/ , создайте при необходимости.
  3. Создайте новый текстовый файл и укажите полный путь к папке развития внутри (e.g. C:\themes\my_theme\ or ~/themes/my_theme/). Пользователям Windows, следует сохранить направление слэш OS' ,  все должны помнить включать закрывающий слэш и удалить любые пробелы в конце строки.
  4. Сохраните файл с идентификатором вашей темы, как его имя (e.g. sample@example.net). Нет Расширение файла.

Теперь вы готовы проверить вашу тему!

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

Теперь вы можете вернуться назад и внести дополнительные изменения в ваши CSS файлы, закройте и перезапустите Firefox, и увидите обновления.

Пакет

Теперь, когда ваша тема работает, вы можете package это для развертывания и установки.

Zip вверх по содержанию папки вашей темы (не тема сама папка), и переименовать zip файл, чтобы иметь .xpi расширение.В операционной системе Windows, вы можете сделать это легко, выбрав все файлы и вложенные папки в папке расширения, щелкните правой кнопкой мыши и выберите "Send To -> Compressed (Zipped) Folder".  .Zip файл будет создан для вас. Просто переименуйте его, и вы это сделали!

В Mac OS или Linux, вы можете использовать командную строку zip tool:

zip -r my_theme.xpi install.rdf chrome.manifest browser communicator global mozapps

Или, если у вас установлен 7-Zip, вы можете использовать его для архивирования:

7z a -tzip my_theme.xpi chrome chrome.manifest

Заметка: инструмент командной строки будет обновлять существующий архив, не заменив его - так что если вы имеете файлы, которые вы удалили из вашей темы, обязательно удалите .xpi файл перед повторным запуском команды архиватора.

Теперь загружаем .xpi файл на сервер, убедившись, что он служит как application/x-xpinstall. Вы можете связаться с ним и дать людям возможность скачать и установить его. Для целей тестирования только своего .xpi, файл можно просто перетащить в менеджер дополнений через "Tools -> Add-ons Manager", либо открыть и использовать "File -> Open File...".

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

Есть множество способов, которыми можно установить расширения с веб-страниц, в том числе по прямой связи с файлами XPI и использование объекта InstallTrigger. Создателям расширений и веб-авторам рекомендуется использовать InstallTrigger method чтобы установить XPIS, поскольку он обеспечивает лучший опыт для пользователей.

С помощью addons.mozilla.org

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

Посетите https://addons.mozilla.org/developers/ чтобы создать учетную запись и начать распространять свои темы!

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

______________________________

 

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

 Внесли вклад в эту страницу: takto, Nextovoy, Devengineer
 Обновлялась последний раз: takto,