【CEP 扩展开发一】简介

写作目的

Adobe 毫无疑问是设计软件行业的垄断级巨头，旗下的 PS，AE 等都是搞设计和自媒体的必装软件。有很多小公司的产品其实本质上是依赖这些设计软件生存的，例如开发 AE 特效插件的公司，例如使用 PS 开发海报模板的我司。

其实 CEP 扩展的开发生态是相当的恶劣，中文资料不能说少，简直可以说是没有，质量不错的一只手可以数得过来。国外的资料相对多一点，但还是很少，主要还是以论坛，github 仓库, stackoverflow 提问的形式散落在各处，大多数文章的内容也很浅。

笔者将近一年时间的主要工作就是为 AE 和 PS 开发 CEP 扩展，各上线了一个扩展。踩过很多坑，也有很多的技术沉淀。我写这一系列教程的主要目的在于：

1. 思考总结，知识沉淀
2. 帮助新人快速入门，减少踩坑
3. 优化 CEP 扩展开发的生态环境，教你怎么最大限度的使用现代化的前端技术开发 CEP 扩展

Adobe 插件种类

大致可以分成以下几类：

• ExtendScript 脚本

• 面板插件

  • Flash 面板插件
  • CEP 面板插件
  • UXP 面板插件

• 独立客户端

• C++ 插件

ExtendScript 脚本

ExtendScript 是 ECMAScript3 的一种方言，和 JavaScript 基本上语法一样，不过集成了一些例如指令，模块化，反射系统，三引号字符串，操作符重载等语法特性。文件后缀名是 .jsx（不是 react 用的那个 JS 的 DSL），所以 ExtendScript 又被称为 jsx。由宿主（例如 PS, AE, PR 等设计软件自身都叫宿主）实现的 ExtendScript 引擎解释执行，不同宿主都能解释执行 jsx，但是底层实现以及注入的宿主特有的 API 不一样。

通过以下 jsx 代码查看 jsx 的引擎信息：

$.about(); 

其实如果你不调用宿主特有的 API 或者针对不同的宿主做了兼容，那么 JSX 脚本就是兼容所有 adobe 设计软件的。既可以跑在 PS 上也能跑在 AE, InDesign 上，只要你跑的那个平台实现了 JSX 引擎（貌似绝大多数都实现了）。

ExtendScript 可以调用宿主的各种 API，例如在 AE 中可以访问图层信息，调用渲染队列输出媒体资源，也有原生能力例如读写文件，还可以使用内置的各种窗口和控件接口去创建图形界面。因此它完全可以作为一种插件形式去实现独立的功能。

不带界面的例如可能很多人用过的这个用来优化 PSD 体积的 jsx 脚本：一键压缩 PSD 文件从 GB 变为 MB

再例如 github 上 1.2k star 的一个将 psd 图层导出为文件的工具：Photoshop-Export-Layers-to-Files-Fast，这个工具使用 jsx 搞了个的对话框。

其实 adobe 软件支持的脚本语言并不只有 ExtendScript，例如在 PS 其实是支持：Apple Script, VBScript 和 ExtendScript，具体可以查看软件对应的文档：Photoshop Scripting。

优缺点

优点：

• 方便分享，本质上就是一个或多个 .jsx 后缀的文本文件，多个 jsx 文件可以使用 jsxbin 打包成单个二进制文件。用户可以直接通过菜单直接加载执行
• 界面风格非常贴近宿主界面：ScriptUI 是对 JSX 内置的图形界面框架的统称，例如上面那个导出 psd 图层为文件的工具的界面，可以看出使用 ScriptUI 构建的界面风格非常贴近宿主的原生界面风格
• 方便复用：CEP 插件涉及到对宿主的访问都需要调用 JSX 脚本，这样的话，你用 JSX 脚本使用的功能其实很容易复用到 CEP 插件中。比如你在开发 CEP 扩展的某个功能的时候你就可以直接去把别人实现好的 JSX 代码直接拷过来调用

缺点：

• 构建界面不够灵活：ScriptUI 只能使用内置组件构建界面，如果涉及到画图表或者更复杂的界面就不行了，不像 CEP 扩展是完全使用前端技术构建界面
• 网络请求不方便：ScriptUI 网络请求非常底层，需要用 socket 对象请求，不像 CEP 扩展可以使用浏览器环境的 xhr 和 nodejs 的 httpClient
• 不支持异步：jsx 环境没有定时器，文件操作也没有异步形式。AE 环境倒还是定时器接口让代码异步执行，PS 环境那是彻底的木有办法异步执行代码。相对而言，CEP 可以使用 nodejs 来进行异步 IO 操作，甚至还可以使用子进程，web worker 来执行重计算任务防止阻塞界面渲染。

面板插件

所谓面板插件，指的是界面是面板形式的插件，例如用于导出 lottie 动画数据的 bodymovin。由于是界面是面板的形式，因此它们可以悬浮显示，也可以内嵌到 worksapce 布局中。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fgU15bwf-1652254058