Как создать xpi файл

Обновлено: 04.07.2024

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

Наша цель

Мы создадим расширение Firefox, чтобы найти все ссылки на текущей веб-странице, выделить те, которые имеют target атрибут, и предупредить вас, сколько ссылок оно нашло. Хорошая часть заключается в том, что после того, как вы это сделаете, у вас есть понимание разработки расширений Firefox, а также проект для любого расширения, которое вы захотите разработать в будущем.

Что вам нужно — настройка среды разработки

Сначала давайте начнем с настройки среды разработки. Вам нужен Firefox (да) и в основном любой редактор кода, который вы предпочитаете. Затем, есть несколько рекомендуемых вещей для подготовки Firefox:

Создайте другой профиль разработки

Первым шагом является создание другого профиля в Firefox, так как вы сделаете некоторые настройки и изменения, которые вы, вероятно, не хотите использовать в своем обычном профиле. В моем случае я создал новый профиль разработки под названием «dev». Шаги, чтобы сделать это:

Диспетчер профилей в Windows

Откройте меню «Пуск» и выберите «Выполнить» (в Vista его может и не быть — просто нажмите Windows key + R в этом случае). В диалоговом окне запуска напишите firefox -P и нажмите enter / нажмите OK. Выберите Create Profile в диалоговом окне и следуйте инструкциям.

Менеджер профилей на Mac

Откройте терминал (находится в папке / Applications / Utilities) и введите /Applications/Firefox.app/Contents/MacOS/firefox -profilemanager . Выберите Create Profile в диалоговом окне и следуйте инструкциям.

Менеджер профилей в Linux

Настройки конфигурации для Firefox

Откройте Firefox с помощью диспетчера профилей (процесс, описанный выше, или установите профиль разработки по умолчанию во время разработки расширений). Затем введите about:config в адресной строке. Он предупредит вас об изменении настроек, но это нормально, так как вы будете делать только незначительные изменения для разработки. Вы можете отфильтровать существующие настройки, и если какие-либо из приведенных ниже настроек не существуют, вы можете просто создать их.

Дополнительные настройки

Это не обязательно, но они могут помочь вам. Лично я этим не пользуюсь.

javascript.options.strict = true
extensions.logging.enabled = true

Укажите ваш каталог расширений Firefox на ваше расширение

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

Найдите каталог своего профиля

В каталоге профилей вы найдете все настройки для ваших профилей Firefox, включая информацию о расширениях.

Найти каталог профиля в Windows

В Windows 2000 и XP откройте проводник и перейдите C:\Documents and Settings\[your user name]\Application Data\Mozilla\Firefox\Profiles в Vista и перейдите в C:\Users\[your user name]\AppData\Roaming .

Найти каталог профиля на Mac

Откройте Терминал и введите CD

/Library/Application\ Support/Firefox/profiles/ . Там вы найдете свои профили Firefox, и они будут названы буквами и цифрами, за которыми следует точка (.), А затем имя вашего профиля, например 12a3bc4d.dev .

Найти каталог профиля в Linux

Откройте терминал и введите CD

/.mozilla/ . В этом месте вы найдете все свои профили Firefox, и они будут названы буквами и цифрами, за которыми будет точка (.), А затем имя вашего профиля, например 12a3bc4d.dev .

Указывая на расширение

В папке вашего профиля разработки вы найдете папку с именем extensions . В нем у вас будет код для всех установленных расширений. Вместо того чтобы размещать там свой код, вы можете создать файл указателя. Сделайте это, создав файл с уникальным именем для вас (это должно быть то же самое, что вы выбрали для своего em:id значения в вашем install.rdf файле — подробнее об этом ниже).

Создание структуры папок и файлов

Чтобы создать хорошую основу для разработки расширений, необходимо создать структуру кода расширения. Начните с создания этой иерархии:

я nstall.rdf

Начнем с пугающего кода install.rdf . Здесь у вас будет вся мета-информация о вашем расширении, поддерживаемых версиях Firefox и другая информация. Наш install.rdf будет выглядеть так:

В Description узле

