Communicate with the Panel
In general, the interaction model is dominated by extension process and panel for data presentation. Similarly to the traditional Web, the plug-in function is the server side, and the panel function is the browser on the client's computer.
In this case, there is usually no direct data sent to the panel, the majority is some state synchronization, just using broadcast to broadcast.
But for simple extensions, or extensions to the browser environment, the actual functionality may be on the panel, and a request needs to be sent to the panel.
Some level of understanding of the Message System is required before reading this section.
Define methods on extensions and panels
First we define the file: package.json
{
"name": "hello-world",
"panels": {
"default": {
"title": "hw",
"main": "./panel.js"
}
},
"contributions": {
"messages": {
"console": {
"methods": ["default.console"]
}
}
}
}
The method name defined by methods in messages.console
is default.console
. Represents a console method issued to the default
panel. (to send to the plug-in process, fill in methdName
directly)
Then define the panel.js
file of the panel:
exports.template = '';
exports.style = '';
exports.methods = {
console(str) {
console.log(str);
},
};
exports.ready = async function() {};
exports.close = function() {};
Send a message
Once we have defined the extension and the panels within the extension, we can try to trigger these messages.
Press CTRL (CMD) + Shift + I to open the console. Open the panel in the console:
Editor.Panel.open('hello-world');
Editor.Message.send('hello-world', 'console', 'log');
When the Hello World plug-in receives a message, it passes it to the methods.console
in panel.js
for processing.
The result is printing a string to the log on the console.