Tutoriel graphique de première expérience de développement d'extensions Adobe Html5

Adobe produit une large gamme de gammes de produits logiciels de traitement multimédia, couvrant le montage audio et vidéo, le traitement d'images, la conception graphique, la post-production cinématographique et télévisuelle et d'autres domaines. Afin d'étendre les fonctions du logiciel, Adobe propose aux développeurs deux manières d'augmenter les fonctions du logiciel : les plug-ins et les extensions. L'année dernière, deux plug-ins Premiere ont été développés à l'aide du SDK officiellement fourni, qui ont été utilisés pour importer des fichiers multimédia dans des formats personnalisés et prévisualiser des flux vidéo. Récemment, j'ai expérimenté le développement d'Adobe Extension.

Adobe Plugin est généralement utilisé pour fournir des fonctions plus proches du niveau sous-jacent. Pour des raisons d'efficacité, le SDK officiel du plug-in fourni est basé sur le langage C++. Adobe Extension a tendance à fournir des extensions pour les applications de couche supérieure, qui ont été implémentées sous la forme de Flash à l'ère Adobe CS.

À l'ère d'Adobe CC, l'implémentation HTML5 était fournie, ce qui permettait aux développeurs de s'interfacer avec HTML5, CSS3, Javascript et même NodeJS pour le développement. Étant donné qu'Adobe a intégré CEF dans Premiere Pro, il peut analyser et restituer efficacement le HTML5 et exécuter des programmes Nodejs. Nodejs peut réaliser l'appel de fonctions système, ce qui n'est pas trop simple ! Dans cet article, je résume grossièrement le parcours d'utilisation de HTML5 pour développer une extension Adobe. L'extension que nous souhaitons réaliser est très simple, comme le montre la figure ci-dessous :

Il s'agit d'une extension PremierePro développée par Pond5, un site Web de commerce de matériel vidéo étranger bien connu. Elle permet aux utilisateurs de se connecter au site Web dans Pro, de télécharger des aperçus, d'acheter du matériel haute définition, d'importer automatiquement des vidéos ou de remplacer automatiquement des vidéos. Cela élimine le besoin pour les utilisateurs d'ouvrir un navigateur pour se connecter au site Web, ce qui améliore considérablement l'expérience utilisateur. Des plugins similaires sont développés par Shutterstock :

Adobe a officiellement lancé un IDE pour développer l'extension Adobe Html5 basée sur Eclipse. Par conséquent, nous configurons d’abord l’environnement de développement selon le processus suivant :

Téléchargez Eclipse, de préférence la version 3.6 ou supérieure, et Extension Builder

Installez Adobe Premiere Pro CC 2014/2015. Configurez l'application cible et le gestionnaire de services d'elicpse.

Activer le mode débogage : ajoutez le champ "PlayerDebugMode" dans le registre

La configuration est terminée et vous pouvez désormais utiliser Eclipse pour générer le projet de modèle d'extension. Le projet de modèle généré est très simple, avec un seul bouton par défaut dans le panneau :

Dans le développement d'Adobe Html5 Extension, le fichier le plus important est manifest.xml. Ce fichier décrit les informations de base de cette extension afin que le programme hôte Adobe puisse la reconnaître et la charger normalement. Son contenu général est le suivant :

Parmi eux, BundleName, BundleId et BundleVersion sont déterminés par le développeur, généralement sur la base d'une itération normale de version. La chose la plus importante est le contenu des deux balises HostList et RequiredRuntimeList. La liste d'hôtes détermine les programmes hôtes pris en charge par cette extension (tels que PremierePro, After Effects, etc.). Le code suivant indique que plusieurs programmes hôtes peuvent être chargés :

Seul Photoshop Extended est pris en charge ici et son ID d'hôte correspond à PHXS. Les ID d'hôte et les versions des autres programmes hôtes sont les suivants :

Notez que la version utilise la forme de crochets [14.0, 14.9], ce qui indique que cette extension prend en charge les versions Photoshop Extended 14.0-14.9. Les versions Photoshop Extended supérieures ou inférieures à cette version ne chargeront pas cette extension. Cependant, que se passe-t-il si vous souhaitez spécifier que toutes les versions supérieures à une certaine version sont prises en charge ? Par exemple, si vous souhaitez prendre en charge PremierePro CC 2014 ou supérieur, comment spécifier cette version ? Écrivez simplement le numéro de version le plus bas :

De plus, il existe le label RequiredRuntimeList. Cette balise spécifie la version CEP du runtime. Ce qu'on appelle CEP est l'abréviation de Common Extensibility Platform. Il fournit un ensemble de services de base pour permettre aux développeurs d'exécuter du code Extendscript, de détecter les variables d'environnement du programme hôte et de traiter les événements envoyés entre l'extension et l'hôte. Auparavant, cet ensemble de services s'appelait Creative Suite Extensible Services, ou CSXS en abrégé. Par conséquent, l’abréviation CSXS est encore visible dans certains fichiers de configuration. La version initiale de CEP était 4.x et s'est jusqu'à présent développée en 5 versions majeures. La dernière version est 8.x, qui prend en charge le dernier programme hôte Adobe CC 2018.

Comme indiqué ci-dessus, si nous souhaitons prendre en charge la version CC de première génération du programme hôte, la version de RequiredRuntime doit être définie sur 4.0. Sinon, l'extension ne pourra pas être chargée normalement. De plus, si vous souhaitez accéder au système de fichiers dans l'extension, vous devez spécifier des paramètres supplémentaires :

