Misunderstanding csInterface for CEP extensions

Report · Dec 02, 2021

I'm trying to write a basic After Effects extension and, while the extension is recognized and the html displays, I can't seem to use csInterface to access anything in ae. I'm just trying to get an alert message to display for right now. I'm sure I'm missing something obvious, please help.

index.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Help Video Helper</title>
        <meta name="description" content="AE extension adding various functions for creating help videos">
        <link rel="stylesheet" href="./css/styles.css">
        <script type="text/javascript" src="./js/main.js"></script>
        <script type="text/javascript" src="./lib/CSInterface.js"></script>
    </head>
    <body>     
        <div class="container">
            <div class="control-div">
                <p class="control-label">Keyframe Hotkey</p>
                <input class="control-input" id="hotkey-keyframe-input" value="2" /></div>
            </div>
            <div class="control-div">
                <p class="control-label">Skip Forward Hotkey</p>
                <input class="control-input" id="hotkey-skip-input" value="2" /></div>
            </div>
            <button class="control-button" id="testButton">Test</button>
        </div>  
    </body>
</html>

main.js:

var csInterface = new CSInterface();

var testButton = document.getElementById('testButton');
testButton.addEventListener('click', test);

function test() {
    csInterface.evalScript("alert('hello world')");
};

Here's the whole repo if anyone is interested: (link removed by moderator)

Report · Jul 05, 2023

Try placing the code in a jsx file and the call the method of that JSX file from the evalScript method. Something like the following

ext.jsx
function showAlert(){
  alert("Hello")
}

function test() {
    csInterface.evalScript("showAlert()");
}

Make sure you have the jsx file entry added in the manifest file.

-Manan