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?
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
...
Copy link to clipboard
Copied
Hi, I handle this by:
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.
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?
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
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.
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 😄
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:
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.
Copy link to clipboard
Copied
Thank yoooooooooooooou
Finally it works 😍
Copy link to clipboard
Copied
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?