1. 概述

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扩展。说实话刚开始真的是一点头绪都没有,官方文档和网上教程基本一字带过,不讲。而且搜索了好几天谷歌,关于调试的详细内容依然没找到,也不知道是不是太简单了因此别人懒得讲。幸好通过几天的试验熟悉了软件,加上网上的只言片语,成功知道了怎么调试。

.debug

这边假装大家已经写好了CSXS目录下的 manifest.xml 文件,需要注意每次修改该文件都需要重启AE,至于html css js之类的文件关闭扩展再打开手动刷新就行了。Extension Id和html文件等内容也设置好了,可以进入debug阶段。首先在该扩展的根目录下创建 .debug 文件,可以用不知语冰的在CMD命令提示符输入 “”>.debug 回车的办法创建文件。

<?xml version=”1.0″ encoding=”UTF-8″?>
<ExtensionList>
  <Extension Id=”com.thu3d.x77.pw”>
    <HostList>
      <Host Name=”AEFT” Port=”7707″ />
    </HostList>
  </Extension>
</ExtensionList>

这是一个示例,其中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和我自己提取的火绒剑,上传百度网盘,转需

链接:https://pan.baidu.com/s/1dVRwvKa57cqJTWYk1y9Q9Q 提取码:4y8z

Leave a Reply

Your email address will not be published.

请下载到本地观看!因为pdf是用的阿里云盘预览,可能部分字体加载不了。

请安装油猴脚本,并下载月离的万事屋脚本

请在右上角三个点 - 下载管理 - 找到刚才的文件,选择允许下载。 或者换个浏览器
echo