em:id
Здесь вы можете добавить свой уникальный идентификатор разработчика по своему выбору. Обратите внимание, что это должен быть файл указателя, который вы создали выше.
em:name
Название вашего расширения.
em:version
Текущая версия вашего расширения.
em:type
Тип объявляет, что это расширение, в отличие, например, от темы.
em:creator
Ну вы!
em:description
Описывает вашу функциональность расширения. Будет отображаться в окне «Инструменты»> «Дополнения».
em:homepageURL URL веб — сайта вашего расширения.
em:optionsURL URL , где вы будете иметь свой файл для редактирования опций / предпочтений.

В Description/em:targetApplication узле

em:id
Это значение является фактическим идентификатором Firefox. Измените это, если вы хотите разрабатывать для Thunderbird или что-то еще.
em:minVersion
Минимальная версия Firefox, необходимая для запуска расширения.
Допустимые версии приложения .
em:maxVersion
Максимальная версия Firefox, необходимая для запуска расширения.
Допустимые версии приложения .

Подробнее о дополнительных параметрах читайте в разделе «Установочные манифесты» .

c hrome.manifest

Хром Firefox — это все вокруг окна контента. т. е. панель инструментов веб-браузера, меню, строка состояния и т. д. Следующий файл для нашего расширения, который, вероятно, будет неудобно редактировать, — это chrome.mainfest файл. Это, однако, связано с install.rdf ключом к тому, как ваше расширение будет добавлено в Firefox и как оно будет работать. Наш chrome.manifest файл выглядит так:

Итак, что же это за варианты? Давайте пройдемся по ним:

content linktargetfinder chrome/content/
Путь к тому, где будут найдены ваши файлы содержимого расширения.
content linktargetfinder chrome/content/ contentaccessible=yes
То же, что и выше, но когда
contentaccessible=yes он добавлен, он позволяет Firefox 3 и более поздним версиям получать доступ к файлам расширения и отображать их в веб-браузере (как на веб-странице). Нашел эту отличную помощь через
веб-страницы, доступ к chrome: // запрещен .
overlay chrome://browser/content/browser.xul chrome://linktargetfinder/content/browser.xul
Путь к файлу, который вы будете использовать для переопределения элементов веб-браузера и добавления элементов на панель инструментов, в меню и строку состояния.
locale linktargetfinder en-US locale/en-US/
Используется для локализации контента.
skin linktargetfinder classic/1.0 skin/
Кожа ссылка.
style chrome://global/content/customizeToolbar.xul chrome://linktargetfinder/skin/skin.css
Наложения стилей для хромированных страниц.

Более подробную информацию можно найти в Chrome Manifest .

папка c hrome

Хорошо, как только обязательные части убраны, теперь вещи начинают становиться интересными. Это также когда мы начинаем смотреть на XUL, что означает XML User Interface Language. Он разработан Mozilla для создания интерфейсов в Firefox, Thunderbird и т. Д.

Я установил cygwin и попытался выполнить команду zip для создания xpi-файла. Но got zip не является ошибкой команды.

может кто-нибудь наставит меня, чтобы сделать это ?

Если вы находитесь в windows (для установки cygwin это выглядит так), вы можете использовать встроенный инструмент windows:

затем просто замените .zip для .xpi в имени файла

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

таким образом, в основном ваш zip-файл должен иметь следующую структуру:

а не эта структура:

кроме того, вот как я пакую расширение для Firefox с командная строка С 7z:

(где "a" означает "добавить/создать" и "- r " для рекурсивного)

или обновить расширение с помощью файла(ов) мы только что отредактировали:

("U" для обновления содержимого архива)

два метода, используя GUI 7zFM.exe, или командная строка или пакетный файл.

1.0) метод GUI. Предполагая, что 7-Zip установлен с интеграцией оболочки, вы видите, что 7-Zip отображается в контекстном меню (щелкните правой кнопкой мыши выбранные файлы) Проводника Windows.

1.a)перейдите в папку надстройки.

1.б) выбрать все файлы и папки, которые вы хотите включить в .xpi. Предполагая, что у вас нет файлов, которые вы хотите игнорировать в любые подпапки. Если вы это сделаете, вы можете использовать параметр командной строки.

1.c) щелкните правой кнопкой мыши на списке выбранных файлов, найдите выберите .

1.d) появляется диалоговое окно. Измените местоположение и имя zip-файла, изменение .zip to .xpi и др.

