I am trying to build a simple extnesion panel in premiere pro, it has a single button on it, when the button is clicked, it will run the contents of the file, p:myScript.jsx, whose content for now is:
alert('executing myScript content...')
While I have managed to solve a few issues such as getting the panel to be loaded, I simply have not managed to get the panels button to work. when I click the button, nothing happens.
My extension directory structure is:
├── CSXS\
│ └── manifest.xml
├── jsx\
│ └── runScript.jsx
├── lib\
│ └── CSInterface.js
└── index.html
The manifest.xml content is:
<?xml version="1.0" encoding="UTF-8"?>
<ExtensionManifest Version="5.0" ExtensionBundleId="com.adobe.PProPanel" ExtensionBundleVersion="11.1"
ExtensionBundleName="Premiere Pro sample panel"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<ExtensionList>
<Extension Id="com.adobe.PProPanel" Version="10.3.0" />
</ExtensionList>
<ExecutionEnvironment>
<HostList>
<Host Name="PPRO" Version="9.0" />
</HostList>
<LocaleList>
<Locale Code="All" />
</LocaleList>
<RequiredRuntimeList>
<RequiredRuntime Name="CSXS" Version="6.0" />
</RequiredRuntimeList>
</ExecutionEnvironment>
<DispatchInfoList>
<Extension Id="com.adobe.PProPanel">
<DispatchInfo >
<Resources>
<MainPath>./index.html</MainPath>
<ScriptPath>./PProPanel.jsx</ScriptPath>
<CEFCommandLine>
<Parameter>--allow-file-access</Parameter>
<Parameter>--allow-file-access-from-files</Parameter>
<Parameter>--allow-running-insecure-content</Parameter>
</CEFCommandLine>
</Resources>
<Lifecycle>
<AutoVisible>true</AutoVisible>
<!-- <StartOn> -->
<!-- Premiere Pro dispatches this event whenever it gains focus from the OS -->
<!-- <Event>com.adobe.csxs.events.ApplicationActivate</Event> -->
<!-- </StartOn> -->
</Lifecycle>
<UI>
<Type>Panel</Type>
<Menu>PProPanel (SDK sample panel)</Menu>
<Geometry>
<Size>
<Height>300</Height>
<Width>180</Width>
</Size>
</Geometry>
</UI>
</DispatchInfo>
</Extension>
</DispatchInfoList>
</ExtensionManifest>
runScript.jsx
function runExternalScript() {
var scriptPath = "p:myScript.jsx";
var scriptFile = new File(scriptPath);
$.evalFile(scriptFile); // Execute the script
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Run JSX</title>
<script src="../lib/CSInterface.js"></script>
<style>
body {
margin: 0;
padding: 10px;
background: #2D2D2D;
}
#runScriptBtn {
width: 100%;
height: 40px;
background: #444;
color: white;
border: none;
cursor: pointer;
}
#runScriptBtn:hover {
background: #555;
}
</style>
</head>
<body>
<button id="runScriptBtn">Run myScript.jsx</button>
<script>
const csInterface = new CSInterface();
document.getElementById("runScriptBtn").addEventListener("click", () => {
// Execute the JSX function
csInterface.evalScript("runExternalScript()", (result) => {
if (result) alert(result); // Show result in alert (since ESTK is deprecated)
});
});
</script>
</body>
</html>
and csvInterface.jsx, which I got from Premiere Pro Panel.
My extension is actually based on the above "Premiere Pro Panel" sample project, but the project is very complicated and this is my best attempt to follow it.
I would love to know why my myScript.jsx file is not executing when I click on the panels only button, I would appreciate any correction or advice towards the right direction.
Am on windows, and on latest Premiere Pro
