Skip to main content
B
boguslavsky
Inspiring
January 9, 2020
Answered

Reload CEP panel extension and its ExtendScript without restarting Illustrator?

  • January 9, 2020
  • 1 reply
  • 7554 views

During CEP extension development, what is the best way to reload the extension (including reloading the .jsx file with it)?

 

I'm using chrome for remote debugging the html and javascript of the extension, and am using the ExtendScript Debugger for Visual Studio Code to test the .jsx script in bits and pieces in Illustrator.

 

Having to reload Illustrator every time I want to test the code bridging my JS and JSX code is getting to be a pain. There seems to be multiple hacks for getting around this including third party libraries, writing a helper extension, and some other ideas I've seen floating around. Does anyone have the definitive method for how best to entirely restart and reload a CEP extension?

This topic has been closed for replies.
Correct answer boguslavsky

Depends on what "already loaded" means. If that means via this function having been called previously then yes, but I can't say if it works for manifest.xml. If you launch scripts like this at the panel's launch, then a simple location.reload() will work. If you have a button that loads the same script and keep pressing it, it may not refresh -- I've never tried


For some reason, I couldn't get the code you provided to work. I must have made some mistake implementing it. I ended up using JSX.js (https://creative-scripts.com/jsx-js/) instead.

 

Implementing it was pretty simple.

 

1. Remove or comment out the script path from manifest.xml

<!-- <ScriptPath>./host/main.jsx</ScriptPath> -->

2. Load JSX.js in your html file.

<script type="text/javascript" src="../lib/JSX.js"></script>

3. And then load the ExtendScript in your javascript file using jsx.file().

jsx.file('./host/main.jsx', callbackFunction);

 

Now all I need to do to reload everything (including extend scripts) is just refresh the page from the remote debugger in chrome.

 

1 reply

Inventsable
Inventsable
Legend
January 9, 2020

Hi, I handle this by:

  1. Always including context and flyout menus which have "Refresh Panel" as an option
  2. Never using manifest.xml's <ScriptPath> parameter and evaluating all scripts within Javascript at the panel's launch/mount

 

This allows me to have both hot reloading for any clientside changes in JS/CSS/HTML, then during any scripting edits I can just right click my panel and refresh to get updated results. A sample function to load any script into your panel, noting that it auto-executes the script in doing so (but you're free to call any function through an evalScript call later):

 

    // relativePath (STRING) - Path to script file in the form './script/myscript.jsx'
    function loadScript(relativePath) {
      // 
      // Retrieve the panel's current absolute location in file system
      let root = decodeURI(
        window.__adobe_cep__.getSystemPath("extension")
      ).replace(/file\:\/{1,}/, "");
      //
      // Remove the relative prefix and concatenate relative and absolute positions
      let fullpath = `${root}${relativePath.replace(/^\./, "")}`;
      // 
      // Use $.evalFile within an evalScript call to load the script into memory
      window.__adobe_cep__.evalScript(`$.evalFile('${fullpath}')`);
    }

 

Note that I'm intentionally sidestepping CSInterface (which you can replace window.__adobe_cep__ with) to avoid conflicts with your own files or the need for CSInterface to begin with. When you use the above to load scripts into memory at your panel's launch, you're free to have any number of scripts and a full reload of the extension along with scripts becomes as simple as:

 

location.reload()

 

If you happen to use Vue, here's my personal menus component which handles both Flyout and Context menus and allows for both to be flexible, reactive, and in a JSON structure (rather than XML for flyout menus). It always comes with a "Refresh Panel" and "Launch Debug" option (without knowing the .debug localhost port or the app) but does require one of my utility libraries, CEP-Spy, which isn't Vue-specific and you're free to use or snag code from it.

    B
    boguslavskyAuthor
    Inspiring
    January 9, 2020

    Thanks for this code, it's very useful. So if I load a script using this function and a script with that same filename is already loaded by the panel, it will basically just refresh that script, and run it?

    Inventsable
    Inventsable
    Legend
    January 9, 2020

    Depends on what "already loaded" means. If that means via this function having been called previously then yes, but I can't say if it works for manifest.xml. If you launch scripts like this at the panel's launch, then a simple location.reload() will work. If you have a button that loads the same script and keep pressing it, it may not refresh -- I've never tried

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