1.е) обратите внимание, если вы создаете .xpi в той же папке, не повторно архивировать его в будущем, как ваше дополнение будет терпеть неудачу ужасно. Ты никогда не хочешь .xpi в конечном итоге внутри вашего .XPI на несчастный случай. Обычно я просто создаю его в родительской папке, добавив ..\ к началу имени файла, например ..\addon-1.2.3-fx.xpi

1.f) 7-Zip имеет множество мощных опций сжатия, не все из которых Firefox может обрабатывать. Выберите настройки, которые Firefox может обрабатывать. Обратитесь к изображению.

2.0) Командная строка. Предполагая, что вы находитесь в Windows, и знаете, как открыть командную строку, изменить диски и каталоги (a.к. a. папки).

2.а) CD в каталог надстройки.

2.b) Используйте самую базовую 7-Zip командную строку.

"C:\Program Files-Zipz.exe" a -tzip addon-1.2.3-fx.xpi *

2.c) вы можете получить меньший файл, найдя точные параметры командной строки, которые соответствуют приведенному выше GUI, а именно:

"C:\Program Files-Zipz.exe" a -tzip -mx=9 -mm=Deflate -mfb=258 -mmt=8 "addon-1.2.3-fx.xpi" *

обратите внимание, что при использовании метода сжатия Deflate нет опции Dictionary size = 32kb. В противном случае параметры в порядок и соответствуют GUI.

i) многопоточный вариант (-mmt=8) специфичен для моей системы, которая имеет 8 ядер. Вам нужно будет снизить до 6 или 4 или 2 или 1 (т. е. удалить) если у вас меньше ядер, и т. д., или увеличить, если у вас больше. В любом случае, это не будет иметь большого значения для небольшого расширения.

ii) опция рекурсии в папку может быть или не быть по умолчанию, поэтому указание этой опции должно обеспечить правильное рекурсия.

iii) возможность preserve windows timestamps (создание, доступ, модификация) по умолчанию on в любом случае, так что может быть и не нужен.

IV) О ignore files in list опция любой файл, который имеет список файлов и подстановочные знаки файлов, которые вы хотите исключить.

В этой статье мы пройдём весь путь создания WebExtension для Firefox, от начала и до конца. Это дополнение будет просто добавлять красную рамку ко всем страницам, загруженным с "mozilla.org" или любого из его поддоменов.

Для начала вам нужен Firefox 45 или более поздней версии.

Написание WebExtension

Создайте новую директорию (папку) и перейдите в неё:

manifest.json

Теперь создайте новый файл, назовите его "manifest.json" в папке "borderify". Вставьте туда следующий код:

Первые три ключа: manifest_version , name и version , являются обязательными и содержат основные метаданные о дополнении.
description не обязателен, но рекомендуется: это описание отображается в Менеджере Дополнений.
icons не обязателен, но рекомендуется: позволяет указать значок для дополнения, который будет виден в Менеджере Дополнений.
applications является обязательным для Firefox , и определяет ID дополнения. Он так же может использоваться для указания минимальной и максимальной версии Firefox, поддерживаемой расширением.

Самый интересный ключ здесь - это content_scripts , который говорит Firefox загружать скрипт на Web страницах, чей URL совпадает с заданным шаблоном. В нашем случае, мы просим Firefox загрузить скрипт с названием "borderify.js" на всех HTTP или HTTPS страницах, полученных с "mozilla.org" или любого из его поддоменов.

В некоторых случаях вам нужно указать ID для вашего дополнения. Если вам нужно указать ID дополнения включите ключ applications в manifest.json и установите его свойство gecko.id :

icons/border-48.jpg

Дополнение должно иметь иконку (значок). Эта иконка будет показана в списке дополнений в Менеджере Дополнений. Наш файл manifest.json сообщает, что иконка будет находиться в файле "icons/border-48.jpg".

Создайте директорию (папку) "icons" внутри директории "borderify" . Сохраните в ней иконку под именем "border-48.jpg". Вы можете использовать иконку из нашего примера, которая взята из набора иконок Google Material Design, и используется по лицензии Creative Commons Attribution-ShareAlike.

Вы можете использовать собственную иконку. Её размер должен быть 48x48 пикселей. Вы можете также использовать иконку размером 96x96 пикселей для отображения на мониторах высокого разрешения. В этом случае вам необходимо указать её в качестве свойства "96" объекта " icons" в файле manifest.json:

