HTML5 (CEP) Panels for After Effects: Fixes, hacks and workarounds

I’m collecting a bunch of handy little code snippets and solutions from various developers so they don’t get lost. Here are a few to get things started:

CEP 6.1 changes

CEP 6.1 (CC2015.1) includes changes to node.js implementation.

Adobe has posted a sample panel showing how to work in the new structure.

Command line switches

You can use Chrome’s command line switches to change panel behavior and/or limits, as well as for debugging purposes. Add them to your manifest.xml file, like so:

<CEFCommandLine>
 <Parameter>--allow-file-access</Parameter>
 <Parameter>--allow-file-access-from-files</Parameter></CEFCommandLine>

Need a really long console.log()?

From Bruce Bullis:

Here’s a fix to the Chrome Debugger’s unwillingness to scroll past 99 Console() items, for extensions running in current Adobe apps.

Install Styler – Chrome Web Store
Go to your debug page http://localhost:8001/ (or whatever port you’ve designated)
Click on Styler extension icon (to right of address box)
Add “html /deep/ * { min-width: 0; min-height: 0; }” to the css.

Shorter filepath to CEP cookies

Since CEP panels are really just browser windows, you can store settings in cookies. If you need to access those cookies directly, they live here:

%localappdata%\Temp\

H/T Zack Lovatt

Refreshing the panel without closing and reopening it

If you’re just working on your UI and not interactions with the host app, you can add a refresh link to your panel and save yourself a few clicks.

<a href="javascript:history.go(0)">Click to refresh the panel</a>

H/T Jonas Hummelstrand

Want to talk to a bunch of devs?

Join the Motion Design Artists Slack. We’re all figuring this out together and happy to help.

 

2 thoughts on “HTML5 (CEP) Panels for After Effects: Fixes, hacks and workarounds”

Leave a Reply to Victoria Cancel reply