Want to make a gadget with Electron? This may be the ultimate version

The story background

I have seen on the Internet that many partners have implemented many useful desktop tools based on Electron. For example, Picgo, a map bed management tool, specializes in making map bed tools. There are other similar widgets, like Saladict-Desktop, which is a desktop app for salad translation, and ColorPicker, which is a desktop tool for salad translation…

We also refer to the design concept of these small tools, and try to make a desktop tool in the company to solve the use problems in common scenarios such as network capture package, agent, chart bed, performance evaluation and so on. Finally, in the promotion of a more serious problem, is that many small tools for specific users do not need. For example, the test only needs to use the network capture packet, proxy function, other functions do not care. At this point, you need to design a desktop application, similar to the App Store, you can download and install whatever you use. This requires the implementation of the desktop side of the plug-in application.

As a result, we saw that UTools is a desktop application that supports plugins, but the premise was that our plug-in had to be released to the UTools plugin market in order to achieve the function of multi-terminal synchronous download. However, some of the internal tool libraries involved security information and could not be released to the UTools plugin. So we were very keen to have an internal toolkit similar to UTools.

In order to further improve the development efficiency, we recently developed an open source toolkit based on Electron, which is comparable to UTools. Not only is the toolkit open source, but the most important thing is that you can use all the open source plug-ins in the UTools ecosystem! This is a huge power and means that all the plugins in the UTools ecosystem can be used in Rubick without differentiation.

Code warehouse: https://github.com/clouDr-f2e/rubick

The journey of plug-in

When I first thought of doing plug-in, it was nothing more than using Electron’s WebView capability to realize the way similar to native embedded H5. H5 pages can be independently published, and native NativaAPI providers can bridge and call native methods through JSBridge. It worked, and we tried it once. The final idea is roughly as follows:

Electron webview way

1. Use WebView in Electron

<webview src="https://xxx.xx.com/index.html" preload="preload.js" />

2. Implement`bridge`

// preload.js
window.rubickBridge = {
  sayHello() {
    console.log('hello world')
  }
}

3. Plug-in help`bridge`call`electron`The ability to

< HTML > < body > < div > this is a plug-in < div > < / body > < script > window. RubickBridge. SayHello () < / script > < / HTML >

4. Communication

Since proload.js belongs to the Renderer process of Electron, if you want to use some of the main process’s capabilities, you will need to use a communication mechanism:

// main process
ipcMain.on('msg-trigger', async (event, arg) => {
    const window = arg.winId ? BrowserWindow.fromId(arg.winId) : mainWindow
    const operators = arg.type.split('.');
    let fn = Api;
    operators.forEach((op) => {
      fn = fn[op];
    });
    const data = await fn(arg, window);
    event.sender.send(`msg-back-${arg.type}`, data);
});
  
// renderer process
ipcRenderer.send('msg-trigger', {
  type: 'getPath',
  name,
});
ipcRenderer.on(`msg-back-getPath`, (e, result) => {
  console.log(result)
});

Why then did we give up the road 🤔?

In fact, the above idea is generally no problem, we also based on the above idea to successfully extract the function into the plug-in, according to the plug-in way to install and load. Until we noticed the power of UTools, we felt that the UTools ecology was very rich, and that we could only integrate the generation of UTools. So we’re on his or her rule, and we’re trying to be him. However, UTools itself is not open source, so there is no way to absorb some good code implementation, but we can see the official documentation.

We found that most of the UTools plugins are separate from the Container layer, which means that UTools is just a container for plugins, providing API capabilities and methods for plugins. So once we’ve implemented UTools’ ability to load plug-ins, implementing all the API functions of UTools, isn’t that roughly equivalent to implementing UTools! So we can use the UTools plugin, right?

Utools way

According to the UTools documentation, first we need to implement a plugin. We must have a plugin.json, which is the information that tells the UTools plugin. Let’s also follow the documentation:

{"pluginName": "HelloWorld ", "description":" My first UTools plugin ", "main": "index.html", "version": "0.0.1", "logo": "Logo. The PNG" and "the features" : [{" code ":" hello ", "explain" : "hello world", "CMDS" : [" hello ", "hello"]}]}

The next step is to use utools to run the plugin. According to the utools interaction, copy plugin.json into the utools search box. We can also implement:

// listen to input change const fileUrl = clipboard.read(' public-file-url ').replace('file://', '); If (fileUrl && Value === 'plugin.json') {// Read plugin.json const config = JSON.parse(fs.readFileSync(fileUrl, 'utf-8')); const pluginConfig = { ... Config, // index. HTML file location for WebView to load sourceFile: path.join(fileUrl, '.. /${config.main || 'index.html'}`), id: uuidv4(), type: 'dev', icon: 'image://' + path.join(fileUrl, `.. /${config.logo}`), subType: (() => { if (config.main) { return '' } return 'template'; ()}}); }

The effect is as follows:

The next step is to do the command search plug-in:

To achieve this function is to traverse the features in the pluginConfig previously stored, find the corresponding CMD and display it in the drop-down box.

Then we’re going to implement the selection function, the ability to load a page with a WebView:

<template>
  <div>
    <webview id="webview" :src="path" :preload="preload"/>
  </div>
</template>
<script>
export default {
  data() {
    return {
      path: `File://${this.$route.query.sourceFile}`,
      preload: `File://${path.join(__static, './preload.js')}`,
      webview: null,
      query: this.$route.query,
      config: {}
    }
  }
}
</script>

Is this the end of it? No!! For the sake of space, we’ll come back to this later. A copy of the plugin demo uploaded lot: https://github.com/clouDr-f2e…

Current Support Capability

Load the utools ecological plug-in

Take the open source bucket plug-in on GitHub for example. To load bucket plug-in, you just need to clone the code and copy the plugin.json into the search box to use

Bucket: https://github.com/vst93/dout…

The panel

Long press the right mouse button, you can call up the super panel, you can select the content according to the current mouse, match the corresponding plug-in capabilities. For example, long press right click after currently selecting a picture, and the Upload Graph Bed plugin will be called up:

The template

To better match the plug-in capabilities of UTools, you need to implement the template functionality, which is a built-in UI-style functional plug-in.

UTools comes with system commands

The color

screenshots

Global shortcuts

The last

Currently Rubick has implemented most of the core capabilities of UTools, and most importantly can use all of UTools Ecology! Go to GitHub for more. If you find it helpful, do a backhand with a star ✨

Rubick github