企业官网建设流程全解析

6步搞定CEP扩展：Getting-Started-guides手把手教你搭建第一个Photoshop面板

【免费下载链接】Getting-Started-guidesGetting Started guides and samples for CEP extensions项目地址: https://gitcode.com/gh_mirrors/get/Getting-Started-guides

Getting-Started-guides 是 Adobe 官方提供的CEP 扩展开发指南与示例库（CEP = Common Extensibility Platform，通用扩展平台）。本文将带你用6 个步骤，从零搭建一个能在 Photoshop 中打开本地文件的 CEP 面板扩展——全程只需 HTML + JavaScript + 少量 ExtendScript，新手也能快速上手。

完成后的效果如下：在 Photoshop 中打开我们写的面板，点击按钮即可调用宿主应用能力打开本地文件 👇

为什么选择 CEP 开发 Photoshop 扩展？

• 用熟悉的 Web 技术写界面：面板 UI 就是标准的 HTML / CSS / JavaScript
• ExtendScript 驱动宿主能力：打开文档、导出文件、自动化操作，几乎 Photoshop 能做的事都能调用
• 一套代码多应用复用：同一套 CEP 结构可扩展支持 Illustrator、InDesign、After Effects 等 Creative Cloud 全家桶

📌 前置要求：具备基础的 HTML、CSS、JavaScript 知识即可。

第1步：规划CEP扩展的文件夹结构

扩展必须保存到一个约定的extensions目录中（用户级或根级，取决于使用范围）。除强制要求的CSXS文件夹外，其余结构可以灵活安排。官方推荐的目录组织方式如下：

这样"前端"与"宿主脚本"各司其职，职责清晰、易于维护。

第2步：配置 manifest.xml 扩展清单

manifest.xml是整个扩展的"身份证"。对新手来说，只需关注以下 7 个核心配置项：

1. ExtensionBundleId：唯一包 ID，如com.my.test
2. Extension Id：包 ID +.panel，在清单中会出现两次
3. Host Name & Version：支持的宿主应用及版本（本例为 PhotoshopPHSP/PHXS19）
4. MainPath：指向./client/index.html
5. ScriptPath：指向./host/index.jsx
6. Menu：面板在宿主菜单中显示的名称
7. Size：面板默认宽高（如 350 × 500）

配置完成后，就得到一个支持 Photoshop v19、默认尺寸 350×500、名为 "My First Panel" 的面板扩展。项目中提供了可直接参考的完整清单文件：

• 最小配置示例：Exporting files from the host app/com.cep.export/CSXS/manifest.xml
• Fetch 天气面板示例：Network requests and responses with Fetch/com.cep.weather-simple/CSXS/manifest.xml

第3步：引入 CSInterface.js 核心库

CSInterface.js是 CEP 官方的核心库，负责：

• 控制面板本身（打开、关闭、调整大小等）
• 建立前端 JavaScript 与宿主 ExtendScript 之间的通信桥梁

只需把最新版本的CSInterface.js放到/client目录下，并在index.html中作为<script>依赖引入即可。

第4步：编写前端面板界面（HTML + JS）

面板界面完全用 HTML 编写。最小可用的index.html包含三部分：一个标题、一个按钮、两个脚本依赖（CSInterface.js+ 自己的index.js）。

JavaScript 侧的核心只有三步：

1. 创建CSInterface实例
2. 给按钮绑定点击事件
3. 用evalScript()向前端发起指令，调用宿主端的 ExtendScript 函数

var csInterface = new CSInterface(); document.querySelector("#open-button").addEventListener("click", openDoc); function openDoc() { csInterface.evalScript("openDocument()"); }

其中evalScript()是连接"面板"与"宿主应用"的关键通道——后续第 5 步的宿主函数就会由它触发。

第5步：编写 ExtendScript 宿主脚本

ExtendScript 与普通 JS 的本质区别在于：它能直接访问宿主应用能力（打开文档、编辑、导出等）。本例只需写一个打开文件的函数：

function openDocument(){ var fileRef = new File("~/Downloads/myFile.jpg"); var docRef = app.open(fileRef); }

当你在前端点击按钮时，evalScript("openDocument()")就会调用这个函数，Photoshop 随即打开指定文件。

第6步：在Photoshop中启动扩展

保存代码后，重启宿主应用（Photoshop），然后在菜单中找到：

窗口（Window） > 扩展（Extensions） > My First Panel

面板弹出后，点击按钮就能看到第 4、5 步的完整链路生效。如果启动时弹出"未签名扩展"提示，说明需要开启调试模式——这正是下一节的主题。

调试技巧：面板改动后如何生效

开发过程中最容易困惑的问题是："我改了代码，为什么界面上没变化？"答案取决于你改的是哪一侧：


• 改了client前端代码？→ 关闭并重新打开面板即可
• 改了CSXS/manifest.xml或host脚本？→ 需要重启整个宿主应用

进阶调试可以借助 Chrome 的 CEF 远程调试功能，把面板当网页一样在localhost:8088中查看 Console 日志：


完整的调试设置方法（包括 Windows 注册表 / Mac 终端开启PlayerDebugMode）请参考项目内的 Client-side Debugging/readme.md。

进阶路线：你的扩展还能做什么

搭好第一个面板只是开始，项目内还提供了多篇进阶指南和完整示例：

• 从宿主应用导出文件：用 ExtendScript 把当前文档导出为 PDF / JPG / PNG，示例代码见 Exporting files from the host app/com.cep.export/host/index.jsx
• 发起网络请求：在面板中调用第三方 API 并实时更新 UI，示例见 Network requests and responses with Fetch/com.cep.weather-simple/host/index.jsx


• 打包与分发：学会用 ExManCmd 把扩展打成安装包进行分发，指南见 Package Distribute Install/readme.md
• 提审与变现：面向 Creative Cloud 开发者计划的上架流程，见 Submit Review Monetize/Readme.md

常见问题速答（CEP新手FAQ）

Q：扩展保存到哪里才能被 Photoshop 识别？A：系统的extensions扩展目录（分用户级/根级），目录内必须包含CSXS/manifest.xml。

Q：为什么面板菜单里看不到我的扩展？A：90% 的情况是manifest.xml的Extension Id前后不一致，或MainPath/ScriptPath路径写错。

Q：提示"扩展未正确签名"怎么办？A：开启PlayerDebugMode调试模式即可，步骤见第 6 步提到的调试指南。

Q：同一套代码能支持多个 Adobe 应用吗？A：可以。在manifest.xml的<HostList>中追加应用（如ILST代表 Illustrator、IDSN代表 InDesign），并按app.name区分宿主逻辑。

总结：6步回顾

跟着 Getting-Started-guides 走完全流程，你就拥有了一个真正可用的 Photoshop CEP 扩展，并掌握了向导出、网络请求、打包分发等进阶主题继续探索的路线图。

【免费下载链接】Getting-Started-guidesGetting Started guides and samples for CEP extensions项目地址: https://gitcode.com/gh_mirrors/get/Getting-Started-guides