executeJavaScript gives no errors but won't ex

Question

Okay, as I understand things this should execute the code specified inside executeJavaScript() inside my renderer process. When I include only a console.log() to be executed, things work flawlessly and I see the output inside the developer console. My question then is, what might be causing this to not execute? I've tried adding a console.log() outside of my conditional and still nothing nothing appears inside developer console. What's more depending on where I insert the console.log() errors are thrown telling me there's an unknown identifier.

Without posting the rest of my project, is there anything obviously wrong or broken about my understanding of this function? This seems like it should be pretty straight forward.

const electron = require('electron')
const remote = require('electron').remote
const ipc = require('electron').ipcRenderer
const url = require('url')
const path = require('path')
const app = electron.app
const BrowserWindow = electron.BrowserWindow



var MainWindow;
app.on('ready', function()
{
    MainWindow = new BrowserWindow({
        width: 1024, 
        height: 768, 
        backgroundColor : '123355',
        frame: false,
        resizable: true,
        movable: true,
        show: false
    })
    var win = MainWindow.webContents


    MainWindow.on('ready-to-show', () => {
        MainWindow.show()
        console.log('Ready to go!')
    })

    MainWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true

    }))


        win.executeJavaScript("document.onreadystatechange = function ()" +
        "{" +
                "document.getElementById('minimize-app').addEventListener('click', function (e) {" +
                    "var window = BrowserWindow.getFocusedWindow();" +
                    "window.minimize();" +
                "});" +
                "document.getElementById('maximize-app').addEventListener('click', function (e) {" +
                    "var window = BrowserWindow.getFocusedWindow();" +
                    "window.maximize();" +
                "});" +
                "document.getElementById('close-app').addEventListener('click', function (e) {" +
                    "var window = BrowserWindow.getFocusedWindow();" +
                    "window.close();" +
                "});" +
        "}"
        );


});

Answer 1

You should call this when DOM is ready (that is 'dom-ready')

const {app, BrowserWindow} = require('electron')
const path = require('path')

let mainWindow = null
app.once('ready', () => {
  mainWindow = new BrowserWindow({})
  const executeOnHTML = () => {
    mainWindow.webContents.executeJavaScript(`
      document.getElementById('minimize-button').addEventListener('click', function (e) {
        const { remote } = require('electron')
        var window = remote.BrowserWindow.getFocusedWindow()
        window.minimize()
      })
    `)
  }
  mainWindow.webContents.once('dom-ready', executeOnHTML)
  mainWindow.loadURL(path.join(__dirname, 'index.html'))
})

---

Also, there are a lot of different ways to do the same instead of putting everything in one file.

• You can define HTML behavior in a js referred from HTML (<script src=...>)
• You can use IPC to communicate between Main and Renderer process

I also suggest you to read about electron's Processes