Using the last version of jQuery with ADOBE CEP Panels (CSXS)


As a co-founder of Automate-IT, I write a lot of code each day to create specific systems and panels for a lot of Adobe applications, such as After Effects or Photoshop. Our main targets are broadcasters and international TV channels, providing solutions to automate graphics workflows. Check out our website if you want to know more :

Since the CC2014 release, Adobe provide a new API named CEP (previously CSXS), to create "control panels" using HTML5/CSS3/Javascript on the panel side, and a specific API based on ExtendJavascript and C++ on the host side. Even if each host has a different sets of functions to play with, who are most of the time not compatible between different applications, on the "WEB" side, most of the code can be reused if you try to port a panel from one application to another.

Developping CEP panels is not a easy task, because you have to understand how a modern website works, sometimes you have to now who node.js works, too ... but you also have to now exactly how the host (application) works and how to code plugins and scripts for it. That's a lot of things to learn at the same time if you never get in touch with it.

The "WEB" side of a panel is based on the Chromium Embedded Framework (CEF3). You can consider it as a subset of Chrome who is constantly running in any modern Adobe application. Because you create a panel like a Webpage, you can use any kind of framework such as AngularJS, Bootstrap or jQuery. We use the last two mentionned from times to times at Automate-IT. At the beginning, we started to make some tests using an old relase of jQuery provided with some code samples from Adobe. But when I tried to replace jQuery with a more recent version, the library wasn't loaded in the panel.

After a lot of researches (the CEP documentation doesn't provide too much information about these ... "details"), I figure out why jQuery was reported as a missing library.

I'm not really sure, but I think it's because the sourcing of the lib create a conflict between the way we declare jQuery and the nodeJS server embedded in each Adobe application.

To override this issue, you have to add this simple line after your Title declaration :

<script type="text/javascript">window.module = undefined</script>

So, if you take a look a the header of the index HTML file, it should be like that :

<html lang="en"> <head>
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Automate-IT Adobe Panel</title>

<script type="text/javascript">window.module = undefined</script>

<script src="./js/CSInterface.js"></script> <script src="./js/Vulcan.js"></script> ...

That's it ! You can now source and use the last JQuery release in your panel.

It's not so hard to setup, but when you don't know this simple trick, you lost a LOT of time. :)