Creating Photoshop HTML5 Extensions

Adobe is dropping Flash support and switching to HTML5 for their extensions. YIKES! This is big news. So, I dusted off the old’ HTML side of my brain and started coding. I haven’t done HTML development since early 2000. The code below may not be good practice, or even current standard practice. But its functioning code that I’m hoping you’ll find helpful. I believe the best way to learn is by doing. step 1. Get things happening. step 2. Play!

Complete the ” Create HTML5 Extension In 5 Minutes” tutorial. (we’ll be expanding on the files created by this exercise.)

You can find it Through the Help > Adobe Extension Builder 3 Start Page. Or through the Help-Eclipse menu. Help > Help contents > Adobe Extension Builder > Getting Started> Create You Own HTML5 Extension

Eclipse Help Menu

On completion you’ll have an extension that is a single button that calls the name of your open application.

Just one button? Commonnn…. We need more!

2. Setup jQuery-UI

Download Jquery-ui. (I know there are a lot of other library options here… but jquery is all I knew, and ya gotta start somewhere.)

If your button looks like this and alerts “Hello Photoshop” Its time to get up and do a Happy Dance!

NOW the real fun stuff can begin! Did you see all those demo’s on the jquery-ui website? http://jqueryui.com/demos/ We can do all that in our extension!!
Pick one you like, and look at the source code.

I don’t like how this is setup. To me it seems overly complex. So I simplified things.
Here is a function that will have photoshop alert whatever text is placed into it, and return a text string. (We’ll use it for those Radio buttons.)

Now when you click a button, you’ll get a photoshop alert message, with the ID of the clicked button!

But…One way communication is never a good thing.

Getting data from Photoshop into the extension.

The scripts that came when you setup your initial extension project, include language that attaches any photoshop “result” to the evalScript functions callback. To get data out of photoshop, we simply add a callback inside the evalScript.

Run it. and you should see Photoshop adding Text to your Extension window.

Its that easy! Your done!

IF you completed this tutorial successfully, you now have all those UI options available from the jquery-ui page, a way to pass data between the extension and photoshop, and all kinds of HTML magic in between.

You can find a complete “jquerryUISampler” Eclipse Project Archived Zip file that has all the code work, and a ZXP you can install into Photoshop using your CC Extension Manager.

As a Bonus, you’ll also see included in the “jquerryUISampler” download a “TabbedUIExample.html” page. It has lots of other examples for different types of UI features you may want to include in your applications.

You’ll need to update your Manifest to use TabbedUIExample.html as your extension instead of the Index.html. Here’s how to do it.