Before writing an extension, we first need to understand the infrastructure of extensions within Cocos Creator.
The Cocos Creator editor is based on the Electron kernel from GitHub.
You can read Electron's introduction document for a more in-depth understanding of the features The relationship between the main process and the rendering process in Electron.
To put it simply, the main process in Electron is equivalent to a Node.js server application, while each window (rendering process) is equivalent to a client-side web application.
The Cocos Creator editor follows the structure of Electron's main process and rendering process. So when the extension is started and run inside the editor, the main defined by the extension is actually started in the main process, while the panels defined by the panels are started in the rendering process. The process structure is briefly summarized as follows.
Inter-process communication is actually the process of sending a message in one process and listening to it in another process.
Electron provides modules
ipcRenderer for inter-process communication to help us with this task.
Since these two modules only perform very basic communication functions and do not satisfy the communication needs between the editor, extension panel and the main process, Cocos Creator wraps this and extends the method of sending and receiving messages between processes to make it easier for extension developers and editor developers to create more complex scenarios. For more details, please see the documentation Message System.
Capabilities of extensions
With a full Node.js environment inside the extension, it is easy to use the large number of tools available on the npm marketplace for the functionality you want.
If you need to interact with other features, you need to open up the corresponding operation messages for the corresponding features, and we do this within our own extension, via Message System to trigger, query and process functions or data in the editor.
The list of opened messages can be viewed in the top menu Developer -> Message Manager panel, as shown below.