插件启用
快速熟悉 AE 插件代码的业务流程，可以通过这个项目 https://github.com/hujiao24/cep-hello-world 加深理解，下载后将其放置在 AE 的插件目录下
AE 插件目录地址为 C:\Program Files (x86)\Common Files\Adobe\CEP\extensions
由于该项目是 PS 插件的逻辑，需要修改 CSXS\manifest.xml 文件的 HostList 配置如下，其中 AEFT 表示 AE 的插件
<HostList>
<Host Name="AEFT" Version="[13.6,25.9]" />
</HostList>
修改配置后再启动 AE ，在 “窗口” -> “扩展” 菜单下显示有一个 “Hello World” 菜单项，这个菜单名称是在 manifest.xml 文件中的 Menu 项中指定的
在该配置文件还有一个 MainPath 和 ScriptPath 配置，指示了界面的入口点以及脚本，点击菜单显示界面如下
插件的功能是显示当前选中图层的名称，新建合成并添加图层后，再点击刷新也还是没有显示图层名称，这里需要调试看下是什么情况
在进行调试之前，需要先了解插件的代码结构 ，分为几个部分
1、前端的代码，也就是插件窗口的显示这些
2、桥接 evalScript，将 jsx 代码发送给 AE JSX 引擎
3、AE JSX 引擎执行 jsx 代码
所以这里需要两套调试配置，一套调试前端的代码，一套调试 JSX 的代码，从目录结构也可以看出，web目录的是前端代码，JSX目录是 AE 引擎执行的代码
前端调试
插件的根目录下，有一个 .debug 文件，指示了插件运行的时候，开启一个调试端口，但是没有 AE 的配置，修改配置为如下
<ExtensionList>
<Extension Id="org.ytj.helloWorld.panel">
<HostList>
<Host Name="AEFT" Port="9999" />
</HostList>
</Extension>
</ExtensionList>
重启 AE 后，打开插件窗口，然后在 chrome 浏览器的地址栏输入 http://localhost:9999/ 回车，显示如下图
点击 CEP Hello World 可以显示插件的窗口如下，这里的前端代码可以在 chrome 的开发者工具中进行调试，和传统的 web 开发没什么区别
JSX调试
调试 JSX 代码需要在 vscode 中安装 ExtendScript Debugger 插件，这个插件是 Adobe 开发的，然后在项目的根目录下增加配置 .vscode/launch.json，内容如下
{
"version": "0.2.0",
"configurations": [
{
"type": "extendscript-debug",
"request": "attach",
"name": "连接到 AE 调试",
"hostAppSpecifier": "aftereffects-18.0"
}
]
}
然后点击 “连接到 AE 调试” 按钮，接着回到 AE 插件的界面上操作，点击刷新
前端代码通过 evalScript 调用 JSX 的 api.getCurrentLayerName 代码，调试结果显示没有一个 app.documents 对象，这个是属于 PS 的对象
修改 getCurrentLayerName 方法的实现如下
function getCurrentLayerName() {
try {
// AE 中使用 app.project.activeItem 获取当前活动的合成 (Composition)
var activeComp = app.project.activeItem;
// 检查是否有打开的项目以及活动项是否为合成
if (!activeComp || !(activeComp instanceof CompItem)) {
return "No Active Composition";
}
// AE 中获取选中的图层使用 selectedLayers 数组
var selectedLayers = activeComp.selectedLayers;
if (selectedLayers.length > 0) {
// 返回第一个选中图层的名称
return selectedLayers[0].name;
} else {
return "No Layer Selected";
}
} catch (e) {
return "Error: " + e.toString();
}
}
重新启动 AE ，然后在插件的界面上就能正常显示图层的名称了
