NativeImage not working in setOverlayIcon() in Electron

Question

I'm trying to make a numeric badge for my app's taskbar icon (Windows 10). I've used this code as a starting point and modified it a bit. After creating the badge, I've used the following to set it in the renderer process:

var electron=require('electron'),
    remote=electron.remote,
    nativeImage=electron.nativeImage;

...

var win=remote.getCurrentWindow();

...

var badgeDataURL=canvas.toDataURL();
var img=nativeImage.createFromDataURL(badgeDataURL);

win.setOverlayIcon(img,''+n);

Running this gives me the following error:

Uncaught Error: Could not call remote function 'setOverlayIcon'. Check that the function signature is correct. Underlying error: Error processing argument at index 0, conversion failure from #<Object>
Error: Could not call remote function 'setOverlayIcon'. Check that the function signature is correct. Underlying error: Error processing argument at index 0, conversion failure from #<Object>
    at callFunction (A:\electron\resources\electron.asar\browser\rpc-server.js:235:11)
    at EventEmitter.<anonymous> (A:\electron\resources\electron.asar\browser\rpc-server.js:342:5)
    at emitMany (events.js:127:13)
    at EventEmitter.emit (events.js:201:7)
    at WebContents.<anonymous> (A:\electron\resources\electron.asar\browser\api\web-contents.js:231:13)
    at emitTwo (events.js:106:13)
    at WebContents.emit (events.js:191:7)metaToValue @ A:\electron\resources\electron.asar\renderer\api\remote.js:217remoteMemberFunction @ A:\electron\resources\electron.asar\renderer\api\remote.js:113electronSetBadge @ app.js:81updateBadge @ app.js:156initClick @ app.js:183(anonymous function) @ app.js:203dispatch @ jquery-1.12.4.min.js:3r.handle @ jquery-1.12.4.min.js:3

I've tried the following:

• different versions of Electron (1.4.13 and 1.2.8)
• testing the contents of badgeDataURL and img and it's a valid image
• testing setOverlayIcon with a static image: win.setOverlayIcon(__dirname+'/pics/badge.png',''+n) (and it works)
• win.setOverlayIcon(null,'') also works

Although the documentation says that setOverlayIcon expects the first parameter to be of the NativeImage type I haven't been able to find a working example anywhere. Any ideas?

Answer 1

For me, setOverlayIcon needed to be run from the main process. Here is what fixed it on my side:

In my renderer process:

ipcRenderer.send('update-badge', canvas.toDataURL())

And in my main process:

ipcMain.on('update-badge', (event, data) => {
    let img = nativeImage.createFromDataURL(data)
    win.setOverlayIcon(img, 'description')
}