如何为Photoshop2024编写插件（UXP）小菜鸟入门版

背景

今天下午忽然想了解下如何为photoshop编写插件，尤其是新版本的photoshop，结果发现这个事情比想象得居然复杂很多，一开始就陷入了CEP版本的photoshop插件的坑里边去了，看了半天的git文档，最近的官方更新版本都在3年前了，而且ps里边的插件放在了扩展（旧版）里边，明摆着是想要淘汰掉的样子，越看越慌，而且网络上资料少的可怜，遇到了各种编译环境版本不匹配、签名未经验证、扩展刷新不出来、官方无新版本适配CEP版本等等的问题。

后来机缘巧合之下，发现现在Adobe换了一套插件开发的思路：UXP版本的框架。

Documentation-UXP for Adobe Photoshop

又碰巧刷到了知乎一位朋友的帖子：【Adobe UXP插件开发中文教程】- 1. 简介 - 知乎

了解到：CEP版本的插件因为资源占用过多和权限过大，以及安全风险的问题，所以主推UXP版本的插件了，emm...又白白浪费了好几个小时😂

不过，回到UXP版本，发现这次官方给的东西用心了很多，但是也有一些小的坑，所以简单记录下，或许对同样对这个课题感兴趣的朋友有点启发。

首先声明，本人也是刚了解这个课题，所以仅仅是分享一点过程，错误和不规范的地方，大家选择性的了解就好啦~

如何一步步建立自己的第一个Photoshop插件

第一步，首先你需要自己想办法安装一个Photoshop能用的版本，和谐版也是可以的（emm...），这里我使用的是ps2024版；

第二步，到官网下载Adobe Creative Cloud软件，然后安装，然后自己注册个账号，然后登录，这些过程都是不收费的，放心注册就好；

Download Adobe Creative Cloud apps | Free Adobe Creative Cloud trial

第三步，下载完并登录之后，打开这个软件，安装UXP开发工具包，这个也是免费的，下边的截图是下载安装完成后的样子：

第四步，打开photoshop,然后这个时候可能会提示开发者模式是否开启之类的，选择开启；或者自己手动进入 编辑-首选项-增效工具，手动开启这个“启用开发人员模式”，然后点击“确定”；

务必记住要重启Photoshop才能生效。

第五步，回到uxp开发工具里边，文件-新建插件；

第六步，这个时候在弹窗里边，输入插件名称，这个按照你喜欢的来就好，ID可以先不管，版本号默认的就行，宿主应用选择photoshop，版本如果是2024的，就写25.0.0（好像也不是特别重要，我又一次测试写了23.0.0貌似也能用，不确定），最下边的模板就是基于什么模板创建，你可以自己试试看，这里选择了 快速图层新手版本 quick-layers-starter,然后点击选择文件夹按钮；

放在一个你自己喜欢的文件夹下就好，这里不需要放在photoshop的根目录下，但是建议用英文，不确定对中文的支持度如何；

如果弹窗，请点击ok；

第七步，点击 load 按钮，然后返回photoshop，你发现这个插件居然就可以用了~

第八步，简单测试一下，这个插件的目的就是可以获取你文件的图层，然后把图层名字打印出来；

第九步，返回UXP,你可以选择切换到Playground里边，就可以看到这个插件具体的组织方式了，有index来做页面实现，css做样式，js写功能函数，mainfest写配置，然后就可以一边读代码一遍魔改熟悉插件系统了。

到这里，你就有了自己的第一个Photoshop UXP版本的插件啦~

如果对你有帮助，还请帮忙点个赞哈👍，你的鼓励是我更新最大的动力~

当然，如果可以读一下下边的内容，就更好啦~

 🎉写在最后~

去年的时候写了两门比较基础的Stable Diffuison WebUI的基础文字课程，大家如果喜欢的话，可以按需购买，在这里首先感谢各位老板的支持和厚爱~

✨StableDiffusion系统基础课（适合啥也不会的朋友，但是得有块Nvidia显卡）：

https://blog.csdn.net/jumengxiaoketang/category_12477471.html

​​🎆综合案例课程（适合有一点基础的朋友）：

https://blog.csdn.net/jumengxiaoketang/category_12526584.html

​​

这里是聚梦小课堂，就算不买课也没关系，点个关注，交个朋友😄