在开发过程中，总少不了用到各类插件。Cocos Store 上提供了许多插件资源，但有时也需要我们自己动手去制作一些插件。本次，开发者 （马赛克）将分享 v3.x 插件开发流程与经验，一起来做插件吧！
Cocos Store 资源商店
首先，为什么要开发插件呢？
任何重复机械式的劳动都是无意义的，一切机械劳动皆可自动化，而插件能帮助我们实现自动化。
插件能给我们带来什么？
第一是时间。解决了自动化的问题，最大的好处当然是节省了我们额外的手动操作时间，正所谓寸金难买寸光阴，节约时间便是插件最大的价值。
其次是收益。我们可以把开发的插件发布到 Cocos 商店，给他人带来便利的过程中，也可以给自己带来额外的收益。
第三是生态。各类插件涵盖了开发的方方面面，将能帮助到更多开发者，我们的每个插件，都可以给 Cocos 的生态添砖加瓦。
第四是技术。插件开发所需要用到的技术包括但不限于 HTML、CSS、、Vue，开发插件的同时，也可以帮我们拓展技术范围，增加个人竞争力。
本次，借这篇文章，我就从入门、进阶、深入三部分和大家分享一下开发 Cocos 3.x 插件的流程，以及自己在实际开发中积累的经验，期待有更多的开发者加入到开发插件的行列中来！
PS. 限于篇幅，公众号仅展示正文部分，在论坛专贴中，我另附上了重点内容的参考与扩展链接，想做深入了解的小伙伴，可以直接前往论坛阅读：
入门
1、创建插件
我们可以从顶部菜单栏中打开 扩展/创建扩展 打开插件创建面板。
插件放在哪儿？从顶部菜单栏中打开 扩展/扩展管理器 找到我们的插件，点击 Open 即可打开我们的插件根目录文件夹。
由于我们的插件可能一开始会依赖部分 npm 模块，所以需要初始化：
2、.json 简述
.json 是一个在插件根目录内的文件，里面包含了很多信息，相当于插件的身份证，其中最重要的三个配置是：
3、插件多语言
在开发中我们经常使用多语言，插件多语言怎么实现的呢？其实是靠一个放在插件根目录的 i18n 文件夹来实现，文件里面存放的文件名是语言代号，内容则是一个导出的对象。
插件多语言的基本使用方式是：
4、通过消息启动插件面板
首先我们要启动插件面板需要先注册一个菜单项，在 .json 的 .menu 里面，写入一个含有 path、label、 属性的数据。
这些内容代表了什么？
监听消息
我们可以在 .json 文件中的 . 中写入我们监听的消息名以及触发的方法数组。
我们所有的事件都是在 里面注册，这里的 open-panel 就是我们注册的事件， 是触发的方法名，由于没有指定面板名，所以触发的是 main 内的方法，接下来我们看看 方法做了什么。
看看回调做了什么
在 内我们调用了 .Panel.open，这就是打开面板的方法。.Panel.open 的参数为“扩展名 | 扩展名.面板名”。
到这里点击菜单后我们的插件面板就打开了。
5、插件面板的内容编写
首先是面板的一些基础属性，我们在 .json 内的 . 中定义：
面板如何展示内容控制？在 index.js 文件中我们导出的对象， 则为 html 内容，style 则为 css 内容。这块涉及的内容比较深，大家可以到论坛专贴查阅相关参考链接，做深入了解。
6、消息系统
前面我们说了怎么监听一个消息，下面我们来看看怎么发送消息。
发送消息一共有三个接口，发送、请求和广播，具体可参考官方文档。
查看默认定义的消息
打开菜单 开发者/消息列表 即可查看。
调试消息
消息管理器中的消息并不是编辑器全部存在的消息，那么怎么知道我们的操作触发了什么消息呢？就是使用消息调试工具，菜单 开发者/消息调试工具：
这样我们就能看到这个操作触发的所有消息，包括消息的参数内容。
7、场景脚本
简单来说，场景脚本就是和编辑器内脚本运行的环境处于同一进程的脚本。我们在需要调用引擎接口的时候需要用到它，比如加载资源、获取节点等等。
场景脚本在 .json 中的定义
场景脚本结构
和场景脚本通信
我们可以通过消息系统默认定义的消息进行通信：
8、配置系统
简单来说配置系统就是文件读写工具，用于编辑器环境下的文件读写。
我们可以无需任何前提条件在脚本内使用，但需要注意，我们没有写文件之前首次获取的值一定是 。我们可以通过 .json 来配置默认值。
9、插件编译
使用 ts 写插件自然需要将其编译为 js 才能使用。如何编译 ts 脚本呢？市场上有很多第三方编译器，这里我们选择通过 tsc（ 语言自带编译器）来进行编译。
我们可以在命令行输入以下命令进行脚本编译：
也可以配置脚本命令，在 内可以通过 ctrl + shift + p 来搜索并执行。
10、发布插件
插件开发完成后，我们就可以将其发布到 Cocos 商店了。发布前，建议大家先仔细阅读一下商店的插件类资源发布规范：
确认无误后登陆 Cocos 开发者中心：
点击商店 -> 卖家中心 -> 发布新资源。填写好后静待两三天审核时间，如有问题官方人员会联系你。
进阶
1、理解主进程和渲染进程
大家在接触插件开发的时候，可能有听说过主进程和渲染进程，但是并不太了解，那么它们是什么呢？
不同进程如何交互
进程间使用误区
2、使用 -plus
-plus 是一个 web 前端常用的 UI 组件库，Cocos 编辑器虽然也提供了一些插件 UI 组件，但是可能并不满足我们的需求，这时候就可以用 -plus。
3、html 和 css 调试技巧
插件开发时需要经常修改 html 与 css，又不想每次都要重新加载插件怎么办？
我们可以打开插件面板后点击插件面板，再按下 ctrl + shift + i 打开开发者工具，就可以在里面直接编辑 html 与 css 了，效果都是实时生效的，我们可以修改到预期效果再将其搬到插件源码内。
4、扩展
简单地说就是属性检查器面板内组件展示的内容。怎么定义 ？只需要在 .json 中的 中声明即可。
与组件数据交互
自定义了我们的组件属性面板展示，那么怎么与组件数据交互呢？有两种方式：
5、插件公共代码库
在插件开发过程中，我们可能会遇到几份插件都使用同一份代码的情况，这时候我们想要只保留一份公共代码，可以在插件根目录 . 中添加我们的公共代码库路径。
但是这样会使用有个问题，那就是插件编译后路径结构与之前不一致了。怎么解决呢？这里我写了一个小工具：插件编译器，可以自动修改 .json 中因为引用公共代码库导致的路径不一致问题，自动拷贝依赖的 npm 包到输出目录，输出 zip。
插件编译器-下载与使用：
深入
1、使用 制作插件 UI
看起来很复杂，实现起来其实并不难。插件面板也是一个 web 界面，而 web 界面是可以嵌入的，同时 Cocos 也可以输出 web 包，那么事情就很简单了。
通过 标签嵌入指定网址链接，即可实现插件面板展示 界面：
2、调试主进程代码
开发中有可能会遇到主进程报错，但是却无法调试的情况。那么我们该怎么调试主进程呢？
3、代码加密的方式
以上就是本次分享的全部内容，希望对大家有所帮助！最后推荐几款我发布在 Cocos Store 上的插件和源码，感兴趣的小伙伴可自行下载取用。
SDF 纹理生成工具：
根据节点名生成节点引用代码插件：
编辑器菜单扩展（插件使用）：
点击文末【阅读原文】前往论坛专贴，查看关于 Cocos 插件开发的更多内容，如有疑问，欢迎在帖子里与我交流！
相关文章
