Electron Browserview and Preload JavaScript Problems

Question

I've tried several versions via Electron Fiddle and I cannot get the electron browserview to work with a preloaded javascript file. I've followed Electron BrowserView not capturing mouse events, Preload script not loading in [email protected] browserview, and whatever other thing I could read about on browserview and preloaded javascript. I am able to get preloaded javascript to run from the browserwindow, but not the browserview. I've tried all the webpreferences options, and ensured that the paths are correct. Nothing. My question is: can anyone provide some skeleton code that they've gotten to work? Or a hint as to what I am trying to do is even possible. Here is some of the code I used. Like I mentioned earlier, it works from the browserwindow but not the browserview, nothing is output to the console. Thanks.

I'd like to get this to work for Electron v8.0.0

main.js

const path = require('path');
const { BrowserView, BrowserWindow, app } = require('electron')

app.on('ready', () => {
  let win = new BrowserWindow({ width: 800, height: 600 });
  win.on('closed', () => { win = null });

  const view = new BrowserView();
  win.setBrowserView(view);
  view.setBounds({ x: 0, y: 0, width: 800, height: 600, 
     webPreferences: { devTools: true, contextIsolation: true, preload: path.join(app.getAppPath(), 'preload.js') } });
  view.webContents.loadURL('https://electronjs.org');
  view.webContents.openDevTools({mode:'undocked'});
});

preload.js

const { webFrame } = require('electron');

webFrame.executeJavaScript('window.foo = "foo";');
window.bar = 'bar';

document.addEventListener('DOMContentLoaded', () => {
 // Will log out 'undefined' since window.foo is only available in the main
 // context
  console.log(window.foo);

  // Will log out 'bar' since window.bar is available in this context
  console.log(window.bar);
});

Answer 1

const view = new BrowserView({
  webPreferences: { 
    devTools: true, 
    contextIsolation: true, 
    preload: path.join(app.getAppPath(), 'preload.js') 
  }
});
win.setBrowserView(view);
view.setBounds({ x: 0, y: 0, width: 800, height: 600 });

webPreferences should in BrowserView's opitons

Answer 2

Took me a while as well... I'm using electron-webpack, on it I have the following config setup (you probably can achieve the same setup with bare webpack and extraentries):

"main": {
  "extraEntries": ["@/preload.js"]
}

and when creating the browserview:

const view = new BrowserView({
  webPreferences: {
    preload: path.resolve(__dirname, 'preload.js'),
    #some other options
}})

preload script is sitting with all the sources for the main process (whatever you configured for it)