preface

One day, I was copying and pasting code back and forth between projects. Switching from editor to editor was so tedious that I thought, “It would be so much easier to write a tool that would copy everything and then copy it out one by one.”

At this point, the tester came to my side and saw that the pad on my computer desk was full of tasks. He wants one. Let me open it for him. Turns out he doesn’t have his own notepad on his computer.

Without further ado, I immediately wrote a simple gadget in electron called iHelper, which contains several small functions: notes, clipboard notes, to-do lists… .

After iHelper finished, I sent it to my colleague for use. At this time, T colleague said, “I also want to write something. Can I add it to your iHelper?”

“Of course you can.” Just as I was about to add colleagues to the repository, I thought, “What if iHelper can run other people’s Web projects, like applets. By adding a Web project as a plug-in to the software and running it, can you get more people on the front end involved and add the tools they want?”

Instead, iHelper became a plugin platform for uploads, downloads, and installs. And split the original feature notes, clipboard notes, and to-do lists into separate Web projects. Publish as a freely downloadable plug-in to iHelper’s plug-in store. Use this as a learning project and document and share your progress.

iHelper

IHelper is a plug-in toolkit that includes plugins for work. It supports download, install, upload, and pack plugins.

In iHelper, all plug-ins are a single Web project. Each Web project has a plugin.json configuration file that describes the information for this plug-in. When you download a plug-in from iHelper, you actually download the plug-in project’s packaged resource file from a remote server and load the plug-in into iHelper according to its configuration.

When you run the plug-in, iHelper opens a new application form. It is loaded according to the plugin.json specified access entry file. This completes the plug-in effect of the project.

Downloads/Documents

IHelper project repository

IHelper plugin repository

IHelper document address

IHelper installation package download address (Github)

IHelper installation package download address (gitee, domestic faster)

Technology selection

The desktop application framework Electron + Typescript

Node.js database nedb

Rendering process framework Vue3 + Typescript

UI framework Element – plus

The back-end NestJS

The function point

  • Plug-in added, plug-in started
  • Plug-in running, plug-in form management
  • Plug-in version Management
  • Plug-in developer mode, API, database support
  • Plug-in reloading, plug-in packaging, plug-in publishing
  • Install the third-party plug-in package
  • Plug-in download, plug-in installation, plug-in update
  • The plugin Settings
  • User account login and registration
  • Application Settings, shortcut key management
  • Applying the update
  • Apply general functions (drag, zoom, minimize, tray, exit…)

Application function concept

Plug-ins are web applications written by other developers that can add, package, publish, install, and run plug-insCopy the code

Benefits of integrating applications into a plug-in system:

  1. The toolkit integrates various plug-ins to avoid installing multiple software and occupying too much space on the computer
  2. The plug-in is small in size and fast in updating efficiency
  3. The unified API makes it easy for plug-ins to execute system interaction logic

In the course of project development, other dependent projects are also opened source

  1. Clipboard monitor tool – electron clipboard- Observer
  2. Vue3 right menu library — vue3-context-menu

The last

Originally, I wanted to write this project into a more perfect plug-in tool and use it in the actual work, but I found that there was a very perfect and powerful plug-in application (UTools) in the half of development. After downloading it, I found that this tool was too comprehensive and easy to use. I recommend you to use it as a productivity tool.

Now I am using UTools to assist my daily work, and I will continue to write iHelper. I will keep learning and try to complete my own projects with my own knowledge. ง ง, ̀ _, (́)

If you want to learn about the electron/vue3/ plug-in system integration project, hopefully this project code and subsequent articles will help you.

IHelper’s development process will be summarized and shared in several subsequent articles as a learning summary

  1. Set up the project directory architecture of iHelper
  2. Add-ons and developer mode features
  3. Plug-in download, installation, version management
  4. App Settings, plugin Settings, shortcut key management, App updates, general functions
  5. . (More to add)