In diesem Artikel erfahren Sie, wie Sie Erweiterungen / Plugins für die Adobe Creative Cloud Anwendungen entwickeln können. Für eigene Bedienfelder stehen aktuell verschiedene Technologien zur Verfügung: UXP und Adobe CEP.

UXP ist der moderne Weg zur Erstellung von Plugins und Skripten für Adobe Creative Cloud. UXP steht allerdings noch nicht für jede Adobe Anwendung zur Verfügung, weshalb Adobe CEP für universelle Plugins noch immer die einfachste Methode ist. Adobe CEP steht aktuell für die folgenden Produkte zur Verfügung:

• Photoshop
• InDesign
• InCopy
• Illustrator
• Premiere Pro
• Prelude
• After Effects
• Animate
• Audition
• Dreamweaver
• Bridge
• Rush

Sollten Sie Unterstützung bei der Entwicklung einer Erweiterung benötigen, können Sie uns gerne kontaktieren.

Im Nachfolgenden erfahren Sie, wie Sie selbst ein einfaches Bedienfeld erstellen können.

Ordnerstruktur

Um mit der Entwicklung los zu legen, müssen sie zunächst einen Ordner für ihre Erweiterung erstellen. Mit Ausnahme des erforderlichen CSXS-Ordners, der die Datei manifest.xml enthalten muss, ist die Ordnerstruktur ziemlich flexibel. Adobe empfiehlt, die Verzeichnisse wie folgt zu strukturieren:

Der Ordner CSXS – enthält die Datei manifest.xml, in der die Konfigurationsdaten des Panels gespeichert sind.
Der Ordner Client enthält den Front-End-Code, z. B. HTML, JavaScript, CSS, die erforderliche Adobe CSInterface.js-Bibliothek und alle Bibliotheken von Drittanbietern, die Sie möglicherweise einbinden möchten.
Der Ordner Host enthält die ExtendScript-Datei (index.jsx), die für den Zugriff auf die meisten Funktionen in der Host-Anwendung verwendet wird. Mit dieser Struktur können Sie eine klare Trennung der Bereiche erreichen, indem Sie ihnen jeweils einen Ordner zuweisen.

Adobe stellt mit dem CEP HTML Extension Cookbook Entwicklerressourcen zur verfügbar.

CSInterface.js

Sie müssen die neueste Version von CSInterface.js herunterladen CSInterface ist eine Bibliothek, mit der Sie das Panel steuern und mit Adobe-Produkten wie Photoshop, InDesign, Premiere Pro und anderen kommunizieren können.

manifest.xml

In dieser Datei können Sie viele Einstellungen ändern. Die wichtigsten sind unten dargestellt:

• ExtensionBundleId: Eine eindeutige Bundle-ID, die Sie Ihrem Panel zuweisen, z. B. com.vakago.test
• Id: Eine eindeutige Panel-ID, die Sie Ihrem Panel zuweisen, z. B. com.vakago.test.panel
• Host-Name und Version: Liste der Host-Anwendungs-IDs und Versionen, die Ihr Panel unterstützen soll.
• MainPath: Pfad zu Ihrer index.html.
• ScriptPath: Pfad zu Ihrer index.jsx.
• Menu: Der Erweiterungs-Name, welcher in der Adobe Applikation angezeigt wird.
• Size: Standardgröße für Ihr Panel in Pixel

Alternativ zu ScriptPath können JSX Dateien auch über die CSInterface Bibliothek geladen werden. Dies hat eine Reihe von Vorteilen: Beispielsweiße können so einfacher Live-Reloading Funktionalitäten umgesetzt werden, da ein erneutes Laden des Frontend Codes auch den Backend Code neu laden kann.

Frontend

Für die Entwicklung des Frontends benötigen Sie Webentwicklungskenntnisse. Sie können die Oberfläche ihrer Erweiterung mit HTML, CSS und JavaScript aufbauen. Auch JavaScript Frameworks wie Angular oder React können eingesetzt werden. Adobe nutzt das Chromium Embedded Framework und erlaubt damit Funktionalitäten zu nutzen, die auch in Google Chrome zur Verfügung stehen.

Um ExtendScript Code auszuführen müssen Sie CSInterface.js laden. Eine CommonJS Version der CSInterface Bibliothek steht zudem zur Verfügung: @cep/csinterface

Backend (ExtendScript)

Der ExtendScript-Code unterscheidet sich von dem clientseitigen JavaScript dadurch, dass Sie über ExtendScript auf die Funktionen der Host-Anwendung zugreifen können, z. B. ein Dokument öffnen, bearbeiten, exportieren etc…

ExtendScript ist syntaktisch JavaScript (ECMAScript 2). Modernere ECMAScript Features lassen sich nicht nutzen. Es ist allerdings möglich mit einem Transpiler (z.B. babel) und einigen polyfills modenes JavaScript und sogar Typescript code zu schreiben und in ExtendScript zu transpilieren.

Werkzeuge wie die ExtendScript Developer Tools können bei der Entwicklung des ExtendScript codes helfen.

Plugin Ausführen

Um Ihre Erweiterung zu testen können Sie sie in den nachfolgenden Ordner verschieben.

• Win: C:\Users\<BENUTZER>\AppData\Roaming\Adobe\CEP/extensions
• macOS: ~/Library/Application Support/Adobe/CEP/extensions

Die Adobe Applikation muss hierfür neu gestartet werden. Es empfiehlt sich daher eine live-reload Funktionalität einzubauen, um zu verhindern, dass Sie nach jeder Änderung die Applikation neu starten müssen.