Также вы можете создать иконку в формате SVG и она будет корректно масштабироваться.

borderify.js

Наконец, создайте в директории "borderify" файл с именем "borderify.js" и поместите туда следующий код:

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

Пробуем

Сначала внимательно проверьте, что вы правильно разместили файлы и дали им правильные имена:

Установка

Начиная с версии Firefox 45 вы можете временно установить WebExtension с локального диска.

Откройте страницу "about:debugging", кликните "Load Temporary Add-on" и выберите файл manifest.json:

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

Для проверки, зайдите на страницу "about:addons" чтобы открыть Менеджер Дополнений. Вы должны увидеть своё дополнение с именем и иконкой:

Также, вы можете запускать WebExtension из командной строки, используя web-ext.

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

Теперь зайдите на любую страницу домена "mozilla.org" и вы должны будете увидеть красную границу вокруг страницы:

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

Обратите внимание, что после изменения файла manifest.json, вы должны вручную перезагрузить своё дополнение. В настоящий момент это значит, что вам нужно перезагрузить Firefox, а затем снова загрузить своё дополнение на странице "about:debugging". Мы работаем над улучшением этого процесса.

Упаковка и публикация

Чтобы другие люди могли использовать ваше дополнение, вам необходимо запаковать его. Дополнения Firefox в запакованном виде являются XPI файлами, которые представляют собой обычные ZIP архивы с расширением "xpi".

При упаковке необходимо учитывать следующее: в ZIP архиве должны быть только файлы, а не содержащая их директория (директория "borderify" не должна попасть в архив). Для того, чтобы создать правильный XPI файл из вашего дополнения, в командной строке перейдите в директорию "borderify" и выполните следующую команду:

zip -r ../borderify.xpi *

Начиная с Firefox 43 все дополнения должны быть подписаны прежде чем они будут установлены в браузер. Вы можете снять это ограничение только в Firefox Developer Edition или Firefox Nightly при помощи следующих шагов:

перейдите на страницу about:config в Firefox
при помощи строки поиска найдите xpinstall.signatures.required
дважды кликнув на этом свойстве или при помощи локального меню (через клик правой кнопкой мыши), выберите "Toggle", чтобы установить значение false .

Что дальше?

Теперь, когда вы имеете представление о разработке дополнений для Firefox, вы можете:

Вам интересно, что такое файл XPI и как его использовать? Что ж, вам повезло, и мы поговорим об этом в сегодняшнем посте.

Что такое файл XPI?

Помимо собственно установочного файла программного обеспечения, который обычно упаковывается в виде файла JAR, архив XPI также содержит install.js или install.rdf. Эти дополнительные файлы содержат инструкции по установке.

Firefox позволяет вам устанавливать файлы XPI (произносится как «zippy»), просто перетаскивая их в открытое окно веб-браузера. Программное обеспечение Mozilla использует компонент под названием XPInstall (который включает сценарий установщика Mozilla) для установки пакетов XPI. После загрузки и загрузки в диспетчер расширений инструкции по установке, содержащиеся в XPI, читаются и выполняются XPInstall.

Архивы XPI поддерживают только файлы, хранящиеся в несжатом или сжатом виде с использованием метода «deflate».

Как я могу открыть файл XPI?

Как мы упоминали выше, вам понадобится подходящее программное обеспечение Mozilla, чтобы открыть файл XPI. Чаще всего для этой цели используется браузер Firefox.

Если перетаскивание приводит к ошибке при установке файла XPI, попробуйте следующее:

Щелкните файл правой кнопкой мыши или нажмите и удерживайте его.
Нажмите «Открыть с помощью» и выберите приложение Firefox.

Как конвертировать файл XPI

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

Для SeaMonkey, который использует большую часть того же исходного кода Mozilla Firefox, вы можете использовать инструмент под названием Add-on Converter для SeaMonkey. Этот онлайн-инструмент преобразует файл XPI, совместимый с Firefox или Thunderbird, в файл XPI, который будет работать с SeaMonkey.

Как создать файл XPI

Файлы верхнего уровня, такие как файлы внутри manifest.json (WebExtensions) или chrome.manifest и install.rdf, должны находиться в корневом каталоге архива, а не в подкаталоге.

Чтобы узнать больше о том, как эффективно создавать модули установщика XPI кликните сюда.

Читайте также: