这篇文章发布在个人博客 https://blog.cutterman.cn/,推荐去官网查看。
前言
原计划这篇文章要写开发工具和调试环境的,但是后来发现如果不先介绍CEP面板的基本结构的话,会对调试环境的配置的理解有障碍,于是本篇文章介绍一下CEP插件的基本分层结构和文件目录结构。
分层结构
CEP的全称是Common Extensibility Platform,是Adobe在CC2014版本一起推出的扩展开发平台,在CC2014及以前,相对应的面板插件开发,是基于Flash开发平台,后来随着web的发展以及flash的逐渐没落,adobe随记放弃了使用flash来开发插件,拥抱web开发模式,CEP的插件开发,即全部采用的web开发技术。
Adobe通过在Photoshop中嵌入了一个浏览器框架CEF(Chromium Embeded Framework),使得我们可以通过像开发网页一样来开发插件面板,用到的技术和网页开发的技术基本是一致的,也即是
HTML + CSS + JAVASCRIPT
面板负责呈现基本的内容和交互提供给用户,实际控制PS则依然用的宿主自身提供的脚本引擎,也即是Extension Script,分层结构图如下
运行时
需要注意的一个地方是,Extension Script是运行在Ps的脚本引擎下的,它是EcmaScript的一个子集,它实现的是EcmaScript 3的标准,而运行在CEF下的Javascript是通过Google V8引擎来驱动的,它实现的是EcmaScript 5标准,两者是有一些差异的,最简单的理解,就是JSX里头包含的js特性要更少一些,比如不支持箭头函数,Array 对象没有 indexOf 方法等等,在实际开发的时候,不要想当然、随心所欲的写……
另外,PS在嵌入CEF的时候,同时在浏览器环境下嵌入了Node运行环境,于是你可以在开发网页的时候,使用nodejs的一些功能,比如你可以在面板中通过nodejs访问本地文件等等,在后续文章中专门来做介绍。
JSX中,脚本引擎也提供了本地路径访问的能力(File/Folder对象),这个也在后续的文章中介绍。
通信方式
由于面板和JSX是运行在不同的脚本环境下的,这就需要他们之间有一个通信的渠道,这样才能通过CEF中的JS来控制JSX,进而操作PS
CEF -> JS -> JSX -> Photoshop
JS -> JSX
为了能够让运行在浏览器中的JS,可以访问JSX脚本,adobe提供了一个基础库来实现