HTML Panels Tips: #8 Photoshop Events, Take 2

Davide Barranca —  — 3 Comments

There’s a second way to listen to Photoshop Events from an HTML Panel – i.e. using the PSHostAdapters libraries – and today’s tip will show you how.

In Tip #7 I’ve demoed how using PhotoshopRegisterEvent let you listen to events and register callbacks: but that is just one way out of the two available (as it was back in the Flash land) so let’s find the second one.



I’ll be using as a starting point the very same Tip #7 code. This example panel has a switch that enables a listener on the cut, copy and paste events in Photoshop – the callback passes the corresponding StringID for displaying to the Text Area. Mind you, when an HTML Panel is open keyboard shortcuts might not work, so you’d be better off using the menus in order to trigger the events correctly – Adobe engineers are aware and will fix that in the future.


You need two PSHostAdapter libraries, that you can grab from the Extension Builder installation (in the Eclipse application): they are ps_host_adapter-2.0.js and (depending on your OS) PSHostAdapter.plugin or PSHostAdapter.plugin.8li. The following paths come from my OSX installation, for PC users it shouldn’t be any different – just use the Eclipse application as the root:

You should copy the ps_host_adapter-2.0.js somewhere in your project and include it in the index.html. Conversely, PSHostAdapter.plugin or PSHostAdapter.plugin.8li file must go in the Photoshop Plug-Ins folder (Plug-Ins/Automate/ works just fine on my OSX installation).


It’s basically the same of Tip #7, plus the new linked script. As you see, I’m using the Topcoat CSS library to style the panel GUI (refer to Tip #6 for detailed instruction).


Compared to Photoshop Events, Take 1 the Register() function is where things are different – the rest of the code is unchanged. It’s a matter of adding an Event Listener to a PSEventAdapter Instance, passing either a constant (see in ps_host_adapter-2.0.js for a list of the available ones) or an event TypeID, which you can grab as usual from the Scripting Listener log.

The PSCallback() function communicates then with the JSX the event.type in order to retrieve the StringID, which is passed to the Text Area.

Which is similar to the code for Flash panels in Extension Builder 2:


Just a dedicate function here:


Print Friendly

3 responses to HTML Panels Tips: #8 Photoshop Events, Take 2

  1. Great Help David.
    The eventListeners are working fine while passing constants from PSHostAdapter. But I am not able to register the event using event ID.
    For e.g. event ID for Doc Selected (‘slct’) is 2756. I tries using :
    PSEventAdapter.getInstance().addEventListener(“2756”, PSCallback);
    It its not working 🙁
    Can please help ?


  2. Hi Rishabh,
    you should app.charIDToTypeID(‘slct’) which returns the number 1936483188.
    Then use that following the other post about Events.
    Hope this helps!

    • hi davide i am created a photoshop html5 extension. i am tryieng to add photoshop open events listner. i want to alert in html panel when opening file in photoshop. how can i do this? pls help me.

Leave a Reply

Text formatting is available via select .

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">