Графическое руководство по первому опыту разработки расширений Adobe Html5

Adobe производит широкий спектр программных продуктов для обработки мультимедиа, охватывающих редактирование аудио и видео, обработку изображений, графический дизайн, постпроизводство фильмов и телевидения и другие области. Чтобы расширить функции программного обеспечения, Adobe предоставляет разработчикам два способа увеличения функций программного обеспечения: плагины и расширения. В прошлом году с использованием официально предоставленного SDK были разработаны два плагина Premiere, которые использовались для импорта мультимедийных файлов в пользовательских форматах и ​​предварительного просмотра видеопотоков. Недавно я столкнулся с разработкой Adobe Extension.

Плагин Adobe обычно используется для предоставления функций, близких к базовому уровню. В целях повышения эффективности предоставляемый официальный подключаемый модуль SDK основан на языке C++. Adobe Extension имеет тенденцию предоставлять расширения для приложений верхнего уровня, которые были реализованы в форме Flash в эпоху Adobe CS.

В эпоху Adobe CC была предоставлена ​​реализация HTML5, которая позволяла разработчикам взаимодействовать с HTML5, CSS3, Javascript и даже NodeJS для разработки. Поскольку Adobe встроила CEF в Premiere Pro, она может эффективно анализировать и отображать HTML5, а также запускать программы Nodejs. Nodejs может реализовать вызов системных функций, что не так уж и просто! В этой статье я в общих чертах резюмирую путь использования HTML5 для разработки расширения Adobe. Расширение, которое мы хотим сделать, очень простое, как показано на рисунке ниже:

Это расширение PremierePro, разработанное Pond5, известным зарубежным сайтом по торговле видеоматериалами. Оно позволяет пользователям входить на сайт в Pro, загружать материалы для предварительного просмотра, приобретать материалы высокой четкости, автоматически импортировать видео или автоматически заменять видео. Это избавляет пользователей от необходимости открывать браузер для входа на веб-сайт, что значительно улучшает пользовательский опыт. Подобные плагины разработаны Shutterstock:

Adobe официально выпустила IDE для разработки расширения Adobe Html5 на основе eclipse. Поэтому мы сначала настраиваем среду разработки в соответствии со следующим процессом:

Загрузите Eclipse, желательно версии 3.6 или выше, и Extension Builder.

Установите Adobe Premiere Pro CC 2014/2015. Настройте целевое приложение и диспетчер служб elicpse.

Включите режим отладки: добавьте поле PlayerDebugMode в реестр.

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

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

Среди них BundleName, BundleId и BundleVersion определяются разработчиком, обычно на основе обычной итерации версии. Самое важное — это содержимое двух тегов HostList и RequiredRuntimeList. HostList определяет, какие хост-программы поддерживает это расширение (например, PremierePro, After Effects и т. д.). Следующий код указывает, что можно загрузить несколько хост-программ:

Здесь поддерживается только Photoshop Extended, а его идентификатор хоста соответствует PHXS. Идентификаторы хоста и версии других хост-программ следующие:

Обратите внимание, что версия использует форму квадратных скобок [14.0, 14.9], что указывает на то, что это расширение поддерживает версии Photoshop Extended 14.0–14.9. Версии Photoshop Extended выше этой или ниже этой версии не будут загружать это расширение. Однако что, если вы хотите указать, что поддерживаются все версии выше определенной? Например, если вы хотите поддерживать PremierePro CC 2014 или более позднюю версию, как указать эту версию? Просто напишите наименьший номер версии:

Кроме того, имеется метка RequiredRuntimeList. Этот тег указывает версию CEP среды выполнения. Так называемый CEP — это аббревиатура Common Extensibility Platform. Он предоставляет базовый набор служб, помогающий разработчикам выполнять код Extendscript, обнаруживать переменные среды главной программы и обрабатывать события, передаваемые между расширением и хостом. Ранее этот набор сервисов назывался Creative Suite Extensible Services, или сокращенно CSXS. Поэтому аббревиатуру CSXS все еще можно увидеть в некоторых файлах конфигурации. Первоначальная версия CEP была 4.x, и на данный момент она превратилась в 5 основных версий. Последняя версия — 8.x, которая поддерживает новейшую хост-программу Adobe CC 2018.

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

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

