这篇文章，我给大家介绍一下Photoshop一个比较冷门的扩展部分，叫生成器（英文generator），这个东西不在CEP插件面板这个体系内，了解和用的人也比较少。但是呢它确实也是Ps提供给开发者进行扩展定制的一个模块，并且它提供了一些非常独有的特性，对我们插件开发也有较大的助益，所以我单独开一个章节来进行介绍。

背景介绍

生成器，是Photoshop在2015年随着CC2015这个版本一起发布的。当时，由于移动端开始兴起，移动UI设计开始成为主流，随之诞生了一个叫Sketch的设计工具，主打UI设计，相比Ps它更轻巧在UI设计领域效率更高。Adobe也感觉到了压力，于是开始尝试在Ps上融入一些新的元素来提升UI设计能力，所以在CC2015中集成了两个东西：

前面三篇文章，我系统的介绍了Action Manager的基本逻辑和使用方法。希望通过这三部曲能够让大家对Ps脚本编程中的黑魔法有一个更深的认识，并且可以自己上手写一些AM代码，基本上目前绝大多数的场景，我都不需要去网上找别人的代码来抄，而是可以自己去挖掘最终自己写出来想要的功能逻辑。

今天这篇教程，我们会顺着AM继续实战，介绍Ps中最重要的一块 – 图层的常见操作，在课程结尾我们会沉淀出一份JS库文件，封装好了过程中写好的代码，便于日后使用。让我们现在开始吧~~

首先，祝各位新年快乐！今天是2022年的第一天，我没有贪玩，想着要保持文章更新的频度，文章更新周期不要超过2两周，这样才能保证把这个教程顺利完整的写完。在这里祝大家新的一年都顺顺利利，也希望这套教程能够顺畅的完成。

上篇文章我们介绍了如何使用Action Manager来从PS中获取数据，我们深入讲解了ActionDescriptor的组织结构和使用逻辑，本质上和JS开发没有多大区别，我们通过ActionDescriptor, ActionReference, ActionList这3个对象以及他们提供的方法，进行递归遍历，将其中的key和value打印出来，以获取我们需要的数据项。并且我还介绍了如何从宿主全局出发通过对象树分析的方法，挨个将Ps的各个对象和数据进行挖掘，这样你就不需要去猜测某个目标用什么key了，这些key都在对象树的属性当中。如果你仔细研读该文章，并且自己实际动手去尝试了，应该就能够自己尝试的去写一些AM代码了，然后会发现它的功能针对比官方提供的DOM API要丰富强大的多。

这篇文章，我们开始介绍AM三部曲的最后一篇，如何对宿主进行设置操作。把设置放在最后来讲，是因为它相比GET行为，要更难，更不好理解，也更不可预期。所以阅读本篇文章，一定要专注认真，尽量跟随我的思路往下走，我会努力将这套方法一点点剖析出来，尽管如此，也不能确保Ps所有的目标对象都是可以设置成功的，这点你要提前明白。让我们开始吧

上篇文章我们介绍了Action Manager的入门知识，讲如何通过ScriptListener插件来让Ps输出AM代码为我所用。同时介绍了AM的独特的代码结构，都是源于底层C的转换逻辑，使得对大多数开发者而言，异常晦涩难懂。上篇文章相当于是基础知识的介绍，离真正实际应用还差的很多，基本上你只能通过拷贝Ps输出的代码，自己简单改吧改吧凑合着用，如果Ps没有输出，就无能为力了。

这篇文章，以及下一篇，我们开始介绍AM实战部分，深入了解AM的运作机制，通过一些前人的积累和经验，让我们自己也可以顺藤摸瓜的开始自己写AM代码，实现想要的功能。

对于我们日常想要的操作，无非就是希望从宿主获取一些信息（GET操作），设置宿主的一些状态（SET操作），针对这两个操作，我们分为两篇文章分别介绍，中篇介绍如何从Ps中获取信息，下篇介绍如何设置这些信息。这么安排是有考虑的，一方面相比SET而言，GET其实要相对简单一些（虽然SET有ScriptListener辅助，但离开它确实举步维艰），另外一方面SET部分会用到GET讲的数据结构。

让我们马上开始吧~

前言

上篇文章我们介绍了JSX的脚本核心 - DOM编程，它是Ps对外提供的一套API，提供了可以通过JS Api来调用宿主核心功能的接口，通过它我们可以完成需要的一些工作，而这也是官方文档提供给我们的有限的可用接口。但是你实际使用过程中就会发现，DOM提供的api太少太少了，大体也就能覆盖你日常需要的40%，剩下的很多需求，都无法通过DOM API来完成。

比如当选中的多图层的时候，你想拿到当前选中的多个图层，通过

1

app.activeDocument.activeLayer

只能拿到其中的一个，无法拿到所有选中的图层。再比如你想通过代码来选中移动工具，或者你想获取到图层的图层叠加效果等等，这些你在DOM API中都找不到相关的信息。于是，通常你就会在网上进行搜索，查找别人是怎么做的，搜着搜着，你可能就会在一些论坛上看到别人贴出来的这样的一坨代码

前面的文章我们讲过，JSX（ExtendScript）是宿主解析的脚本语言，通过它，我们可以直接操作Ps，这也是插件开发的核心，接下来几篇教程，我们会详细介绍这部分内容。既然这个语言也是Javascript，那它和web开发的那些JS是一样的么，有什么区别没有？

ExtendScript语言

下面是Adobe官方给出的一段针对这个语言的介绍

”[…] an extended form of JavaScript used by several Adobe applications, including Photoshop, Illustrator, and InDesign. ExtendScript implements the JavaScript language according to the ECMA-262 specification. [It] supports the 3rd Edition of the ECMA-262 Standard, including its notational and lexical conventions, types, objects, expressions, and statements. ExtendScript also implements the E4X ECMA-357 specification, which defines access to data in XML format.”

从里面我们就可以看到，JSX采用的ES3标准，是一套非常非常非常旧的语言集合，我们目前基于chrome的web开发，一般都用到了ES6的标准，那是差的不是一两个时代，你不能在JSX里头使用各种新的语言特性，比如let, const, 箭头函数 等等，这些在里面都跑不起来，你只能一路var到底，同时有一些你平常习惯了的函数可能也没有，比如

1

Array.indexOf() // JSX的Array对象里头并没有indexOf函数

针对这种场景，你可以自己做一些Array的扩展，或者就是乖乖的用for去遍历。

不过虽然如此，借助整个web繁荣的生态，我们依然可以用最新的语言集合来编码，然后通过编译工具生成目标语言，比如我自己日常开发，就喜欢用Typescript来开发，然后通过webpack/ts编译、混淆、打包然后在进行发布，这个部分对web开发的前端同学应该都很熟悉，我就不展开介绍了。教程后面的篇章，会讲插件的打包，混淆，发布相关，会在介绍这块内容。

前面的文章我们讲到了插件面板是运行在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脚本。