Load HTML fragments into Electron


I’m trying to develop an Electron application that supports a basic plugin architecture. The main.js process loads a basically empty page, except for some kind of header section for title and a drop-down menu for each plugin.

Each plugin has its own renderer.js file, configuration data etc. It also provides the necessary HTML to display the div#plugin-container. I’m hoping to have the renderer process load the HTML fragment into the existing web page inside the aforementioned div.

The win.loadURL() is for the main.js only and it loads an HTML to fill in the whole window. I’m looking to load a fragment into an existing page. jQuery has the $('div#plugin-container').load() method that would do what I need, but it’s loading HTML from a server only, as far as I can see.

Any ideas?


I made something similar some time ago

In the index.html of the app i added a script tag which points to an external js file( which isn’t in the app.asar)
and that js file would be edited by plugin makers or plugin setups using a set of API s made by me


pm me on Discord if you can’t understand what I said


Thanks @andr3w_001. I think I understand what you mean. Can you elaborate where or how you would host the external JavaScript code? My current problem is that I’d like to distribute the HTML files inside the app.asar, but can’t seem to find a way to load it from within the app (or from disk, during the development phase).


i made a full example using the electron-quick-start template
it’s a bit different from what I explained you up there but it will work
here’s the link:

ps: I tried to comment it as much as possible

Have a nice day