Adobe Illustrator HTML Extensions in short

Posted

By this post I would like to show, in short, how to create an Adobe Illustrator CC HTML extension.

I was facing many problems when trying to work with Adobe support, forums etc. It’s really hard to find valuable information in the mess we’re meeting in the Internet. That was some time ago and now probably something changed. I hope this simple starter kit is ok, when you wan’t to get quickly working plugin without any additional stuff there. I’ve created a simple plugin with HTML UI, JavaScript backend working as an extension in Adobe Illustrator CC 2015 (that was a version, I was working with).

I believe the first part is to have a good starter kit, with folder structure where we can play around.
Lets look at the picture below:

 

Starter Kit extension folder

 

This is a structure of the extension root directory. Next one is CSXS directory.

 

Content of CSXS folder – an extension manifest

And the last one gfx directory.

Extension icons for light and dark Illustrator themes

 

As we can see all we needs to start is not too much. Lets look a little bit closer to those folders and files.

File: CSXS/manifest.xml

The manifest.xml file is one of required files for the plugin to be recognized and the most important. For now we are talking about a simple plugin for our internal use, no real production in mind (for now). Lets see what’s hiding inside that file:

I think it’s better to go further now instead of going into details of the file.

File: .debug

The second file important from the development point of view is .debug .

The file is an entry point for debugging our plugin. The file .debug is a configuration for server which will be exposed publicly for us to use for debugging. Here we can see three important parts:

  • Id="PP"  – id of our plugin
  • Name="ILST"  – denotes that we will debug using Illustrator
  • Port="7777"  – the port where the debugger will be available, here http://localhost:7777

 

File: cs-interface-8.js

This is a special file providing some kind of bridge between JSX Adobe files (JavaScript Extensions Scripts) and the JavaScript of current HTML runtime. The one I used for Adobe Illustrator CC v22.1 is with CEP version 8.x (by default called CSInterface.js), and can be found on official Adobe GitHub for CEP. For the time of writing this post, the newest release is CEP_9.x.

File: app.js

This file, as you probably guessed, is a bootstrap file for all our JavaScript code that we use in plugin. Lets take a closer look.

There is not too much. I tooked some code from Adobe CEP examples to make the plugin doing something. Generally when the window.onload  event is executed, the special event listener is created for one of Adobe events: 'com.adobe.csxs.events.ThemeColorChanged' . This event is triggered when we change the UI theme of the application. So after the event is triggered, the function themeChangedEventListener(event)  is called to make some magic with environment theme color. It fetches theme main color information, converts UIColor  object to HEX color to be used in style for plugin background of window. here we use object 'main' , which is an id of the body in index.html file.

File: index.html

And finally main entry point that contains all UI stuff here.

I’ve marked some more important line above. First we need to import the cs-interface-8.js file, which is the core to access Adobe CEP. Then some id’s and finally our pretty code in app.js.

So, let’s try it out!

The example presented above you can download as a ZIP from the link  com.pp.example_extension.zip

1. Content of the ZIP file to the folder (Windows OS), including the zipped folder:
C:\Users\[user_home_folder]\AppData\Roaming\Adobe\CEP\extensionsIf folder doesn’t exists create it. This is a place where Illustrator and other Adobe tools will search for extensions.
I don’t remember where to put unzipped folder on Mac, but try to find it on Adobe developers blog, it should be somewhere.

2. If you didn’t create any Adobe HTML extensions before probably you will need also to enable execution of non-certified plugins. In that case please download this registry key  enable_adobe_extensions.zip. This ZIP contains one reg file that will add missing entries in you registry. Don’t be afraid 🙂 just look into file to ensure what is it doing.

3. That should be all to make possible running our plugin in Illustrator. Let’s run Adobe Illustrator CC.

4. In the extensions menu you should get new extension.

 

Extension location in Illustrator menu

 

5. After running the extension you will see new window

 

Working extension window

 

6. And to check the icon of the extension you can now collapse it to the small box

 

Extension boxed

 

7. We can now dock it in our toolbar

 

Extension docked in Illustrator toolbar

 

Theme and plugin listener

I’ve added two kind of icons to this plugin in gfx folder. Those icons has been registered also in manifest.xml file. This helps to show two types of our icons for darker theme and lighter. To check it let’s do following:

1. Open UI settings menu

 

Illustrator User Interface settings menu

 

2. Check different theme in the settings below

 

Theme changes in Illustrator

 

3. Try the first and last one and you will see that the extension icon has been changed to the one for light (normal) or dark theme

 

Light theme extension icon

 

Voilà! Seems like it is working.

Debugger time

After we know that the extension works, we can debug it via Chrome.

1. Open Chrome browser and go to URL: http://localhost:7777, you should see something like this

 

CEP extension debugging

 

2. Next step click the link with your extension name, here “My Extension”

 

CEP extension debugging (Chrome Dev Tools)

3. Now you are able to fully debug you Adobe extension

Active debugging session of CEB extension (Chrome Dev Tools)

 

Hope it helps somehow, feel free to comment and add something.

Downloads

 

Leave a Reply

Your email address will not be published. Required fields are marked *