Skip to main content
sberic
sberic
Legend
October 24, 2016
Answered

ExtendScript Toolkit and Premiere Pro?

  • October 24, 2016
  • 1 reply
  • 5525 views

I'm just starting to dive into Premiere Pro extension development and I'm finding it difficult to get a firm grasp on the environment. I get that there are two DOMs to deal with Application/ExtendScript (jsx) and HTML (js). Cool. However, I'm having a tough time figuring out how to really examine the environment. I've configured my environment to debug HTML DOM stuff that I try but I'm not quite sure how to debug the Application/ExtendScript stuff.

Any pointers?

This topic has been closed for replies.
Correct answer Thomas_Szabo

The Extendscript Toolkit (ESTK) app (JavaScript development toolkit | Download Adobe ExtendScript Toolkit CC ) is your only choice to debug ExtendScript.

Getting Started:

Download the app, open Premiere Pro and ESTK. In ESTK you´ll find several different panels. Find the Javascript console and type sth. in like app.project.activeSequence.name. The result will most likely be undefined. This is because you have to connect ESTK with PPro. Therefore find the Source editor panel (the one with the play, pause, stop buttons) and in the top left corner open the app selector dropdown and select Premiere Pro. Now enter app.project.activeSequence.name into the Javascript console again. Now it should give you the current active sequence´s name (assuming you have a sequence open in PPro).

In the Source Editor panel you can write your Extendscript code and execute it by pressing the play button. This will inject your script (with all it´s variables and functions) into the PPro Extendscript environment. You can even set breakpoints next to the line number and debug your code when it´s executed.

Later, when you have written a jsx file for your panel, you can load, inject (execute) and debug it in ESTK. Since breakpoints do not always work as expected, I tend to use $.writeln(""); which is similar to Javascript´s console.log().

For new panel devs, I´ve setup a very simplistic panel in order to get started. This might help to better understand the minimum requirements and how everything works together:

GitHub - ThomasSzabo/Minimalistic-Adobe-Premiere-Pro-Panel: This Premiere extension is a minimum in order to run a Panel…

You´ll soon notice that there´s no documentation available that goes into detail about all ESTK APIs for PPro. Adobe chose a different approach: documenting by providing practical examples. Therefore I highly recommend the Adobe´s PPro Sample Panel:

Samples/PProPanel at master · Adobe-CEP/Samples · GitHub

If you haven´t already, you definitely want to make this your #1 resource:

GitHub - Adobe-CEP/CEP-Resources: Getting Started with Adobe CC 2014 Extension SDK

I hope this helps,

Thomas

1 reply

Thomas_Szabo
Thomas_SzaboCorrect answer
Inspiring
October 25, 2016

The Extendscript Toolkit (ESTK) app (JavaScript development toolkit | Download Adobe ExtendScript Toolkit CC ) is your only choice to debug ExtendScript.

Getting Started:

Download the app, open Premiere Pro and ESTK. In ESTK you´ll find several different panels. Find the Javascript console and type sth. in like app.project.activeSequence.name. The result will most likely be undefined. This is because you have to connect ESTK with PPro. Therefore find the Source editor panel (the one with the play, pause, stop buttons) and in the top left corner open the app selector dropdown and select Premiere Pro. Now enter app.project.activeSequence.name into the Javascript console again. Now it should give you the current active sequence´s name (assuming you have a sequence open in PPro).

In the Source Editor panel you can write your Extendscript code and execute it by pressing the play button. This will inject your script (with all it´s variables and functions) into the PPro Extendscript environment. You can even set breakpoints next to the line number and debug your code when it´s executed.

Later, when you have written a jsx file for your panel, you can load, inject (execute) and debug it in ESTK. Since breakpoints do not always work as expected, I tend to use $.writeln(""); which is similar to Javascript´s console.log().

For new panel devs, I´ve setup a very simplistic panel in order to get started. This might help to better understand the minimum requirements and how everything works together:

GitHub - ThomasSzabo/Minimalistic-Adobe-Premiere-Pro-Panel: This Premiere extension is a minimum in order to run a Panel…

You´ll soon notice that there´s no documentation available that goes into detail about all ESTK APIs for PPro. Adobe chose a different approach: documenting by providing practical examples. Therefore I highly recommend the Adobe´s PPro Sample Panel:

Samples/PProPanel at master · Adobe-CEP/Samples · GitHub

If you haven´t already, you definitely want to make this your #1 resource:

GitHub - Adobe-CEP/CEP-Resources: Getting Started with Adobe CC 2014 Extension SDK

I hope this helps,

Thomas

sberic
sbericAuthor
Legend
October 25, 2016

Thanks for the writeup, Thomas. It's quite thorough.

Thomas_Szabo wrote:

In the Source Editor panel you can write your Extendscript code and execute it by pressing the play button. This will inject your script (with all it´s variables and functions) into the PPro Extendscript environment. You can even set breakpoints next to the line number and debug your code when it´s executed.

Later, when you have written a jsx file for your panel, you can load, inject (execute) and debug it in ESTK. Since breakpoints do not always work as expected, I tend to use $.writeln(""); which is similar to Javascript´s console.log().

This was the part I was specifically looking for. It took some time to figure out that you need to specify JSX scripts themselves in the manifest file and not just a script root dir. And even then you can't simply refresh the HTML page in order to get the ExtendScript [re]loaded, you have to re-open the panel (which is a pain because it breaks the debug session you establish in Chrome...).

Either way, it looks like I should be able to get something going with this. Thanks!

With respect to API documentation...

Thomas_Szabo wrote:

You´ll soon notice that there´s no documentation available that goes into detail about all ESTK APIs for PPro. Adobe chose a different approach: documenting by providing practical examples. Therefore I highly recommend the Adobe´s PPro Sample Panel:

Samples/PProPanel at master · Adobe-CEP/Samples · GitHub

I did come across this API_Doc that has at least a little explanation about what exists in the Premiere APIs. Not quite as nice as a jsdoc commented TypeScript typing file (we can dream, right?) but better than nothing!

Thanks again for the help!

Editorial:

Speaking from the vantage point of a new user, Adobe's plugin ecosystem is a giant mess. There's very little documentation about what tech should and shouldn't work with which applications. Stuff that looks and sounds promising in, say, the ESTK documentation simply doesn't work in Premiere. Trying to figure out which version of the CEP Resources to use with which application (and which version of said application) isn't super clear (CC 2015.1 versus CC 2015.X?). Flash extensions, HTML extensions, ScriptUI versus Panels... I get that everyone is pointing to HTML extensions for Premiere Pro, but it's all too easy to read over the common ESTK documentation (or outdated documentation, for that matter) and find yourself deep inside a useless rabbit hole.

ESTK appears to have been [partially?] written using JSX (check out the contents of the application bundle in macOS, at least. Is the ESTK actively updated? It doesn't appear to have retina support which doesn't bode well in my experience :/

Thomas_Szabo
Thomas_Szabo
Inspiring
October 25, 2016

And even then you can't simply refresh the HTML page in order to get the ExtendScript [re]loaded, you have to re-open the panel

If you load your jsx file in ESTK, modify & save it, you can then click the play button in the Source Editor in order to re-inject the script. The changes will be instantly available without even refreshing the panel in PPro. This should save you some time and pain.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices