Misunderstanding csInterface for Adobe CEP extensions – Blancer.com Tutorials and projects

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: https://github.com/Wi-ll-iam/hvhelper/tree/master