На Mac откройте файл ~/Library/Preferences/com.adobe.CSXS.6.plist и добавьте строку с именем ключа PlayerDebugMode, введите String и значением, равным 1. В Windows откройте раздел реестра: HKEY_CURRENT_USER. /Software/Adobe/CSXS.6 добавьте пару ключ-значение с именем PlayerDebugMode, введите String, значение 1.

Примечание. Если версия хост-программы отличается, соответствующие файлы также могут отличаться. Например, в CC2017 вам необходимо изменить соответствующую часть выше на CSXS.7.

Инструмент отладки Chrome помогает наблюдать за выводом расширения и исследовать структуру DOM расширения, что очень полезно для отладки. Включить инструмент отладки Chrome также очень просто. Создайте файл с именем .debug в корневом каталоге папки расширения и напишите следующее содержимое:

Этот список иллюстрирует различные порты, используемые при отладке различных хост-программ. Если взять в качестве примера Pond5, то содержимое его файла .debug будет следующим:

При указании расширения Premiere для отладки используется порт 8089. Как показано ниже:

Во время разработки вам может потребоваться отключить CEF кэширование веб-контента. Вы можете вручную удалить папку, соответствующую расширению, в следующем месте:

Windows: C:/Users/ИМЯ ПОЛЬЗОВАТЕЛЯ/AppData/Local/Temp/cep_cache/Mac: /Users/ИМЯ ПОЛЬЗОВАТЕЛЯ/Library/Logs/CSXS/cep_cache

Конечно, некоторые разработчики Adobe также советуют указать параметр CEF <Parameter>--disable-application-cache</Parameter>, чтобы отключить кэширование CEF, но после того, как я попробовал, он, похоже, не работает. Папка расширений Расширение хранится в двух местах: общесистемном и личном для пользователя. Если вы устанавливаете расширение для всей системы, файл расширения будет храниться в следующем месте: На Mac:/Library/Application Support/Adobe/CEP/extensions. В Windows: C:/Program Files (x86)/Common Files/Adobe/. CEP/расширения

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

На Mac: ~/Library/Application Support/Adobe/CEP/extensions. В Windows: C://AppData/Roaming/Adobe/CEP/extensions. Упаковка подписи.

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

Это создаст самозаверяющий сертификат в текущем каталоге, а затем мы сможем использовать этот сертификат для подписи пакета:

Когда инструмент ZXPSignCmd подписывает, он создает файл META-INF в каталоге расширения, в котором хранится информация о подписи. Затем инструмент упакует и сожмет весь каталог в файл *.zxp. Это файл расширения, который нам в конечном итоге нужно опубликовать. ^_^

Регулярный анализ Pond5 и Shutterstock. Тщательно проанализировав реализацию Pond5 и Shutterstock, мы можем суммировать общую логику выполнения этого типа расширения:

(1) Откройте панель расширений в хост-программе и найдите загруженное расширение через Window-Extensions.

(2) Сценарий расширения проанализирует, использует ли пользователь его впервые. Если это первый раз, дайте пользователю возможность выбрать место для сохранения видеоматериала. Обычно это достигается с помощью всплывающего диалогового окна. Информация о местоположении, выбранная пользователем, обычно сохраняется в домашнем каталоге пользователя через XML-файл. Если пользователь не использует расширение в первый раз, XML-файл в домашнем каталоге будет напрямую загружен и проанализирован.

(3) Пользователь нажимает на определенный видеоматериал, чтобы начать загрузку. Обычно этого процесса можно достичь с помощью nodejs. Однако необходимо настроить функцию обратного вызова загрузки.

(4) После успешной загрузки выполните функцию обратного вызова и импортируйте загруженный видеофайл в хост-программу. Этот шаг реализуется путем вызова сценария расширения. Подробную информацию о написании сценариев можно найти здесь. Ссылаясь на эту процедуру, мы внедрили расширение Adobe, аналогичное Pond5 и Shutterstock:

Выше представлено графическое руководство по первому опыту разработки расширения Adobe Html5, представленное редактором. Надеюсь, оно будет вам полезно. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам вовремя. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!