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. So, I was fighting with this alone and finally I've created a simple plugin with HTML UI, jsvacript backend working as an extension in Adobe Illustrator CC 2015. Huh, where should we start. 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:
 |
| Root plugin folder - minimal configuration |
This is a structure of the extension root directory. All we needs to start is a HTML file and some configuration files to tell Adobe application that we are the plugin. Lets look a little bit closer to those folders and files.
 |
| Content of CSXS folder - an extension manifest |
The manifest.xml file is one of required files for the plugin to be recognized. 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.
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/
So, let's try it out!
The example presented above you can download here: PP-Extension.zip.1. Please copy the content of the ZIP file to the folder (Windows OS), including the zipped folder:
If folder doesn't exists create it. This is a place where Illustrator 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. Next step, just run your Adobe Illustrator CC 2015 (this is a target of the plugin, set in metadata file)
3. Go to menu: Windows / Extensions and choose our extension - Adobe Extension, like in the screenshot below
 |
| How to show the extension in the Adobe Illustrator CC 2015 |
After all, you should be able to see new extension windows with simple text like in the picture. Congratulations you've run your first Adobe extension.
4. Now lets execute the debugger, look below, go to the url: http://localhost:7777/
 |
| Page seen when entering debugging session for extension |
 |
| Debugging Adobe Illustrator extension in Chrome, using .debug file |
Try hover any tag of the page and you will see that it is automatically hovered in the extension window. Great, isn't it?
Try play around with the code, add some new things there etc. This is the end of the first part.
Thank you for reading.
Comments
Post a Comment