From a065e04d529da1d847b5062a12c46d916408bf32 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 21:46:22 -0500 Subject: update based on https://github.com/mdn/yari/issues/2028 --- .../index.html" | 271 --------------------- 1 file changed, 271 deletions(-) delete mode 100644 "files/ru/\321\201\320\276\320\267\320\264\320\260\320\275\320\270\320\265_\321\202\320\265\320\274\321\213/index.html" (limited to 'files/ru/создание_темы') diff --git "a/files/ru/\321\201\320\276\320\267\320\264\320\260\320\275\320\270\320\265_\321\202\320\265\320\274\321\213/index.html" "b/files/ru/\321\201\320\276\320\267\320\264\320\260\320\275\320\270\320\265_\321\202\320\265\320\274\321\213/index.html" deleted file mode 100644 index 632cd73405..0000000000 --- "a/files/ru/\321\201\320\276\320\267\320\264\320\260\320\275\320\270\320\265_\321\202\320\265\320\274\321\213/index.html" +++ /dev/null @@ -1,271 +0,0 @@ ---- -title: Создание темы -slug: Создание_темы -tags: - - NeedsUpdate - - Создание темы -translation_of: Archive/Themes/Building_a_Theme ---- -

Введение

- -

Это руководство проведет вас через шаги, необходимые, чтобы создать очень простую тему - ту, которая обновляет фоновый цвет панелей инструментов в 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. -
  2. mozapps to chrome/mozapps
    3. -
- -

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

- -

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

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

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

- -
<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>
-
- - - -

Если вы получаете сообщение о том, что 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 состоят из нескольких компонентов:

- - - -

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

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

- -

Запустите 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/ чтобы создать учетную запись и начать распространять свои темы!

- -

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

-
-
- -
-
- - -

______________________________

-
-
- -

 

-- cgit v1.2.3-54-g00ecf