You can now use HTML, CSS and javascript to create extension panels for Adobe Creative Cloud applications such as Photoshop, Illustrator and Premiere.
This project helps you do so super easily using Brackets, the free and open source code editor for the web (and its little brother Edge code).
As part of the CC Extensibility Helpers, it leverages the Creative Cloud Extensions CLI to deploy a ready-to-use, customizable extension template based on a modified version of the Creative Cloud Extension boilerplate (Standard).
Installation
You don't need to download anything. Just do the following:
- Open Brackets or Edge code
- Choose
File > Extension Managerand clickInstall from URL - Paste the URL of this page (
https://github.com/davidderaedt/CC-Extension-Builder-for-Brackets) and clickInstall
No need to relaunch the app, your extension is ready to use.
Usage
Choose File > New Creative Cloud Extension.
In the dialog, fill the form (which should be self explanatory), and choose Create Extension.
You can then launch the target application, open your extension from the Extensions menu.
Back in your code editor, edit some HTML, like the <h1>Hello World</h1> tag, and save. Now, in your target application extension panel, click refresh to see it update.
To communicate with the target application, edit the ExtendScript code in the jsx/hostscript.jsx file.
FAQ
Is this an official Adobe product?
This Brackets extension is not an official Adobe product and is absolutely not supported by Adobe. The author just happens to be an Adobe employee.
I don't use Brackets or Edge Code. Are there other alternatives?
You could definitely create a project and deploy it manually, but this might prove cumbersome.
If you wish to use another code editor, a reasonable alternative would be to work from the command line, using the Creative Cloud Extensions CLI.
If you want the power of a full IDE, you can use the Eclipse based Extension Builder 3, which is an official Adobe product.
How to use ExtendScript to communicate with host applications?
Creating scripts for CC applications is related yet separated from creating panels. While you can perfectly use Brackets / Edge Code to edit such files, support is fairly basic for now.
To author ExtendScript files in a full featured Adobe official development environment, use ExtendScript Toolkit CC, which is included in the creative cloud. It includes help files and debugging tools.
Where are my files?
Extensions are located at ~/Library/Application\ Support/Adobe/CEPServiceManager4/extensions/, whatever the target application.
How do I uninstall those extensions?
To uninstall them, simply delete the extension directory corresponding to the extension ID. Note that Extension Manager CC will not "see" your extensions.
Can I use Live Preview?
Brackets' live preview will not work in the context of a CC application.
The default panel includes a "Refresh panel" button so that you don't have to relaunch your extension or target application.
It also includes a "Show dev tools" button to open the Chrome developer tools.
Can I customize the default extension template?
You can customize the default template from this extension source code, which you can see from the Help > Show extension folder menu. The template is located in the ccext-template directory.
How can I distribute my extensions?
Extensions created with brackets will only work on your system. You cannot simply copy/paste the extension folder to other users' systems (unless those users are extension developers themselves).
Extensions are meant to be installed using signed ZXP files. You can create ZXP files out of your source directory using the free command line tool ZXPSignCmd, available from the Adobe labs website.
The resulting ZXP file can then either be installed on the user system using Adobe Extension Manager CC (included with a creative cloud membership) or the Adobe Exchange panel.