Adobe CEP 扩展开发入门指南

2026-01-30 04:39:02作者：史锋燃Gardner

1. 项目介绍

本项目是基于 Adobe 的 Common Extensibility Platform（CEP）的一个开源指南，旨在帮助开发者快速上手并开发出可以在 Adobe Creative Cloud 应用中运行的扩展。CEP 允许开发者使用 HTML、CSS 和 JavaScript 等网页技术，结合 Adobe 提供的 API 和框架，为 Photoshop、Illustrator、InDesign 等应用创建扩展。

2. 项目快速启动

以下是一个简单的 CEP 扩展快速启动指南，该扩展将在 Adobe 应用中打开一个新的文档。

步骤 1: 决定文件夹结构

首先，你需要决定扩展代码的保存位置。扩展可以保存在根目录或用户目录下。你的扩展文件夹结构应该包含以下内容：

/CSXS
-- manifest.xml
/client
-- index.html
-- index.js
-- CSInterface.js
/host
-- index.jsx

步骤 2: 配置 manifest.xml

在 manifest.xml 文件中配置你的扩展。以下是配置文件的一个基础示例：

<?xml version="1.0" encoding="UTF-8"?>
<ExtensionManifest ExtensionBundleId="com.example.myextension" ExtensionBundleVersion="1.0" Version="7.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <ExtensionList>
        <Extension Id="com.example.myextension.panel" Version="1.0"/>
    </ExtensionList>
    <ExecutionEnvironment>
        <HostList>
            <Host Name="PHSP" Version="19"/>
            <!-- 更多支持的宿主应用 -->
        </HostList>
        <LocaleList>
            <Locale Code="All"/>
        </LocaleList>
        <RequiredRuntimeList>
            <RequiredRuntime Name="CSXS" Version="7.0"/>
        </RequiredRuntimeList>
    </ExecutionEnvironment>
    <DispatchInfoList>
        <Extension Id="com.example.myextension.panel">
            <DispatchInfo>
                <Resources>
                    <MainPath>./client/index.html</MainPath>
                    <ScriptPath>./host/index.jsx</ScriptPath>
                </Resources>
                <Lifecycle>
                    <AutoVisible>true</AutoVisible>
                </Lifecycle>
                <UI>
                    <Type>Panel</Type>
                    <Menu>我的第一个面板</Menu>
                    <Geometry>
                        <Size>
                            <Height>500</Height>
                            <Width>350</Width>
                        </Size>
                    </Geometry>
                </UI>
            </DispatchInfo>
        </Extension>
    </DispatchInfoList>
</ExtensionManifest>

步骤 3: 下载 CSInterface.js

从 Adobe 官方网站下载最新版的 CSInterface.js 库，该库允许你的扩展与 Adobe 应用进行交互。将下载的 CSInterface.js 文件放在 client 文件夹下。

步骤 4: 编写前端代码

创建 HTML 标记

在你的 client/index.html 文件中，编写以下代码来创建一个简单的用户界面：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的第一个面板</title>
</head>
<body>
    <h1>我的第一个面板</h1>
    <button id="open-button">打开文档</button>
    <script type="text/javascript" src="CSInterface.js"></script>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>

编写 JavaScript 代码

在你的 client/index.js 文件中，编写以下 JavaScript 代码来处理按钮点击事件，并调用 Adobe 应用程序的方法：

document.getElementById('open-button').addEventListener('click', function() {
    var csInterface = new CSInterface();
    csInterface.evalScr('app.openDocument("path/to/your/document");', function(result) {
        console.log(result);
    });
});