How to enable webview context menu? about electron-context-menu HOT 17 CLOSED

TypeError: win.addEventListener is not a function
    at module.exports (/home/polv/projects/zhquiz/submodules/e-zhquiz/node_modules/electron-context-menu/index.js:367:8)
    at App.eval (webpack:///./src/background.ts?:32:86)
    at App.emit (events.js:315:20)
    at Object.b._init (electron/js2c/browser_init.js:157:11741)
    at Object.create (electron/js2c/browser_init.js:157:12444)
    at electron/js2c/browser_init.js:177:2680
    at electron/js2c/browser_init.js:177:3904
    at electron/js2c/browser_init.js:177:2217
    at electron/js2c/browser_init.js:189:579
    at Object.<anonymous> (electron/js2c/browser_init.js:157:9339)

const { app, BrowserWindow} = require('electron');
const contextMenu = require('electron-context-menu');

contextMenu({
	
	labels: {
		cut: 'Cut',
		copy: 'Copy',
		paste: 'Paste',
		save: 'Save Image',
		saveImageAs: 'Save Image As…',
		copyLink: 'Copy Link',
		saveLinkAs: 'Save Link As…',
		inspect: 'Inspect Element'
	},
	prepend: () => [
		{
			label: 'Arxstd',
		},
		{
			label: 'back',
		},
		{
			label: 'Forward',
		},
		{
			label: 'Reload',
		},
		{
			type: 'separator'
		},
		{
			type: 'separator'
		},
		{
			type: 'separator'
		},
		{
			type: 'separator'
		}
	],
	append: () => { },
	showCopyImageAddress: true,
	showSaveImageAs: true,
	showInspectElement: true,
	showSaveLinkAs: true,
	cut: true,
	copy: true,
	paste: true,
	save: true,
	saveImageAs: true,
	copyLink: true,
	saveLinkAs: true,
	inspect: true
});



let mainWindow;
(async () => {
	await app.whenReady();

	mainWindow = new BrowserWindow({		
		webPreferences: {
			spellcheck: true,
			webviewTag: true,
		}
	});
	mainWindow.loadFile('index.html')
})();


const dispose = contextMenu();

dispose();

var menu = new Menu();

//Basic Menu For Testing
menu.append(new MenuItem({ label: 'MenuItem1', click: function() { console.log("YES"); 
} }));
menu.append(new MenuItem({ type: 'separator' }));
menu.append(new MenuItem({ label: 'MenuItem2', type: 'checkbox', checked: true }));
app.on("web-contents-created", (...[/* event */, webContents]) => {

//Webview is being shown here as a window type
console.log(webContents.getType())
webContents.on("context-menu", (event, click) => {
  event.preventDefault();
  console.log(webContents.getType())
  menu.popup(webContents);
}, false);
});

const template = [
	{
    label: '🛠️',
    submenu: [
      { 
		label: '↻ Refresh',
		 accelerator: 'F5',
		 click: (menuItem, browserWindow, event) => {
		 win.reload();
		 }
	  },
      { label: '👨‍💻 openDevTools',
		 accelerator: process.platform === 'darwin' ? 'Alt+Cmd+I' : 'Ctrl+Shift+I',
		 click: (menuItem, browserWindow, event) => {
		 win.webContents.openDevTools()
		 }
	  },
      { type: 'separator' },
      { label: '🚪 exit',
		role: 'quit',
		accelerator: 'Alt+F4'
	  }
    ]
  }
]
	const menubar = Menu.buildFromTemplate(template)

//Webview is being shown here as a window type
console.log(webContents.getType())
webContents.on("context-menu", (event, click) => {
  event.preventDefault();
  console.log(webContents.getType())
  menubar.popup(webContents);
}, false);
});