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

2015-10-13  本文已影响3109人  不知语冰

《零基础的 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 CEP 插件的开发由于是基于 HTML 和脚本语言 JavScript ，所以并不需要特别的工具，任何的文本编辑器都可以完成开发的任务。

编辑器

如果是 Eclipse 用户，Adobe 官方发布了以一个在 Eclipse 上的工具集：Adobe Extension Builder 3，不过我并非 Eclipse 用户，我使用的是 WebStorm ，由于 WebStorm 是收费软件，所以这里推荐 Adobe 本家的编辑器： Brackets 。当然和前面说的一样，实际上任何文本编辑器都是可以的。

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），以后会详细说明如何进行远程调试。

Chrome 开发者工具

远程调试

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

.debug 文件

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

<?xml version="1.0" encoding="UTF-8"?>
<ExtensionList>
    <Extension Id="com.adobe.CEPHTMLTEST.Panel1">
        <HostList>
           <Host Name="PHXS" Port="8000"/>
           <Host Name="IDSN" Port="8001"/>
       </HostList>
    </Extension>
  <Extension Id="com.adobe.CEPHTMLTEST.Panel2">
       <HostList>
          <Host Name="PHXS" Port="8100"/>
          <Host Name="IDSN" Port="8101"/>
      </HostList>
    </Extension>
</ExtensionList>

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

在注册表中添加 `PlayerDebugMode` 键值

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

调试日志级别

插件的调试日志对插件测试很有用，在注册表中的
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 插件的文件结构

上一篇下一篇

猜你喜欢

热点阅读