《零基础的 PhotoShop CEP 6 开发教程》系列目录
「 0 」目录
「 1 」配置开发环境
「 2 」CEP 文件结构
「 3 」CEP 的运行机制
「 4 」Hello World !
「 5 」事件(EVENTS)
「 6 」调用 JSX 并传递信息
「 7 」UI - HTML 开发的一些细节
「 8 」API - 文件读写与二进制数据
「 9 」签名打包与 ZXPSignCmd
「 X 」CEP 更新到 6.1版了
开发工具
- PhotoShop CC2015
- 文本编辑器
- Chrome 浏览器
PhotoShop CEP 插件的开发由于是基于 HTML 和脚本语言 JavScript ,所以并不需要特别的工具,任何的文本编辑器都可以完成开发的任务。
编辑器
如果是 Eclipse 用户,Adobe 官方发布了以一个在 Eclipse 上的工具集:Adobe Extension Builder 3,不过我并非 Eclipse 用户,我使用的是 WebStorm ,由于 WebStorm 是收费软件,所以这里推荐 Adobe 本家的编辑器: Brackets 。当然和前面说的一样,实际上任何文本编辑器都是可以的。
CC Extension Builder for Brackets
这是一个创建 CEP 插件模板的 Brackets 扩展,能够创建一个空白的 CEP 插件,以供编辑。不过目前(2015 年 8 月 15 日)只能创建 CPE5 的模板,而且在 Windows 上现在的版本(0.8.1747)还有 BUG ,要把插件main.js
的第 81 行 的句末的 +"'"
去掉,不然会本来要创建成:XXX
的文件夹会变成 XXX'
。不推荐使用。
调试工具
我们需要准备一个 Chrome 浏览器用来调试开发中的 CEP 插件,必须是 Chrome 或者基于 chromium 的浏览器 ,IE、Firefox 这些是不行的。
用 Chrome 访问宿主提供的端口就能像调试一般网页一样调试 CEP 插件了,这被称为远程调试(Remote Debugging),以后会详细说明如何进行远程调试。
远程调试
插件可以在浏览器中利用浏览器的开发者工具(F12)进行调试。
在插件目录中建立文件名为 .debug
的配置文件来进行配置
.debug
文件的格式示例如下:
Port
指定端口号,在浏览器中用 http://localhost:端口号/ 访问插件,例如:http://localhost:8080
配置开发环境
1. 设置 CC 扩展开发者模式
通常情况下 PhotoShop 是不会运行未经签名扩展的,只有打包并签名才可以运行,这样我们就没法即时测试开发的扩展了,所以我们要打开开发者模式:
打开到注册表(运行 regedit):
CC 、CC 2014:HKEY_CURRENT_USER\Software\Adobe\CSXS.5
CC 2015:HKEY_CURRENT_USER\Software\Adobe\CSXS.6
添加
字符串值
项PlayerDebugMode
,将值设置为 1
这里提供 2 个 .reg 文件,在 Windows 下双击就能方便的开关开发者模式:
- CEP 调试模式关闭.reg
- CEP 调试模式打开.reg
调试日志级别
插件的调试日志对插件测试很有用,在注册表中的
HKEY_CURRENT_USER\Software\Adobe\CSXS.6
或 HKEY_CURRENT_USER\Software\Adobe\CSXS.5
中的 LogLevel
项的值能够控制扩展脚本运行中产生日志的类型,
0 - 关(不生成日志)
1 - 错误(默认值日志记录)
2 - 警告
3 - 信息
4 - 调试
5 - 跟踪
6 - 所有
扩展日志文件将生产在:
C:\Users\%USERNAME%\AppData\Local\Temp
另外 Chromium 嵌入式框架的日志 (Chromium Embedded Framework)生成在:
C:\Users\%USERNAME%\AppData\Local\Temp\cef_debug.log
2. 插件目录
这是插件所存放的文件夹,一个插件以文件夹的形式存在插件目录。
要注意的是插件任何文件名中都不能包含 #
号。
单个 Windows 用户的插件存放在:
C:\Users\%USERNAME%\AppData\Roaming\Adobe\CEP\extensions\
所有本地 Windows 用户都可使用的插件存放在:
Win 32bit:C:\Program Files\Common Files\Adobe\CEP\extensions\
Win 64bit:C:\Program Files (x86)\Common Files\Adobe\CEP\extensions\
另外插件的永久 HTTP Cookies 保存在:
CEP_5、6: C:\Users\USERNAME\AppData\Local\Temp\cep_cache\
CEP_4:C:\Users\USERNAME\AppData\Local\Temp\cep_cookies\
Cookie 的文件名规则是 HostID_HostVersion_ExtensionName,如PHXS_15.0.0_com.adobe.extension1
就此就是 CEP 开发的之前要知道的知识了,下一篇将介绍 CEP 插件的文件结构