零基础的 PhotoShop CEP 6 开发教程 「 1 」配置开发环境

《零基础的 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 。当然和前面说的一样,实际上任何文本编辑器都是可以的。

零基础的 PhotoShop CEP 6 开发教程 「 1 」配置开发环境_第1张图片
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),以后会详细说明如何进行远程调试。

零基础的 PhotoShop CEP 6 开发教程 「 1 」配置开发环境_第2张图片
Chrome 开发者工具

远程调试

插件可以在浏览器中利用浏览器的开发者工具(F12)进行调试。
在插件目录中建立文件名为 .debug 的配置文件来进行配置

零基础的 PhotoShop CEP 6 开发教程 「 1 」配置开发环境_第3张图片
.debug 文件

.debug 文件的格式示例如下:



    
        
           
           
       
    
  
       
          
          
      
    

Port 指定端口号,在浏览器中用 http://localhost:端口号/ 访问插件,例如:http://localhost:8080

配置开发环境


1. 设置 CC 扩展开发者模式

通常情况下 PhotoShop 是不会运行未经签名扩展的,只有打包并签名才可以运行,这样我们就没法即时测试开发的扩展了,所以我们要打开开发者模式:

  1. 打开到注册表(运行 regedit):
    CC 、CC 2014:HKEY_CURRENT_USER\Software\Adobe\CSXS.5
    CC 2015:HKEY_CURRENT_USER\Software\Adobe\CSXS.6

  2. 添加 字符串值PlayerDebugMode,将值设置为 1

零基础的 PhotoShop CEP 6 开发教程 「 1 」配置开发环境_第4张图片
在注册表中添加 `PlayerDebugMode` 键值

这里提供 2 个 .reg 文件,在 Windows 下双击就能方便的开关开发者模式:

  • CEP 调试模式关闭.reg
  • CEP 调试模式打开.reg

调试日志级别

插件的调试日志对插件测试很有用,在注册表中的
HKEY_CURRENT_USER\Software\Adobe\CSXS.6HKEY_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 插件的文件结构

你可能感兴趣的:(零基础的 PhotoShop CEP 6 开发教程 「 1 」配置开发环境)