Create webview context menu

Yesterday I’ve started playing with Electron and now I’m trying to create a context menu in a webview.

The example from the doc works great for the browserWindow, but I don’t know how to get any info for the elements in the webview (ex. copy selected text or something similar):

const remote = require('electron').remote;
const Menu = remote.Menu;
const MenuItem = remote.MenuItem;

var menu = new Menu();
menu.append(new MenuItem({ label: 'MenuItem1', click: function() { console.log('item 1 clicked'); } }));
menu.append(new MenuItem({ type: 'separator' }));
menu.append(new MenuItem({ label: 'MenuItem2', type: 'checkbox', checked: true }));

window.addEventListener('contextmenu', function (e) {
}, false);

Any help would be greatly appreciated.

p.s. sorry for my bad English.


Actually I’ve found one way to do it by using the preload attr of the webview and place the above code in a separate file (eg. test.js):

<webview id="webview" src=""  preload="./test.js"></webview>

But I’m not sure if this is a good practice. Is there any other options to get info of the webview content?

1 Like

Sorry I can’t help with your issue but your post helped me sort my menu out. The online example at failed to work as it seems a few issues in the documents aren’t correct.


click() { } should be click: function() { }


require('electron') needed to be require('electron').remote

So thanks for posting :smile_cat:

thank you so much. your answer helps me a lot