CEP
全称 Common Extensibility Platform，即通用可扩展性平台，使用HTML+CSS 、Node.js、 JavaScript(ECMAScript 5)和ExtendScrip(ECMAScript 3)来开发CEP扩展。CEP扩展使用宿主的CEP HTML engine引擎来渲染页面和调用api，而该引擎基于CEF version3。
下面展示一部分CEP版本内容：
| Application | After Effects | Photoshop | Premiere Pro | Illustrator |
|---|---|---|---|---|
| Host ID | AEFT | PHSP/PHXS | PPRO | ILST |
| CC 2017 | 14 (CEP 6) | 18 (CEP 7) | 11 (CEP 6) | 21 (CEP 7) |
| CC 2018 | 15 (CEP 8) | 19 (CEP 8) | 12 (CEP 8) | 22 (CEP 8) |
| CC 2019 | 16 (CEP 9) | 20 (CEP 9) | 13 (CEP 9) | 23 (CEP 9) |
| CC 2020 | 17 (CEP 9) | 21 (CEP 9) | 14 (CEP 9) | 24 (CEP 9) |
| FY2020/FY2021 | 17.1.4 (CEP 10) | 22.0 (CEP 10) | 14.4 (CEP 10) | 25.0 (CEP 10) |
CEF
全称 Chromium Embedded Framework，基于 Chromium 开源浏览器，是用于嵌入其他应用程序的简单框架。下面展示一部分CEF版本内容：
| Component | CEF 3 | Chromium | Node.js | CEF/Node integration | v8 |
|---|---|---|---|---|---|
| CEP 6.1 and CEP 7.0 | CEF 3 release branch 2272 | 41.0.2272.104 | IO.js 1.2.0 | Node-WebKit 0.12.1 (nw.js) | – |
| CEP 8.0 | CEF 3 release branch 2987 | 57.0.2987.74 | Node.js 7.7.4 | Node-Webkit 0.21.5 | – |
| CEP 9.0 | CEF 3 release branch 3163 | 61.0.3163.91 | Node.js 8.6.0 | Node-Webkit 0.25 | 6.3.292.49 |
| CEP 10.0 | CEF 3 release branch 3729 | 74.0.3729.157 | Node.js 12.3.1 | Node-Webkit 0.38 | 7.4.288 |
| CEP 11.1 | CEF 3 release branch – (88) | 88 | Node.js 15.9.0 | Node-Webkit 0.50.1 | 8.7 |
下载
Adobe-CEP/CEP-Resources(GitHub) ，官方提供了CEP扩展手册(Extension Cookbook)、CEF便携压缩包、ExtendScript-Toolkit安装包和ZXPSignCMD签名工具。cef可以解压到任意位置，客户端是cefclient.exe，界面还是蛮简陋的。 另外还有CEF的 官方源代码 和 官方编译版，不过个人不推荐用官方版本，这是因为官方版本没有 cef_extensions.pak 这个文件，而且我用官方的cef进入调试页面一片空白。因此建议使用Adobe分发的CEF，可以去GitHub下载CEP对应版本的CEF文件。如果下载龟速，可以用油猴脚本来加速，脚本链接：Github 增强 – 高速下载。 #
– – – – – –
调试
准备
可以在这几个目录下选择一个来创建新扩展的工作目录： > C:\Program Files\Common Files\Adobe\CEP\extensions C:\Program Files (x86)\Common Files\Adobe\CEP\extensions C:\Users\<用户名>\AppData\Roaming\Adobe\CEP\extensions
至于相关教程这里我推荐不知语冰和其他人的，我这边只讲调试，如何使用cef来调试宿主程序启动的cep扩展。说实话刚开始真的是一点头绪都没有，官方文档和网上教程基本一字带过，而且搜索了好几天谷歌，关于调试的详细内容依然没找到，也不知道是不是太简单了因此别人懒得讲。幸好通过几天的试验熟悉了软件，加上网上的只言片语，成功知道了怎么调试。 另外需要注意，开启调试模式需要去修改注册表，具体可以看第二个hello world教程，里面有讲解。
- Adobe CEP 扩展开发教程 「 0 」
- Adobe CEP 扩展开发教程 「 1 」Hello World!
- Adobe CEP 扩展开发教程 「 2 」CEP 技术概览
- Adobe CEP 扩展开发教程 「 3 」API 的使用
- Adobe CEP 扩展开发教程 「 4 」签名与打包
- 使用JavaScript开发一个Photoshop插件
.debug
这边假装大家已经写好了CSXS目录下的 manifest.xml 文件，需要注意每次修改该文件都需要重启AE，至于html css js之类的文件关闭扩展再打开手动刷新就行了。Extension Id和html文件等内容也设置好了，可以进入debug阶段。首先在该扩展的根目录下创建 .debug 文件，可以用不知语冰的在CMD命令提示符输入 >.debug 回车的办法创建文件。 >
<?xml version=1.0 encoding=UTF-8?>
这是一个示例，其中Host Name的AEFT代表After Effects也就是AE，上面的CEP表格给出了宿主缩写，Adobe其他的全家桶缩写可以查看HTML Extension Cookbook。.debug的主要目的是给Extension Id绑定一个（多个）宿主和确定Port端口，需要注意端口取值范围在1024 和 65535之间（不包括 65535）。如果该Extension ID在manifest.xml里是Panel以及AutoVisible是true，那么就会显示在菜单栏的扩展列表里，打开该扩展会让localhost生效，这时只需在CEF的地址栏输入 localhost:端口号 就能进入调试状态 。
比如我输入 http://localhost:7707 然后回车，会弹出一个文字说明外加一个链接，Inspectable WebContents翻译过来就是“可检查的网页内容”，链接就是你在manifest.xml里指定的html文件(链接的文字就是html的title)。点开链接后会弹出一个alert，内容是 Console messages written to c:cefcefclient.exe（控制台消息写入c:cefcefclient.exe），点一下确认CEF的窗口就变成了Developer Tools(开发者工具)。
我这边推荐一个窗口置顶工具(月离离以前推荐的)——windowsTop.exe，如果要置顶管理员模式运行的软件，winTop也需要在管理员模式运行才能置顶。 如果localhost报错信息是“Page failed to load.(页面加载失败)”，说明某个环节有问题，先去检查manifest.xml和.debug，都没问题还加载不出来，可以试着把该扩展的工程文件夹移动到x86的cep目录下，我这个TUH3D扩展debug一直没反应后来就是这样解决的。
## DevTools
我这边找了深入理解 Chrome DevTools、谷歌 Chrome 和微软 EDGE 的DevTools教程，谷歌的全英文啃不动，微软的自带中文翻译，还是蛮友好的。其实我这边提出Chrome和Edge是因为，也能用Chromium系浏览器来调试，特别是Edge的DevTools还是中文的。 因为我只安装了Edge，所以用Edge来演示，请在浏览器地址栏输入以下内容然后回车； > chrome://inspect/#devices edge://inspect/#devices
成功进入该页面后请点击第二个选项Discover network targets 的 Configure 按钮
添加 localhost:7707（示例），具体端口请填写自己设定的数值，然后点Done
只要你在AE打开该扩展（如果.debug设置了对应端口的话），Edge就能嗅探到该端口，请点击新出现的Target的inspect，就能打开DevTools了。
我用CEF DevTools打开localhost，然后再用Edge的DevTools打开，发现第二个链接已经点击不了了，看起来一个localhost只能打开一个DevTools。我关闭CEF，Edge DevTools顺利开始调试，甚至我用CEF DevTools修改的内容还保留着。
后记
有一个大佬整理了《CEP开发配套软件集》资源，附带一个整理好的思维导图，还有一个人在搞CEP UI框架，都很强。另外想交流技术的可以来加群： > 群名：AE-一起学表达式和脚本 群号：885816198。
补充
比如使用CMD输入TASKLIST 来查看CEPHtmlEngine.exe的PID，然后用netstat限定PID来扫描CEPHtmlEngine.exe有哪些端口。 > TASKLIST /FI IMAGENAME eq CEPHtmlEngine.exe /NH /FO CSV netstat -aon|findstr 25712
不知道为啥我用127.0.0.1没反应，必须得localhost。虽然CEPHtmlEngine.exe的PID看着挺多，但是绝多数是无用的，一个一个试还是蛮蛋疼的。这里面 http://localhost:8000/ 最有意思，“Greetings from AEFT 16.1.3”，“来自 AEFT 16.1.3 的问候”。
或者用资源管理器来查看PID
但是这些步骤挺麻烦的，可以借助火绒剑
WindowsTop可以去月离网盘下载 pan.yuelili.com
我提取的火绒剑，需要几个sys文件才能正常使用，因此这边不提供文件，需要的去安装火绒。