Electron + node.jsで作成したアプリでBrowserViewを使用する(Windows)

Electronにウェブコンテンツを埋め込む場合にBrowserViewを使用します。

メインプロセス

BrowserViewのインスタンスを生成します。contextIsolation: trueにします。

BrowserView#setBoundsメソッドでxy軸やwidth,heightを指定します。

view.setBounds({x: 300, y: 0, width: 400, height: 400})

BrowserView#webContents.loadURLメソッドの引数にURLを指定します。

view.webContents.loadURL('https://www.yahoo.co.jp/')

BrowserWindow#setBrowserViewメソッドの引数にBrowserViewのインスタンスを設定します。

win.setBrowserView(view) // viewを複数指定した場合は後勝ち

index.js(メインプロセス)

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: true
    }
  })
  const view = new BrowserView({
    webPreferences: {
      contextIsolation: true
    }
  })
  win.setBrowserView(view) // viewを複数指定した場合は後勝ち
  view.setBounds({x: 300, y: 0, width: 400, height: 400})
  view.webContents.loadURL('https://www.yahoo.co.jp/')
  // win.loadFile('index.html')
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})