I have a Electron based browser like application which requires rendering of client applications. I was tempted to use electron's webivew to render my apps but they are not remended and also disabled by default. Also because of chromiums OOPIF (Out of process IFrames) architecture behind webviews its no longer possible to capture keyboard and mouse events which are critical to my application.

So I am using the newer BrowserView api and using it to render my client web applications. But sadly I could only capture keyboard events using before-input-event event.

This is a sample of my code.

let mainWindow = null;

app.on('ready', () => {
  mainWindow = new BrowserWindow({ show: false });
  mainWindow.setBounds({ x: 0, y: 0, width: 800, height: 600 })
  mainWindow.once('ready-to-show', () => {
    mainWindow.show();
  });

  let view = new BrowserView()
  mainWindow.setBrowserView(view)
  view.webContents.loadURL('')
  view.webContents.on('before-input-event', (event, input) => {
    console.log(event, input);
  });
});

I looked into electron's github issues and the official documents as well but couldn't find anything. Has anyone found a way to capture the mouse events as well from inside of a BrowserView ? Any help would be very appreciated.

I have a Electron based browser like application which requires rendering of client applications. I was tempted to use electron's webivew to render my apps but they are not remended and also disabled by default. Also because of chromiums OOPIF (Out of process IFrames) architecture behind webviews its no longer possible to capture keyboard and mouse events which are critical to my application.

So I am using the newer BrowserView api and using it to render my client web applications. But sadly I could only capture keyboard events using before-input-event event.

This is a sample of my code.

let mainWindow = null;

app.on('ready', () => {
  mainWindow = new BrowserWindow({ show: false });
  mainWindow.setBounds({ x: 0, y: 0, width: 800, height: 600 })
  mainWindow.once('ready-to-show', () => {
    mainWindow.show();
  });

  let view = new BrowserView()
  mainWindow.setBrowserView(view)
  view.webContents.loadURL('https://electronjs')
  view.webContents.on('before-input-event', (event, input) => {
    console.log(event, input);
  });
});

I looked into electron's github issues and the official documents as well but couldn't find anything. Has anyone found a way to capture the mouse events as well from inside of a BrowserView ? Any help would be very appreciated.

• javascript
• electron

1 Answer 1

by using preload webPreferences for browserview where you can use ipcRenderer where the preload.js script will be

document.addEventListener('click', (event) => {
  ipcRenderer.send('something', event);
});

and in the main electron js you have to use preload and call ipc main to capture the mouse data

let view = new BrowserView({
 webPreferences: {
  preload: path.join(__dirname, 'preload.js'),
 }
});

ipcMain.on('something', function (event, arg) {
  // your code here
})