扩展编辑器

在文档 入门示例-菜单 中讲解了怎么创建一个最简单的扩展，接下来我们看看如何创建一个面板并与之通信。

在 Cocos Creator 中创建面板最快捷的方式是通过 包含面板的扩展模板 创建，如下图所示：

点击 创建扩展 按钮后，可以在项目根目录下找到 extensions/first-panel 扩展。

在命令行工具中，定位到 extensions/first-panel 目录，并执行以下语句：

命令执行完成后，回到 扩展管理器 中，找到 first-panel 扩展，启用并刷新，如下图所示：

启用并刷新插件后，可以在 面板（Panel） 菜单中找到如下图所示的菜单项：

点击 默认面板（Default panel） 菜单项，即可弹出如下所示面板：

本示例还在 开发者（Developer） 菜单中定义了另一个用于通信的菜单项，如下图所示：

点击上图中红色方框所示的 发送消息给面板（Send message to Default Panel） 按钮后，可以看到面板上显示的内容会发生改变。

注意：如果没有显示该菜单，请打开 扩展管理器 面板，并确认该插件已启用。

接下来，我们逐一讲解面板目录结构、定义与通信机制。

在项目所在目录，找到 ./extensions/first-panel 文件夹，即可以总览整个插件的目录：

如上图所示，比 hello-world 多出了 static 和 panels目录。

static - 用于存放面板布局文件，如 css\html 等。

panels - 用于存放面板相关的源代码，每一个面板有一个 index.ts 入口源文件。

index.ts、style、template 请参考文档 编写面板

在理解面板之前，我们先看看 package.json 中，面板相关的定义，如下所示：

panels：{} - 本扩展中定义的面板

panel 详细的面板讲解，请参考文档 面板系统。

i18n 为多语言配置，请参考文档 多语言系统(i18n)。

messages 完整的消息定义机制，请参考文档 自定义消息。