autoEdit Adobe CEP Panel dev setup
Thanks to @bfasenfest help in figuring out adobe CEP there is now support for an adobe panel version of autoEdit under development.
CEP stands for Common Extensibility Platform and it's an SDK by Adobe to create panels for the Adobe suite.
It is now possible to run autoEdit as an Adobe panel. The idea is that when run inside of adobe as a CEP panel, autoEdit, will have access to same local databse as the desktop application, to allow maximum portability, and have extra acess to features to integrate with adobe premiere, such as sync play with clips in source monitor from transcriptions etc..
Also see autoEdit Adobe Panel user manual for user facing functionalities.
Example autoEdit CEP

electron vs adobe panel (vs nwjs)

It seems like adobe panel CEP and and Electron use slightly different setup of chromium.
The downside is, Chromium is a very large codebase and requires very powerful machines to build. For normal laptops, that can take more than 5 hours. So this greatly impacts the number of developers that can contribute to the project, and it also makes development slower.
In order to avoid the complexity of building all of Chromium, Electron uses libchromiumcontent to access Chromium's Content API.
The main difference is noticeable when calling window.process.versions in the console for CEP and for electron.
Due to some of these differences the code base for autoEdit has been adjusted to accomodate and target for the two enviroments.

Dev enviroment needed for CEP

    node
    npm
    You need to have recent version of Adobe Premiere on your system. Version 12.11 to ensure compatibility with all features.
    Chrome browser to view the dev tools for the CEP panel
    See here fore more details on JSX language used to interact with Adobe Premiere API and here
    optional but highly reccomended to use the Property Explorer extension in Premiere. (to install follow their instruction if you sing into adobe creative cloud it should auto install and be available in the window -> extensions list in Premiere )

setup

The main code for the adobe panel is in adobe-panel-src folder.
At a mimum the files needed in that folder for the CEP panel are
    The .debug file is necessary to get the chrome dev tools
    the manifest.xml is really the important part, its what loads the index.html and jsx file
    index.html entry point into the app
      We use autoEdit's electron/index.html for this
    jsx/Premiere.jsx contains APIs to communicate to Adobe Premiere
    node_modules "The root search path of third-party modules is the directory which contains your HTML file." from docs
However will see section below for an automated build development step to achieve this programmatically

1. allow un-signed extension

Since Premiere only accepts signed extension, you should tell it to accept unsigned extensions like this as well
But you can skip to Debugging Unsigned Extensions and do the following terminal comand on a mac.
1
defaults write com.adobe.CSXS.8 PlayerDebugMode 1
Copied!
You might need to potentially cover 5 to 8 depending on which CSXS version you have. eg
1
defaults write com.adobe.CSXS.5 PlayerDebugMode 1
2
defaults write com.adobe.CSXS.6 PlayerDebugMode 1
3
defaults write com.adobe.CSXS.7 PlayerDebugMode 1
4
defaults write com.adobe.CSXS.8 PlayerDebugMode 1
Copied!
1
defaults write com.adobe.CSXS.9 PlayerDebugMode 1
Copied!
You might need to re-start your computer

2. CEP development in autoEdit

git clone locally, so that you are setup to do a PR with any changes.
Then run npm install.
a series of npm scripts in package.json with ndoe module sync-files are used to copy the relevant files across from adobe-panel-src and the rest of the relevant parts of the electron app into the CEP Adobe Premiere extension folder.
The extension folders are
    For Win: C:\<username>\AppData\Roaming\Adobe\CEP\extensions
    For Mac: ~/Library/Application Support/Adobe/CEP/extensions
For one off development builds in local adobe extension folder do
1
npm run adobe-panel-dev
Copied!
For development with watch
1
npm run adobe-panel-dev:watch
Copied!
With this last comand everytime you save it automatically copies changes over.

3. open CEP panel in Adobe Premiere

Last but not Launch Premiere Pro and open this Panel under
1
Window > Extensions > autoEdit
Copied!
Everytime you want to update changes in the panel you need to close and reopen it.

3. CEP local server

Local server for adobe panel is at http://localhost:8099/, there you can see the dev tools inspector and console."

autoEdit adobe JSX integration

Packaging and distributing extension

some more docs for Adobe dev documentation

For a more comprehensive unofficial guide of Adobe CEP see this series of blog posts, highly recommended if you want to understand the overall setup and inner workings.
CEP 5 Super mega guide: Extending Adobe apps with HTML5+Node.js | fenomas.com

Last modified 1yr ago