Create webview context menu


#1

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) {
  e.preventDefault();
  menu.popup(remote.getCurrentWindow());
}, false);

Any help would be greatly appreciated.

p.s. sorry for my bad English.


#2

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="http://google.bg"  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?


#4

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

eg.

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

and

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

So thanks for posting :smile_cat: