CEP（通用扩展平台）让您可以在 Adobe应用程序（如 PS、AI、ID、AE等）中构建扩展。
示例：创建一个拓展，包含一个面板一个按钮，单击可以打开文件
使用的技术（PS为例）
- 支持的主机应用程序：Photoshop
- 库/框架/API：
- Adobe 专用：CEP、ExtendScript for Photoshop
先决条件
HTML、CSS 和 JavaScript 的基本知识。
开发步骤
1.确定文件夹结构
您需要先决定在哪里保存您的扩展代码。您的扩展可以保存在根级别或用户级别，具体取决于允许使用扩展的人员（有关实际路径，请参阅CEP 8 HTML 扩展手册）。
除了CSXS必须包含manifest.xml外，其他文件随意。一般推荐：
/CSXS— 包含manifest.xml扩展配置文件，必须。/client— 前端 HTML、JavaScript 和 CSS 代码，以及Adobe的CSInterface.js库，以及其他第三方库（例如，jQuery）。/host— 扩展 ExtendScript 文件（本例中为index.jsx），也就是普通的软件脚本。
2. 配置扩展信息 manifest.xml
以下为常用且简单的配置信息（完整版本， 请查找Github 存储库）。
让我们看看 .xml 文件中的以下 XML 元素和属性manifest.xml。请参阅以下代码中的相应注释 ( #1-7 )：
- ExtensionBundleId：扩展程序的唯一ID，例如
com.my.test - Extension Id:：拓展唯一 ID。通常遵循以下语法：
ExtensionBundleID+.panel=com.my.test.panel（注意此 ID在清单中出现两次） - Host Name & Version:：主机应用程序 ID 和版本。更多信息请查看Adobe 软件ID
- MainPath：
index.html. 确保此文件的路径来自代码库的顶级目录 - ScriptPath：
index.jsx. 确保此文件的路径来自代码库的顶级目录 - Menu：扩展程序名称将出现在主机应用程序的下拉菜单中
- Size：扩展界面的默认长度与宽度
<?xml version='1.0' encoding='UTF-8'?>
<!-- 1) -->
<ExtensionManifest ExtensionBundleId="com.my.test" ExtensionBundleVersion="1.0.0" Version="7.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<ExtensionList>
<!-- 2) -->
<Extension Id="com.my.test.panel" Version="1.0.0" />
</ExtensionList>
<ExecutionEnvironment>
<HostList>
<!-- 3) -->
<Host Name="PHSP" Version="19" />
<Host Name="PHXS" Version="19" />
</HostList>
<LocaleList>
<Locale Code="All" />
</LocaleList>
<RequiredRuntimeList>
<RequiredRuntime Name="CSXS" Version="7.0" />
</RequiredRuntimeList>
</ExecutionEnvironment>
<DispatchInfoList>
<!-- 2) -->
<Extension Id="com.my.test.panel">
<DispatchInfo>
<Resources>
<!-- 4) -->
<MainPath>./client/index.html</MainPath>
<!-- 5) -->
<ScriptPath>./host/index.jsx</ScriptPath>
<CEFCommandLine />
</Resources>
<Lifecycle>
<AutoVisible>true</AutoVisible>
</Lifecycle>
<UI>
<Type>Panel</Type>
<!-- 6) -->
<Menu>My First Panel</Menu>
<Geometry>
<Size>
<!-- 7) -->
<Height>500</Height>
<Width>350</Width>
</Size>
</Geometry>
<Icons />
</UI>
</DispatchInfo>
</Extension>
</DispatchInfoList>
</ExtensionManifest>
以上为名为“My First Panel”的面板型扩展，支持 Photoshop v19 并以 500 x 350大小显示。
3.下载 CSInterface.js
下载最新版本的CEPCSInterface.js库，它能够控制扩展并与Adobe软件通信。
可以在任何位置引用此库，作为<script>依赖项，包含在index.html文件中即可。
此示例进将下载的文件CSInterface.js接放在了/client文件夹中。
4. 前端代码
可以使用 HTML、CSS 和 JavaScript 来构建，来看看基本文件。
创建 HTML （index.html）
CEP 扩展的用户界面是用 HTML 编写的。（请参阅注释#1-3）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Your First Panel</title>
</head>
<body>
<!-- 1) 顶部文字介绍 -->
<h1>Your first panel</h1>
<!-- 2) 创建一个按钮 -->
<button id="open-button">Open</button>
<!-- 3) 引入脚本, 需要包含 CEP的 CSInterface.js 库-->
<script type="text/javascript" src="CSInterface.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
在此index.html文件中，CSInterface.js库作为<script>依赖项引入。
编写 JavaScript 代码
确保引入CSInterface. 它能够访问对构建扩展有用的方法和属性。
其中一个方法 ，evalScript()将允许您从客户端 JavaScript 与 ExtendScript 代码（ExtendScript 将在下一节中介绍）进行通信并返回。见评论#1-3：
/* 1) 场景CSInterface实例. */
var csInterface = new CSInterface();
/* 2) 引用HTML按钮，并添加单击事件. */
var openButton = document.querySelector("#open-button");
openButton.addEventListener("click", openDoc);
/* 3) 编写辅助函数，将指令传递给 ExtendScript 端。*/
function openDoc() {
csInterface.evalScript("openDocument()");
}
如果对其他函数感到好奇，请参考CEP Github 存储库CSInterface。
5. 编写 ExtendScript 代码
通过 ExtendScript，可以访问宿主应用的函数与变量，例如打开文档、编辑、导出，以及几乎任何操作。
本例将创建一个函数，用于在主机程序打开一个文件。需要把文件名改成自己的。
function openDocument(){
var fileRef = new File("~/Downloads/myFile.jpg");
var docRef = app.open(fileRef);
}
6. 在程序中启动您的扩展
用户可以在何处找到并打开您的扩展程序取决于您的扩展程序支持的 Creative Cloud 主机应用程序。
由于本例支持 Photoshop，您可以在PS中：
窗口 > 扩展 > My First Pnanel（我的第一个面板）
如果收到扩展未签名的警报，请参阅客户端调试指南的“设置调试模式”部分。
下一步
现在您已经了解了基础知识，请查看这些指南和示例，它们将引导您了解 CEP 中的一些常见中级和高级主题：