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

Each plugin has its own renderer.js file, configuration data etc. It also provides the necessary HTML to display inside 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.

I understand that 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. And I want to load it from within the Electron application.

Any ideas?

Disclosure: I posted this message previously on the Atom discussion board here, but hope to get a better response from the SO munity.

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

Each plugin has its own renderer.js file, configuration data etc. It also provides the necessary HTML to display inside 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.

I understand that 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. And I want to load it from within the Electron application.

Any ideas?

Disclosure: I posted this message previously on the Atom discussion board here, but hope to get a better response from the SO munity.

• javascript
• electron

• are you open to frameworks like react? – Rhayene Commented Mar 22, 2018 at 9:55
• @Rhayene funny you should ask that question, I had a paragraph in my initial question saying that I'd like to avoid react and similar frameworks as to not add to the stuff I have to learn. I may get there in the end though. :-) – jfix Commented Mar 23, 2018 at 18:00
• hey, how do you dynamically execute plugins' renderer.js scripts? – VIPPER Commented Aug 29, 2019 at 22:30
• @VIPPER have a look here, not sure if it answers your question: github./jfix/pac-toolkit - I haven't looked at this code for a while. – jfix Commented Aug 31, 2019 at 14:16

1 Answer 1

Whatever way you access the HTML you can always render it in your page if you parse it as a string. If you want to read from a file you can do something like:

const fs = require('fs')

fs.readFile('path/to/thehtml.html', (err, data) => {
   document.getElementById('some-element').innerHTML = data
})

If you want the user to select the file you should use Electron's dialog API which allows you to prompt the user with a dialog for choosing a file. Or you could have an input where they can enter the text and read from there.