React开发PS插件学习笔记（更新中。。。）

依赖技术

• CEP框架：基于adobe-cep框架深度定制开发，配备有完善的桥接方案以及丰富的事件与回调，能够满足大部分场景的插件开发需要。
  下载最新版本的 CEP CSInterface.js 库，它使您能够控制扩展并与应用程序进行通信。

//该CSInterface.js库作为依赖项包含<script></script>在该index.html文件中
<script type="text/javascript" src="CSInterface.js"></script>

• React框架：前端实现完全依赖react与常规js能力，并通过桥接bridge拥有部分控制ps的能力，adobe-cep自带node环境，可以使用大部分node.js能力。

• 官方文档较为晦涩隐晦，可参考三方文档开发。三方API文档(日文)

调试

当我们需要调试面板的时候，就需要另外一些操作了。（CSInterface需要在ps环境中执行）

1. debug文件
   在插件根目录下，新建 .debug 文件，内容如下

//debug文件
<?xml version="1.0" encoding="UTF-8"?>
<ExtensionList>
    <Extension Id="com.demo.cepstart">
        <HostList>
            <Host Name="PHXS" Port="7001" />
		    <Host Name="PHSP" Port="3002" />
		    <Host Name="IDSN" Port="3003" />
		    <Host Name="AICY" Port="3004" />
		    <Host Name="ILST" Port="3005" />
		    <Host Name="PPRO" Port="3006" />
		    <Host Name="AEFT" Port="3007" />
		    <Host Name="PRLD" Port="3008" />
		    <Host Name="FLPR" Port="3009" />
		    <Host Name="DRWV" Port="3010" />
        </HostList>
    </Extension>
</ExtensionList>

这里 Id 就是在Manifest.xml文件中写的插件唯一ID， PHXS指的是CC版本的Photoshop，Port 是本地监听的端口。

配置好这个文件之后，重启PS，再打开插件面板，就可以通过Chrome的DevTool进行远程调试了
2. Devtool
我看到很多人小伙伴完成第一步的时候，打开自己电脑上的chrome，输入调试地址后是白页，这是因为chrome在80版本之后做了一些改动，devtool的一些依赖需要翻墙。

这里有几种解决方案

使用CefClient，这里是下载链接，除了界面丑一点，没什么毛病

CefClient
使用7x版本的Chromium，这是我目前正在使用的方案，优点是提供和Chrome一样的操作体验，功能完整，缺点是指定版本的chroumium不太好找，我也是费了好大劲，在这里分享给大家
Mac Chroumium 79
Win Chroumium 79

安装拓展的工具

方法一：zxpinstaller
注意：官方说明这个软件只能装，不能管理和卸载

方法二：Anastasiy’s Extension Manager
推荐：支持安装、管理和卸载。

方法三：如果不想安装插件扩展程序可以将.zxp重命名为.zip，在以下路径内创建一个com.bbtools.shadow文件夹
win路径：
C:\Users[ USER ]\AppData\Roaming\Adobe\CEP\extensions\

Mac路径：
~/Library/Application Support/Adobe/CEP/extensions/

安装完成后从窗口→扩展功能→BBTools Shadow找到插件就可以快乐的使用了

安装失败的情况

问题描述：窗口显示Installation failed because of a file operationerror，由于文件操作错误，安装失败

原因：文件的位置错误

解决方案：

方案1.将zxp文件移到桌面上再进行拖拽到安装

方案2.把zxp后缀改为zip解压，拷贝文件夹到下面路径
C:\Program Files (x86)\Common Files\Adobe\CEP\extensions\

尚未找到答案（有知道答案的大佬欢迎指教～）