如何在Electron应用中实现插件？

Question

我正在寻找一种实现电子工具“插件”的方法。

下面是我认为它将如何工作的伪示例

提供.js / .zip / plugin文件

文件将包含插件名称及其类别（全局，以团队为中心，其他）

文件将包含用于GUI的HTML，并将其放在为工具空间指定的div中。此名称将作为选项添加到必要的Select中，并添加逻辑以将HTML拉入同一div

在该工具中，选择插件文件：     页面将加载JavaScript脚本，并添加选项以进行选择以及切换到插件的逻辑

希望是使我当前的流程自动化。 目前，我正在手动更新索引页面以引用新的JavaScript脚本，并在选择页面上添加选项 JavaScript脚本中的逻辑是查看“选择”，然后查看是否选择了该选项。 然后通过其中的一个函数提取自己的HTML

有什么可以参考/利用的东西吗？

Answer 1

经过4个多月的研究，我设法使它起作用。我将尝试概述我的方法。

• 每个“插件”或“工具”都需要它自己的.js文件
• js文件应包含一个export.html函数，该函数将返回该工具的html
• js文件应包含export.Events函数，该函数将添加所有相关的事件侦听器
• 创建一个对每个工具进行分类的json文件，以及所需的信息，例如描述，图像路径，.js文件路径等。
• 选择时需要.js文件，加载html和事件
• 解析json以确定要加载的工具以及所需的信息

我要做的就是更新json文件并上传.js文件以添加新的插件。

Answer 2

我开发了一个以vue为前端的电子应用程序。

我的想法是将插件开发为vue插件并通过npm发布。

我使用live-plugin-manager安装和卸载插件。

使用计数器自动删除依赖项

我唯一遇到的问题是如何将这些已安装的插件加载到主应用程序中。

我在How to use electron to load the vue plugins installed dynamically into a plugins folder

上发布了我发现的解决方法，作为对自己问题的解答。

希望有帮助

Answer 3

我知道我参加聚会有点晚了，但是我遇到了同样的问题。为了解决这个问题，我为Electron建立了一个名为Pluggable Electron的插件框架，该框架在npm上可用。

该框架处理插件的生命周期，以npm软件包的形式提供，例如安装，激活，删除等。然后可以随时调用插件以扩展核心应用程序功能。

该框架仍在开发中，但是您可以在此处找到第一个版本：pluggable-electron。

我希望对Marker来说为时已晚，但仍然在这里为其他可能有此问题的人回答。