在 Adobe 创意套装中，CEP（Common Extensibility Platform） 作为桥梁，可以让开发者在 Photoshop、Illustrator、InDesign 等软件中创建插件，扩展软件功能，提升用户体验。
而对于前端开发者来说，使用 npm 包 create-cep-extension 可以更方便地构建 CEP 插件。它提供了一系列工具，可以自动生成插件的目录结构、html 模板和 JavaScript 骨架等，省去了很多重复劳动和手动配置的时间。
安装 create-cep-extension
首先，需要安装 Node.js 和 npm。然后，可以在命令行中使用以下命令安装 create-cep-extension：
npm install -g create-cep-extension
创建 CEP 插件
使用 create-cep-extension 创建 CEP 插件非常容易。只需要在需要创建插件的目录中，运行以下命令：
create-cep-extension
然后，按照提示输入插件的信息，如插件名称、版本号、描述等。生成的目录结构如下：
-- -------------------- ---- -------
---------------
--- ----------
--- ---------
--- -------------
--- ------------
--- -------
- --- -----
- - --- ------------
- - --- ---------------
- --- ----------
--- ----
--- ------------其中，public 目录下的 csxs 目录包含了插件的主要文件：manifest.xml 是插件的配置文件，MyExtension.jsx 是插件的入口文件。index.html 文件是插件的 UI 界面，使用 HTML 和 JavaScript 编写，可以直接在浏览器中预览和调试。src 目录下的 MyScript.jsx 是插件的后台脚本，可以通过扩展 CEP 标准 API 进行与主应用程序的交互。
构建 CEP 插件
在完成插件代码编写后，可以运行以下命令构建插件：
npm run build
这将使用 Webpack 和 Babel 将 JavaScript 文件打包和转译，生成符合 CEP 插件标准的可执行文件。
如果需要在代码修改时自动重新构建插件，可以使用以下命令:
npm run dev
使用 CEP 插件示例
下面，以创建一个简单的 CEP 插件来演示 create-cep-extension 的使用。假设插件名称为 MyExtension，版本号为 1.0.0。
首先，在命令行中执行以下命令：
create-cep-extension
按照提示输入插件信息。其中，插件类型为 Photoshop，即 PHXS。
然后，进入插件目录，使用以下命令安装扩展插件库:
npm install cep-interface
在 public/csxs 目录下的 MyExtension.jsx 文件中，可以实现插件的入口逻辑。例如，创建一个按钮，点击后弹出对话框：
var csInterface = new CSInterface();
var button = document.getElementById("button");
button.addEventListener("click", function() {
csInterface.evalScript("alert('Hello, CEP!')");
});在 public/index.html 文件中，创建一个按钮，并引入 MyExtension.jsx 文件：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- -------------------------- ------- ------ ------- ----------------- ------------ ------- ------------------------------------ ------- -------
在 src/MyScript.jsx 文件中，可以使用 CEP 标准 API 与主应用程序交互。例如，获取当前打开的文档名称：
var csInterface = new CSInterface();
csInterface.evalScript("app.activeDocument.name", function(result) {
console.log("Active document name: " + result);
});最后，运行以下命令构建插件：
npm run build
然后，在 Photoshop 菜单栏中选择 Windows > Extensions > MyExtension，就可以打开插件并测试功能了。
总结
create-cep-extension 提供了一个快速创建 CEP 插件的工具，可以大大简化插件项目的搭建和配置工作。同时，使用 CEP 标准 API 和 DOM，可以在插件中实现强大的交互式界面和后台逻辑。在实践中，需要注意插件版本兼容性、性能调优和安全性等方面的问题，以提供稳定和安全的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66756