Introducing HTML5 extensions

This article discusses the new HTML5 based extensions for Creative Cloud products.

When Creative Cloud was launched in June 2013, we added support for HTML5-based panels in several Adobe products. These new panels open up the world of panel development to a wider range of developers who may be more comfortable working with HTML/JavaScript and CSS. Since June, support for HTML5-based panels has been added to more Adobe products. As of now Photoshop CC, Illustrator CC, InDesign CC, Premiere Pro CC and Prelude CC support HTML5-based panels.

A preview of Adobe Extension Builder 3, a new developer tool that supports creating HTML5-based extensions, was launched in June at Adobe Labs. 

Download Extension Builder 3 Preview

Starting in the middle of 2014 we will begin removing Flash-based extension support in Creative Cloud products, starting with Photoshop CC. We encourage all developers to start planning and migrating to the new extensibility framework based on HTML5.

HTML5-based panels allow developers to leverage the rich ecosystem of existing JavaScript frameworks and tools when creating their panels. HTML5-based panels share the same technology with web applications, which opens up exciting opportunities for integration with web services.

The videos below demonstrate the power of HTML5 extensions, and how to build them.

All extensions for Adobe desktop applications are built on the Common Extensibility Platform (CEP), which was previously called CSXS. The current versions, CEP4, supports both Flash and HTML5 extensions. An Adobe desktop application that has integrated CEP4 can run either kind of extension.

CEP 4.0 uses Chromium Embedded Framework 1 (CEF1) to power HTML5 extensions. CEP 4.2 will use CEF3. CEF3 is a multi-process implementation that uses asynchronous messaging to communicate between the main application process and one or more render processes (WebKit + V8 JavaScript engine). It uses the official Chromium Content API (CEF 1 uses the WebKit API), thus giving performance similar to Google Chrome.

Flash/Flex/AIR extensions run in APE (Adobe Player for Embedded). This product is deprecated, and, as stated above, will be removed from Creative Cloud products, starting in the middle of 2014. This means that developers must migrate their extensions to HTML5 if they want to continue to support them in Creative Cloud (CC) applications. Flash-based extensions will continue to run as before in versions CS5.x and CS6 of their host applications.

In order to migrate your Flash/Flex extension to HTML5, you must replace all ActionScript and MXML code with JavaScript, HTML and CSS. This means you will have to recreate the panel UI.

ExtendScript code will not be affected by this change. However, the method you use to call ExtendScript code from the panel is different. If you have been using CSAW (Creative Suite ActionScript Wrapper) to call into the application DOM, you will have to replace that with native ExtendScript code.

Passing complex objects

You may need to pass complex objects between your extension panel and ExtendScript. Currently, an HTML panel can interact with ExtendScript through evalScript(), which supports strings. Binary data must be base64-encoded or quoted-printable to pass it in this way.

It is possible to use JSON strings; however, ExtendScript does not support JSON.stringify(). You can work around this by building strings like this, which you can then decode in JavaScript using JSON.parse() :

You can also use local files to exchange complex objects.

Packaging and distribution

HTML5 extensions are packaged as ZXP files, in the same way as Flash-based extensions. Extension Manager CC supports the installation and management of all ZXP extensions.

You can distribute your ZXP files privately or through Adobe Exchange.

Developer tools

You can start building HTML5 extensions now, using your favorite tools. The latest version of Extension Builder makes it easy for you to create a new project, edit the bundle manifest, export a project so that it can be distributed and many other things that are specific to Adobe products.

Summary

With HTML5 extensions, developers can build panels for Creative Cloud products using the same tools, frameworks and APIs that they use to build modern web applications. To get started, download Extension Builder 3 and join the discussion on the Extension Builder 3 forums.

Resources

A short guide to HTML5 extensions

Full documentation

Sample extensions

Davide Barranca’s blog

Extension Builder 3 Preview

David Deraedt’s plugin for Adobe Brackets

Adobe Exchange