Adobe CEP插件面板结构

最新推荐文章于 2024-05-13 09:56:04 发布

原创

最新推荐文章于 2024-05-13 09:56:04 发布 · 1.4k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #node.js #html5

本文介绍了Adobe CEP插件的分层结构，使用的技术包括HTML、CSS和JavaScript。CEP基于Chromium Embedded Framework，允许开发者以网页开发方式创建插件。文中讲解了CEP与JavaScript之间的通信，包括JS到JSX和JSX到JS的交互，强调了版本兼容性和事件派发的重要性。此外，还讨论了面板的目录结构和manifest.xml文件的配置细节。

这篇文章发布在个人博客 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对象），这个也在后续的文章中介绍。