CODEWITHSUNDEEP
adobehtmlextensionsadobe-cc
Talha Akbar
Talha Akbar

Reputation: 10030

Adobe CC: How HTML5 extensions work?

recently, I've been looking into how to create an Adobe extension. In CC versions, you can build HTML5 extensions which includes knowledge of HTML/CSS/JS only. This sounds really interesting but, the only thing I am not sure how they work and there are not much resources out there. I read Extensibility Overview. It didn't help much. Basically, what I am trying to do is look at how an extension can communicate with an Adobe product and what are the limitations? A nice example would be Flexi Layouts 3. How does it do what it does? Is it really a Dreamweaver extension?

Upvotes: 1

Views: 357

Answers (2)

Ash Ryan Arnwine
Ash Ryan Arnwine

Reputation: 1481

Overview

HTML5 extensions run on a technology called CEP (Common Extensibility Platform).

To get an overview and learn how to get started, we have a new CEP Getting Started repo on GitHub that should be helpful.

Your question

Basically, what I am trying to do is look at how an extension can communicate with an Adobe product and what are the limitations?

CEP extensions communicate with the host app's (Photoshop, InDesign, Premiere Pro, etc) scripting engine via a CEP library (CSInterface) method called evalScript().

Here's the basic example from the Getting Started guide in the repo above:

/* 1) Create an instance of CSInterface. */
var csInterface = new CSInterface();

/* 2) Make a reference to your HTML button and add a click handler. */
var openButton = document.querySelector("#open-button");
openButton.addEventListener("click", openDoc);

/* 3) Write a helper function to pass instructions to the ExtendScript side. */
function openDoc() {
  csInterface.evalScript("openDocument()");
}

As for limitations, it will depend on what you want to do. If the host app's ExtendScript scripting engine supports your use case, you will be able to make calls to that engine from your CEP extension.

Upvotes: 0

devB78
devB78

Reputation: 12244

This link about Adobe Extension Builder might answer your question:

http://www.adobe.com/devnet/creativesuite/cs-extension-builder.html

There you will find an introduction to HTML5 extensions including a short guide, and repo to sample extensions.

Upvotes: 0

Related Questions