Reload CEP panel extension and its ExtendScript without restarting Illustrator?

Explorer ,
Jan 08, 2020 Jan 08, 2020

Copy link to clipboard

Copied

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?

TOPICS
Scripting

Views

2.9K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Explorer , Jan 17, 2020 Jan 17, 2020
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...

Likes

Translate

Translate
Enthusiast ,
Jan 08, 2020 Jan 08, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 09, 2020 Jan 09, 2020

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Jan 09, 2020 Jan 09, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 17, 2020 Jan 17, 2020

Copy link to clipboard

Copied

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.

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 04, 2022 Mar 04, 2022

Copy link to clipboard

Copied

first, thank you for all these information

I am a motion graphics artist who realised how powerful scripting is

I am doing fine in scripting but still struggling to create extensions 

unfortunately looks like I am missing something

-I commented the script in the manifest

-loaded the jsx.js in html

-loaded the jsx in the main js

still if I change anything (HTML or Javascript) both do not update till I close the app and relaunch it

I am using vscode + extendscript debugger extension

 

you also said 

"refresh the page from the remote debugger in chrome."

I know this looks stupid but can you demonstrate how to do that 😄

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 04, 2022 Mar 04, 2022

Copy link to clipboard

Copied

So basically, you need a way to examine and refresh the panel (which is essentially just a web page in terms of the frontend). The way to do this is to set up something called 'remote debugging'. It's using Google Chrome to remotely see the panel's HTML and JS running. Check this out for more info:

 

https://github.com/Adobe-CEP/CEP-Resources/blob/master/CEP_9.x/Documentation/CEP%209.0%20HTML%20Exte...

 

In short, you need to specify a port to use for remote debugging, and then open up http://localhost:YOUR-SPECIFIED-PORT-NUMBER/ in chrome.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 04, 2022 Mar 04, 2022

Copy link to clipboard

Copied

Thank yoooooooooooooou

Finally it works 😍

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 09, 2022 Mar 09, 2022

Copy link to clipboard

Copied

LATEST

Hi boguslavsky

after commenting the main.jsx from manifest.xml it disconnected the main script from the extension

I tried adding this code in the main.js but didn't reconnect it again 

 

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

 

my html

 

<script src="js/main.js"></script>
<script src="js/libs/JSX.js"></script>
<script src="lib/CSInterface.js"></script>

 

also looks like the jsx.js disabled csinterface.js can I use both?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines