使用JavaScript开发一个Photoshop插件

作为前端开发者，我们可以利用Web技术在非常多的环境下开发应用，为相关的用户提供服务。其中，以Photoshop为首的Adobe系列工具是我们时长要去面对的一个平台级应用。Photoshop在图像处理上有着很强大的功能，用户量也非常可观，而且其功能在前端开发的一些情况下也用得到，因此笔者认为Photoshop相关的Web技术具有很不错的价值。

本文将引导大家使用JavaScript开发一个Photoshop插件。

CEP：通用扩展平台

Adobe作为一家历史悠久的软件公司，已经给开发者提供了相对成熟的扩展开发技术栈，被称作CEP——Common Extensibility Platform（通用扩展平台）。

CEP扩展基于Web技术，可以在Adobe Photoshop、Adobe Illustrator、Adobe InDesign等全系列应用中运行，并且可以访问这些应用和外部操作系统环境的API。

CEP应用的结构可以被分为五个抽象层级：

1. 用户层，用户所得到的、构建出来的应用外部；

2. 宿主应用层，我们的CEP扩展在宿主应用中被配置好后，会在嵌入的CEF（一个开源的、嵌入基于Chromium内核浏览器的简单框架）中成功渲染；

3. UI层，就是基于HTML文件构建的WEB页面；

4. Javascript层，运行在UI层页面上的JavaScript脚本，比起一般Web应用的环境里内置了更多的功能——可以访问Extendscript层与一些宿主应用原生功能的API以及本机中Nodejs的API；

5. Extendscript层，运行在宿主应用内部的脚本，具有访问宿主应用的内部API的能力，可以和JavaScript层之间通信；

所谓宿主应用，就是我们CEP扩展运行在的Adobe程序，例如Adobe Photoshop等，同时后文我们也默认CEP的宿主程序是Adobe Photoshop

ExtendScript

作为一个类Web应用，上面四层相对前端开发者来说都比较好理解，这一节我们来看下ExtendScript层：

ExtendScript脚本可以用三套不同语言去编写，分别为JavaScript、VBScript和AppleScript。三种语言功能上没有任何区别。鉴于本文面向的是各位前端工程师，我们果断选择前者，同时文章的后文我们也是默认选择JavaScript版本的ExtendScript。

ExtendScript有以下特点：

• 区别于 CEP 扩展中后缀为.js的 JavaScript 文件，操作ExtendScript 的JavaScript文件后缀名为.jsx

这里的.jsx文件和react用到的.jsx文件完全不同，如果你在自己的CEP应用中引入了react，记得把它们分开以避免混淆

• ExtendScript在全局下内置了用来获取和操作Adobe应用和文件内容的各种API

• Adobe应用中，ExtendScript脚本和CEP中的JavaScript脚本运行于两个不同的引擎，如果我们选择JavaScript语言接口的ExtendScript脚本，对应的引擎仅仅兼容至 ECMAScript3的标准

了解了Extendscript之后，我们再来看一下CEP扩展各层级之间的横向关系：

• CEP扩展中的JavaScript代码会在CEP JavaScript VM 中运行，比起一般的Web应用，增加了调用Node.js的API与操作系统交互，以及通过引入 CSInterface.js^[3] 调用ExtendScript的功能

• 宿主程序中，作为ExtendScript的JavaScript代码会在另一个环境下——Host JavaScript VM中被解析

• 在这一个类Web应用中包含两个脚本环境，两个环境虽然都是JavaScript，而且可以通过传递字符串相互通信，但是是其上下文是相互隔离的，一定要区分开来
  

关于Photoshop中，ExtendScript具体可以调用的API，我们可以直接看Adobe的官方手册：ADOBE PHOTOSHOP SCRIPTING^[1]

项目构建

在动手开发前，我们先把运行CEP扩展的各种要素准备齐全。

首先我们来看下CEP扩展需要的目录结构：