Panel and extension communication

    The most common example is that a panel is dragged and docked to the main window. At this time, the panel will be closed first and then reopened in the main window. If the data in the memory used on the panel is not stored and backed up, it will be lost with restart.

    At this time, a certain degree of data interaction is required with the extended main body.

    Before reading this chapter, please review the Message System documentation.

    First, define a :

    1. exports.methods = {
    2.     saveData(path, data) {
    3.         // Cache it after receiving the data
    4.         this.cache[path] = data;
    6.         const result = this.cache[path];
    7.         delete this.cache[path];
    8.         return result;
    9.     },
    10. };
    12. exports.unload = function() {};

    Last, define the main file of the panel:

    Send a message

    After defining the extension and the panels in the extension, we can try to trigger these messages.

    Press ctrl(cmd) + shift + i to open the console. Open the panel in the console:

    1. // Default can be omitted, if the panel name is not default, you need to fill in'hello-world.xxx'
    2. Editor.Panel.open('hello-world');

    After opening the panel, the console will print out a sentence:

    1. 1, 0

    Because when the panel is closed, two messages are sent:

    Through these two messages, the Message system first saves the data to the extension process according to the upload definition in messages "methods": ["saveData"].

    When opening the panel again, use the following code to query for the data you just saved, initialize the interface, and print to the console.

    1. const tab = await Editor.Message.send(packageJSON.name, 'query', 'tab');

    At this point, we have completed an interaction between the panel and the extension process.