CODEWITHSUNDEEP
javascriptnode.jselectron
Chris Schmitz
Chris Schmitz

Reputation: 20940

Electron channel messages initiated from the main process not received by the renderer process

I'm building an electron app that has a OS tray menu.

tray menu

In the main process I want to listen for clicks to the "About" menu item and then notify the renderer process so that it can update the window's view accordingly.

Here's the parts of my main process when I'm rendering the window and the tray menu:

const {app, BrowserWindow, Menu, Tray} = require('electron')
const appConfig = require('./appConfig')
const ipc = require('electron').ipcMain
const path = require('path')
const config = require('../config')

let win, tray

function createWindow(){
    win = new BrowserWindow({
        height: appConfig.window.height,
        width: appConfig.window.width
    })

    win.loadURL(`file://${__dirname}/client/index.html`)

    if(appConfig.debugMode){
        win.webContents.openDevTools()
    }

    win.on('closed', () => {
        win = null
    })
}

function setTrayIcon(){
    tray = new Tray(path.resolve(__dirname, './assets/rocketTemplate.png'))
    tray.setToolTip('Launch applications by group')

    let menuitems = config.groups.map(group => {
        return {label: `Launch group: ${group.name}`}
    })
    win.webContents.send('ShowAboutPage' , {msg:'hello from main process'});
    win.webContents.send('ShowAboutPage')

    menuitems.unshift({type: 'separator'})

    // Here where I add the "About" menu item that has the click event listener
    menuitems.unshift({
        label: 'About AppLauncher',
        click(menuitem, browserWin, event){
            // sending a log to the console to confirm that the click listener did indeed hear the click
            console.log('about menu clicked')
            win.webContents.send('ShowAboutPage')
        }
    })
    menuitems.push({type: 'separator'})
    menuitems.push({label: 'Quit AppLauncher'})

    const contextMenu = Menu.buildFromTemplate(menuitems)
    tray.setContextMenu(contextMenu)
}

app.on('ready', () => {
    createWindow()
    setTrayIcon()
})

And here's the renderer script that should be listening for the channel message: 

const Vue = require('vue')
const App = require('./App.vue')
const ipc = require('electron').ipcRenderer

ipc.on('ShowAboutPage', () => {
    console.log('show about fired in store')
    alert('show about fired in store')
    this.notificationMessage = 'Show about page'
})


require('./style/base.sass')

new Vue({
    el: '#app',
    render: h => h(App)
})

When I click the "About" menu in the tray, I get the console.log output from the main process, but I never receive the console.log or alert in the renderer process.

My app only ever has one window (as evidenced by the nullification of the win variable on window close) so it doesn't seem like an issue where I'm sending the message to the wrong renderer process.

I looked through the electron documentation on using webContents to send messages to renderer instances and it seems like my code is structured correctly, but obviously I'm missing something.

Any ideas?

Upvotes: 0

Views: 1067

Answers (1)

DavidTheWin
DavidTheWin

Reputation: 208

Try rewriting your renderer script as

const { ipcRenderer } = require("electron");
ipcRenderer.on("ShowAboutPage", () => {
    //etc
});

Upvotes: -1

Related Questions