Adobe CEP 扩展开发入门指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00992/article/details/146994531

Adobe CEP 扩展开发入门指南

Getting-Started-guides Getting Started guides and samples for CEP extensions 项目地址: https://gitcode.com/gh_mirrors/get/Getting-Started-guides

1. 项目介绍

Common Extensibility Platform（CEP）是一个允许开发者为 Adobe Creative Cloud 应用程序（如 Photoshop、Illustrator、InDesign 等）构建扩展的平台。本指南旨在帮助开发者快速上手，通过简单的步骤构建一个基础的 CEP 扩展。

2. 项目快速启动

以下是一个简单的 CEP 扩展项目结构示例和启动步骤：

步骤 1：决定文件夹结构

你的扩展可以保存在根目录或用户目录下，具体取决于扩展的使用者。除了必需的 CSXS 文件夹，其他文件夹结构是灵活的。推荐的结构如下：

/CSXS
-- 包含 `manifest.xml` 文件，存储扩展配置数据。
/client
-- 包含前端 HTML、JavaScript 和 CSS 代码，以及 Adobe 的 `CSInterface.js` 库。
/host
-- 包含 ExtendScript 文件（例如 `index.jsx`），用于访问和驱动宿主应用程序的大多数功能。

步骤 2：配置 `manifest.xml`

manifest.xml 文件是扩展的核心配置文件。以下是一个最小配置的例子：

<?xml version="1.0" encoding="UTF-8"?>
<ExtensionManifest ExtensionBundleId="com.my.test" ExtensionBundleVersion="1.0.0" Version="7.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <ExtensionList>
        <Extension Id="com.my.test.panel" Version="1.0.0"/>
    </ExtensionList>
    <ExecutionEnvironment>
        <HostList>
            <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>
        <Extension Id="com.my.test.panel">
            <DispatchInfo>
                <Resources>
                    <MainPath>./client/index.html</MainPath>
                    <ScriptPath>./host/index.jsx</ScriptPath>
                    <CEFCommandLine/>
                </Resources>
                <Lifecycle>
                    <AutoVisible>true</AutoVisible>
                </Lifecycle>
                <UI>
                    <Type>Panel</Type>
                    <Menu>我的第一个面板</Menu>
                    <Geometry>
                        <Size>
                            <Height>500</Height>
                            <Width>350</Width>
                        </Size>
                    </Geometry>
                    <Icons/>
                </UI>
            </DispatchInfo>
        </Extension>
    </DispatchInfoList>
</ExtensionManifest>

步骤 3：下载 `CSInterface.js`

从 Adobe 官方网站下载最新的 CSInterface.js 库，这个库允许你控制扩展并与应用程序通信。将此库放在 client 文件夹下。

步骤 4：编写前端代码

现在，使用 HTML、CSS 和 JavaScript 编写前端代码。

创建 HTML 标记

在 client/index.html 文件中，编写以下代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的第一个面板</title>
</head>
<body>
    <h1>我的第一个面板</h1>
    <button id="open-button">打开</button>
    <script src="CSInterface.js"></script>
    <script>
        // JavaScript 代码来处理按钮点击事件等
    </script>
</body>
</html>