4 Replies Latest reply on Oct 25, 2016 8:59 AM by sberic

    ExtendScript Toolkit and Premiere Pro?

    sberic Level 2

      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?

        • 1. Re: ExtendScript Toolkit and Premiere Pro?
          Thomas_Szabo Level 3

          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

          • 2. Re: ExtendScript Toolkit and Premiere Pro?
            sberic Level 2

            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 :/

            • 3. Re: ExtendScript Toolkit and Premiere Pro?
              Thomas_Szabo Level 3

              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.

              1 person found this helpful
              • 4. Re: ExtendScript Toolkit and Premiere Pro?
                sberic Level 2

                Thomas_Szabo wrote:

                 

                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.

                Right. That was my understanding based on what you had said. I prefer to write in VSCode where I can access helpful stuff like TypeScript and compare what I'm writing in standard JavaScript to the ExtendScript code. As I understand it I could simply open the same file in ExtendScript and re-inject it.

                 

                The remaining question is whether or not this is re-injection, or dead-simple injection that simply overwrites previous definitions. Given the JavaScript base, I suspect the latter: that if I remove a function definition from the JSX file and re-inject with ESTK, that the environment will still have the deleted function defined (until the panel is reloaded [if not until the application is restarted])...

                 

                Either way, the method you outlined will definitely save some time and pain...