Lorsque nous développons, nous devons ajuster le code d'extension à tout moment. Le programme hôte Adobe ignore les extensions non signées et ne les charge pas. Par conséquent, nous devons activer le mode débogage afin de ne pas avoir à signer l'extension pendant le développement :

Sur un Mac, ouvrez le fichier ~/Library/Preferences/com.adobe.CSXS.6.plist et ajoutez une ligne avec le nom de clé PlayerDebugMode, tapez String et la valeur définie sur 1. Sous Windows, ouvrez la clé de registre : HKEY_CURRENT_USER. /Software/Adobe/CSXS.6, ajoutez une paire clé-valeur nommée PlayerDebugMode, tapez String, valeur 1.

Remarque : Si la version du programme hôte est différente, les fichiers correspondants peuvent également être différents. Par exemple, dans CC2017, vous devez modifier la partie correspondante ci-dessus en CSXS.7

L'outil de débogage Chrome permet d'observer la sortie de l'extension et d'explorer la structure DOM de l'extension, ce qui est très utile pour le débogage. L'activation de l'outil de débogage Chrome est également très simple. Créez un fichier nommé .debug dans le répertoire racine du dossier d'extension et écrivez le contenu suivant :

Cette liste illustre les différents ports utilisés lors du débogage de différents programmes hôtes. En prenant Pond5 comme exemple, le contenu de son fichier .debug est le suivant :

Lors de la spécification de l’extension de débogage Premiere, le port est 8089. Comme indiqué ci-dessous :

Pendant le développement, vous devrez peut-être désactiver la mise en cache du contenu Web par CEF. Vous pouvez directement supprimer manuellement le dossier correspondant à l'extension à l'emplacement suivant :

Windows : C:/Users/USERNAME/AppData/Local/Temp/cep_cache/Mac : /Users/USERNAME/Library/Logs/CSXS/cep_cache

Bien sûr, certains développeurs Adobe disent également de spécifier le paramètre CEF <Parameter>--disable-application-cache</Parameter> pour désactiver la mise en cache CEF, mais cela ne semble pas fonctionner après l'avoir essayé. Dossier d'extension L'extension est stockée à deux emplacements, à l'échelle du système et personnel de l'utilisateur. Si vous installez l'extension à l'échelle du système, le fichier d'extension sera stocké à l'emplacement suivant : Sur Mac, :/Bibliothèque/Application Support/Adobe/CEP/extensionsSur Windows :C:/Program Files (x86)/Common Files/Adobe/ CEP/prolongations

De cette façon, tous les utilisateurs du système actuel peuvent charger cette extension. Il peut également être installé uniquement pour l'utilisateur actuel, et son emplacement est le suivant :

Sur Mac : ~/Library/Application Support/Adobe/CEP/extensionsSur Windows : C://AppData/Roaming/Adobe/CEP/extensions Emballage de signature

Lors de la publication d’une extension, l’intégralité du package doit être signée. Vous devez utiliser ici l'outil ZXPSignCmd, qui peut être téléchargé sur le site officiel. Tout d’abord, pour signer, nous avons besoin d’un certificat numérique. Nous pouvons acheter ce certificat auprès d'une agence tierce émettrice de certificats, ce qui nécessite un certain montant de financement. Vous pouvez également créer un certificat auto-signé pour signer l'extension. Passons en revue le processus de cette dernière manière :

Cela générera un certificat auto-signé dans le répertoire courant, et nous pourrons ensuite utiliser ce certificat pour signer le package :

Lorsque l'outil ZXPSignCmd signe, il génère un fichier META-INF dans le répertoire d'extension, qui stocke les informations de signature. Ensuite, l'outil regroupera et compressera l'intégralité du répertoire dans un fichier *.zxp. C'est le fichier d'extension que nous devons finalement publier. ^_^

Analyse de routine de Pond5 et Shutterstock En analysant attentivement l'implémentation de Pond5 et Shutterstock, nous pouvons résumer la logique générale d'exécution de ce type d'extension :

(1) Ouvrez le panneau d'extension dans le programme hôte et recherchez l'extension chargée via Window-Extensions

(2) Le script d'extension analysera si l'utilisateur l'utilise pour la première fois. Si c'est la première fois, laissez l'utilisateur sélectionner l'emplacement où le matériel vidéo doit être enregistré. Ceci est généralement réalisé via une boîte de dialogue contextuelle. Les informations d'emplacement sélectionnées par l'utilisateur sont généralement conservées dans le répertoire personnel de l'utilisateur via un fichier XML. Si l'utilisateur n'utilise pas l'extension pour la première fois, le fichier XML dans le répertoire personnel sera directement chargé et analysé.

(3) L'utilisateur clique sur un certain matériel vidéo pour lancer le téléchargement. Ce processus peut généralement être réalisé via nodejs. Cependant, la fonction de rappel de téléchargement doit être configurée.

(4) Une fois le téléchargement réussi, exécutez la fonction de rappel et importez le fichier vidéo téléchargé dans le programme hôte. Cette étape est implémentée en appelant le script extendscript. Pour l’écriture de scripts spécifiques, veuillez vous référer ici. En nous référant à cette routine, nous avons implémenté une extension Adobe similaire à Pond5 et Shutterstock :

Ce qui précède est le didacticiel graphique pour la première expérience de développement d'Adobe Html5 Extension présenté par l'éditeur. J'espère qu'il vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !