Panel and extension communication

Some useful tools or simple functions can be written directly on the panel, but the panel is not a reliable data storage location. The window may be closed at any time, and the panel will also be closed.

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.

Define the method of extending the top and panel

First, define a package.json:

  1. {
  2.     "name": "hello-world",
  3.     "main": "./browser.js",
  4.     "panels": {
  5.         "default": {
  6.             "title": "hw",
  7.             "main": "./panel.js"
  8.         }
  9.     },
  10.     "contributions": {
  11.         "messages": {
  12.             "upload": {
  13.                 "methods": ["saveData"]
  14.             },
  15.             "query": {
  16.                 "methods": ["queryData"]
  17.             }
  18.         }
  19.     }
  20. }

Second, define the extended main file browser.js:

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

Last, define the main file of the panel:

  1. exports.ready = async () => {
  2.     const tab = await Editor.Message.request('hello-world', 'query', 'tab');
  3.     const subTab = await Editor.Message.request('hello-world', 'query', 'subTab');
  5.     // Print the queried data
  6.     console.log(tab, subTab):
  7.     // TODO uses these two data to initialize
  8. };
  9. exports.close() {
  10.     // Upload the data to the extension process after receiving the data
  11.     Editor.Message.send('hello-world', 'upload', 'tab', 1);
  12.     Editor.Message.send('hello-world', 'upload', 'subTab', 0);
  13. };

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. undefined, undefined

This is because the data has not yet been submitted. Now, close this panel and open it again. At this time, the console prints out the data:

  1. 1, 0

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

  1. Editor.Message.send('hello-world', 'upload', 'tab', 1);
  2. Editor.Message.send('hello-world', 'upload', 'subTab', 0);

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('hello-world', 'query', 'tab');
  2. const subTab = await Editor.Message.send('hello-world', 'query', 'subTab');

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