Create an HTML5 / JavaScript extension for Adobe Illustrator & Photoshop CC
A few words about me
Hi! I’m Joël, co-founder of Paris-based Fontself and we released our 1st extension for Adobe Illustrator CC a few months ago.
We learned a lot during the process, so here is a first post that will helpfully get you to quick-start your own extension. Because you know, it’s really easy if you’re a Node.js or JavaScript developer!
After a successful Kickstarter campaign in october 2015, we built an Illustrator extension called Fontself Maker to simplify the creative process of type making.
First, some jargon terms!
CEP stands for “Common Extensibility Platform”
It’s the name of Adobe’s platform we are using to develop with JavaScript / Node.js / HTML5.
The latest versions are:
CEP 7, in Illustrator 2015.3–2017 / Photoshop 2015.5–2017
CEP 8, in Illustrator 2017 / Photoshop 2017
CEF stands for “Chromium Embedded Framework”.
It’s a simple framework for embedding Chromium-based browsers in other applications that Adobe is using as the foundation of extensions.
Where to start now?
I would recommend that you check out the samples 😉
Here is the latest sample repository for CEP8 / CC 2018 latest release.
For more samples ➡︎ historical repository.
In the latest repository check the “CEP_HTML_Test_Extension-8.0” extension.
It’s a all-in-1 extension where you can try all the features of CEP.
You can clone / download the official repository in local here (❗️~250MB+).
Setting Debug Mode ON
If you are developing / testing extensions on your computer, you will need to activate the debug mode once, otherwise unsigned extensions will not show up / not work.
Mac, in the terminal, type:
defaults write com.adobe.CSXS.8 PlayerDebugMode 1Windows:
regedit > HKEY_CURRENT_USER/Software/Adobe/CSXS.8Then add a new entry “PlayerDebugMode” of type “string” with the value of “1”.
Copying the extension to CEP’s folder
There are 3 types of extension folders: App folder, System folder, User folder.
For installing the extension in the User folder go to:
Mac
~/Library/Application Support/Adobe/CEP/extensionsWindows
C:\Users\{USER}\AppData\Roaming\Adobe\CEP\extensionsSo if you move the extension there & restart your app (Illustrator, Photoshop…) you will now be able to find it under the Menu “Window -> Extensions -> CEP HTML Test Panel 1”.
Say Hello to James!
The extension is not “pretty” but it has every functionality of CEP inside, it’s perfect to test & discover what you can do with CEP JavaScript API.
Debugging
For debugging the extension and see the logs / network requests / DOM you just need to put a `.debug` file (Already included in my sample extension here). Basically you’re assigning a debug port for every extension in this file, for my sample it will be localhost:8005 for Illustrator & localhost:8007 for Photoshop.
If you visit the debug URL you will see a blank page “Inspectable WebContents” with a link, just click on it to see the debug console!
Tip 1: As CEP is based on Chromium, you will need to open the debug page in Chrome or Chromium, if you try on another browser it will not work…!
Tip 2: 🚨CEP 7 ONLY🚨
There is a bug in the console 😱 and you can’t scroll in it, but here is the fix:
- Install Styler — Chrome Web Store
- Go on the debug page
- Click on the Styler extension icon
- Add in the CSS area the code below ⬇️
html /deep/ * { min-width: 0; min-height: 0; }
More CEP details? ➡ The CEP Documentation
Asking questions / Where to find answers?
Usually I go to Stack Overflow, but you will not find a lot of answers about CEP there at the moment.
Instead I would recommend you check:
- The CEP’s issues on GitHub
- Extensions / Add-ons Development on Adobe’s Forums
- Adobe’s Forums
There you can do a global search or find the community you’re interest in, for me it was “Illustrator Scripting” most of the time.
Tip: you can also do a Google search like this one.
You need a more complete tour / tutorial?
If you Google something related to CEP, you will find comments, answers & blog posts written by Davide Barranca, these saved me a lot of my time! Check his website ⬇️ (& Thank you Davide ;)
Davide also did a complete ebook tutorial about it: htmlpanelsbook.com
Starting at $149 you will have ~300 pages of explanations & code for 28 panels to try.
You can get a sample for free on the website if you give your email.
This ebook is focused on Photoshop but as CEP is almost the same for every app, it’s still really valuable for the other apps like Illustrator, InDesign or even After Effects.
So if you want to do a great extension you NEED this 👍 It will save you a lot of time! & make Davide happy (He invested a lot of time in it! And He’s also keeping it up-to-date regularly).
How to manipulate app native objetcs (Layers, Text…)?
Everything before was about CEP, but if you want to look at what you can do with app objects it’s called “scripting”. This is the code in .jsx files.
The scripting documentations for all apps: adobe.com/devnet/scripting.html
In the JavaScript scripting PDF you will find the complete js API.
There you can find how to read data, create objects …
Just to clarify something important, the JavaScript in .jsx files is called ExtendScript it’s a dialect of ECMAScript (3) similar to JavaScript but you will find some limitations and custom implementations made by Adobe.
You can look at the main ExtendScript repository (made by scripters):
The wiki is really helpful: github.com/ExtendScript/wiki/wiki
There is also a full IDE, the ExtendScript Toolkit, if you want to try some code & debug: adobe.com/products/extendscript-toolkit.html
The IDE will help you & if you need a complete API doc check: yearbook.github.io/esdocs/#/ (don’t forget to filter the doc based on the app)
Tip: There is also the “Script Console” extension to execute ExtendScript code, it’s easier but without the debug environment of the IDE.
For scripting tutorials you can look at:
github.com/jtnimoy/scripting-for-illustrator-tutorial for Illustrator.
smashingmagazine.com/…intro-to-photoshop-scripting/ for Photoshop.
Breaking news: The Illustrator version now support color fonts! 🌈
Bonus: If you invite your friends with your referral link & they end up purchasing, we will give you $5 for each purchase they make.
To be perfectly honest, we’re happy to share some of the financial outcome with you (we’d rather give it back to you than spend this on advertising, right 😉
Have fun making extensions!
Comment here or ping me on Twitter @Jolg42
