前面的文章我们讲到了插件面板是运行在CEF这个浏览器运行时下，而需要操作Photoshop的时候，要用到运行在宿主环境下的ExtendScript（以下简称JSX），那这两个独立的运行时之间是如何进行交互通信，且有哪些通信方式的呢，这篇文章我们来扒一扒。

面板调用宿主（JS -> JSX）

当我们在面板上点击一个按钮，然后让Photshop执行一个行为，这个时候，就需要JS调用JSX来完成，这个操作通过CSInterface提供的方法来完成，该对象提供了一个叫evalScript的方法，让我们可以在JS环境下执行一段JSX的代码，这里记得是执行一段代码，它好比原生JS的eval方法，将一串字符串代码执行，如下代码执行，就会在PS上出现一个alert弹窗：

1
2

var cs = new CSInterface();
cs.evalScript(`alert("Hi there")`);

这个函数提供了一个通往JSX世界的入口，但是光执行一段字符串代码显然在实际开发中是不够用的，因为我们的JSX代码通常都会很多很多，不可能全部都塞成一段字符串，于是我们一般将工程里的所有JSX文件都预先加载进来，然后暴露出函数，再通过evalScript函数去执行函数调用的过程。比如我在JSX文件里头有一个函数，该函数获取当前图层的名称：

1
2
3
4
5
6

// main.jsx
// 获取当前选中图层的名称
function getActiveLayerName() {
    var doc = app.activeDocument;
    return doc.activeLayer.name;
}

在开发一款基于Photoshop的面板插件时候，我们会关注到Ps这个软件提供了4中主题

这就要求我们在面板开发的时候，需要对这四种不同的主题进行适配，否则你浅颜色的面板界面在用户黑色主题下就会显得格外别扭。

今天一个网友求助，希望在选中 文字工具 的时候，能够通过脚本修改默认的字体。

开发工具的选择

上篇文章我们介绍了Adobe CEP插件的基本构成，它包含了由浏览器渲染和交互的面板部分，和实际操作PS完成任务的ExtensionScript部分。

这两块的主要编程语言都是Javascript，所需要用到的技术都是web开发相关的技术栈，所以在选择开发工具上，也会偏向于web前端开发领域。理论上，因为是做页面和JS脚本开发，并不限制你用什么开发工具，只要一个顺手的文本编辑器，能够写Html/css/javascript就可以了。 不过处于开发效率，体验上，以及调试的方便性，我们有一些推荐选项。

1. Visual Studio Code

首选，没有之一！

它是目前市面上前端开发最流行的开发工具，免费，易用，还具有丰富的扩展插件供你选择，提升日常开发效率。 这里重点强调介绍的是Adobe官方基于VSCode也提供了一款开发调试插件，它能够直接和PS通信，支持调试你的JSX脚本。

前沿

原计划这篇文章要写开发工具和调试环境的，但是后来发现如果不先介绍CEP面板的基本结构的话，会对调试环境的配置的理解有障碍，于是本篇文章介绍一下CEP插件的基本分层结构和文件目录结构。

分层结构

CEP的全称是Common Extensibility Platform，是Adobe在CC2014版本一起推出的扩展开发平台，在CC2014及以前，相对应的面板插件开发，是基于Flash开发平台，后来随着web的发展以及flash的逐渐没落，adobe随记放弃了使用flash来开发插件，拥抱web开发模式，CEP的插件开发，即全部采用的web开发技术。

前言

在开始插件开发之前，我们需要对Photoshop做一些设置，让它能够支持我们开发自己的插件。

1. 插件安装位置

从最终效果看，一个PS的插件，其实就是一个放置在PS的某个路径下的一个文件夹，里头包含了必备需要的文件。在不同的系统下，对应的位置不同，如下：

Mac

1
2
3
4

#系统路径
/Library/Application Support/Adobe/CEP/extensions
#用户路径
/Users/{用户名}/Library/Application Support/Adobe/CEP/extensions

Windows

1
2
3
4

#系统路径
C:\Program Files\Common Files\Adobe\CEP\extensions
#用户路径
C:\Users\{用户名}\AppData\Roaming\Adobe\CEP\extensions

系统路径，和用户路径的区别在于，当你把插件安装在系统路径之后，这个电脑上所有的登录用户都能使用，安装在用户路径下，只有此用户登录能够看到并使用。还有一个区别是安装到系统路径，需要管理员权限，在mac上尤其需要注意，没有权限可能会导致安装不成功

前言

这篇文章是在2015年写的，发布在CSDN的博客上，当时就有想法说要把PS插件开发这一系列的内容沉淀并分享出来，结果就写了一个开篇，就GG了。

今天上去一看，发现浏览量和收藏都还可以，底下还有评论希望继续更新的，有点惭愧……

现在把这篇文章转过来，同时做一些内容的更新，作为新的开始，新的开篇，嗯，这次要坚持下来，立个Flag。

背景介绍

Adobe提供了诸多功能强大的图形编辑软件，其中像PS, AI之类的更是广大UI设计师必备工具。然而在功能强大的同时，面对不同的使用场景所需要的特殊需求，主体功能便无法满足了。为此，adobe为各个软件提供了插件机制，为广大设计爱好者提供平台来丰富adobe产品的功能。

目前该平台软件的插件开发已经形成了相应的市场规模，有诸多专门做该平台插件的公司诞生，也有许许多多的优秀插件产品出来，满足用户对不同的设计需要，大大提升工作效率。

作为一个开发者，也开发过该平台的插件产品，期间踩过许许多多的坑，发现这个领域主要还是国外开发者居多，国内对应的资料和开发人员都比较少，中文的相关资料也都非常碎片化，不成系统。

本博客将专门投入adobe平台的插件开发研究，力求系统的将对应的知识点沉淀下来，供大家参考。

前言

最近一直都很忙，公司有很多事情，业余时间还要维护和升级Cutterman系列产品，进来有了一些新的想法，正在逐步一点点的推进落地，进度有点慢，不断告诫自己： 罗马不是一天建成的，需要长期坚持，有耐心。

决心坚持做一些能够沉淀下来的事情，让时间去发挥价值。所以有了这个博客，虽然在早些年，前后折腾过好几次个人博客，百度空间 -> CSDN -> 简书 -> 个人博客站点，最后都没有坚持下来，做了废，废了又突发兴起继续做，前前后后，浪费了很多精力和时间，想来还是毅力不够。

随着年龄的增加，深感竞争力在持续减退，这十几年的工作、经历，技术积累也好，个人成长也好，应该需要记录下来，也算是对自己的一个交代。

关于

这个博客系统，会主要以设计软件插件开发的文章为主，目前市面上做这个领域的人非常少，系统性的资料也非常少，希望能够通过这里，慢慢沉淀一些资料出来，给与有需要的人帮助。

内容会涵盖

• Adobe Photoshop插件开发
• Sketch 插件开发
• XD 插件开发
• Figma 插件开发

我会努力保持一个相对固定的节奏进行更新，持续维护