vmars316/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
    <header>
        <button id="back"><-</button>
        <button id="forward">-></button>
        <input id="url" type="url" value="https://google.com"/>
        <button id="go">Go</button>
        <button id="devtools">Toggle devtools</button>
    </header>
</body>
<script>
    document.getElementById('back')
        .addEventListener('click', () => webview.back())
    document.getElementById('forward')
        .addEventListener('click', () => webview.forward())
    document.getElementById('go')
        .addEventListener('click', () => webview.loadURL(document.getElementById('url').value))
    document.getElementById('devtools')
        .addEventListener('click', () => webview.toggleDevtools())
</script>
</html>

## main.js
const path = require('path')
const { app, BrowserWindow, BrowserView, ipcMain } = require('electron')

async function main() {
    await app.whenReady()

    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')
        }
    })
    win.loadFile(path.join(__dirname, 'index.html'))

    const view = new BrowserView()
    view.setBounds({
        y: 21,
        x: 0,
        width: win.getBounds().width,
        height: win.getBounds().height - 21
    })
    view.setAutoResize({
        width: true, height: true
    })
    win.setBrowserView(view)
    view.webContents.loadURL("https://duckduckgo.com")


    ipcMain.on('webview-load-url', (_, url) => {
        console.log('Loading URL', url)
        view.webContents.loadURL(url)
    })
    ipcMain.on('webview-back', () => {
        console.log('Going back in history...')
        view.webContents.goBack()
    })
    ipcMain.on('webview-forward', () => {
        console.log('Going forward in history...')
        view.webContents.goForward()
    })
    ipcMain.on('webview-toggle-devtools', () => {
        console.log('Toggling devtools')
        view.webContents.toggleDevTools()
    })
}

main()

## package.json
{
  "name": "encouraging-market-tutor-8poff",
  "productName": "encouraging-market-tutor-8poff",
  "description": "My Electron application description",
  "keywords": [],
  "main": "./main.js",
  "version": "1.0.0",
  "author": "vmars",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {},
  "devDependencies": {
    "electron": "16.0.5"
  }
}

## preload.js
const { ipcRenderer, contextBridge } = require('electron')

contextBridge.exposeInMainWorld('webview', {
    loadURL: (url) => ipcRenderer.send('webview-load-url', url),
    back: () => ipcRenderer.send('webview-back'),
    forward: () => ipcRenderer.send('webview-forward'),
    toggleDevtools: () => ipcRenderer.send('webview-toggle-devtools'),
})

## renderer.js
// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// No Node.js APIs are available in this process because
// `nodeIntegration` is turned off. Use `preload.js` to
// selectively enable features needed in the rendering
// process.

## styles.css
/* styles.css */

/* Add styles here to customize the appearance of your app */
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	body {
	padding: 0;
	margin: 0;
	}
	</style>
	</head>
	<body>
	<header>
	<button id="back"><-</button>
	<button id="forward">-></button>
	<input id="url" type="url" value="https://google.com"/>
	<button id="go">Go</button>
	<button id="devtools">Toggle devtools</button>
	</header>
	</body>
	<script>
	document.getElementById('back')
	.addEventListener('click', () => webview.back())
	document.getElementById('forward')
	.addEventListener('click', () => webview.forward())
	document.getElementById('go')
	.addEventListener('click', () => webview.loadURL(document.getElementById('url').value))
	document.getElementById('devtools')
	.addEventListener('click', () => webview.toggleDevtools())
	</script>
	</html>
	const path = require('path')
	const { app, BrowserWindow, BrowserView, ipcMain } = require('electron')

	async function main() {
	await app.whenReady()

	const win = new BrowserWindow({
	width: 800,
	height: 600,
	webPreferences: {
	preload: path.join(__dirname, 'preload.js')
	}
	})
	win.loadFile(path.join(__dirname, 'index.html'))

	const view = new BrowserView()
	view.setBounds({
	y: 21,
	x: 0,
	width: win.getBounds().width,
	height: win.getBounds().height - 21
	})
	view.setAutoResize({
	width: true, height: true
	})
	win.setBrowserView(view)
	view.webContents.loadURL("https://duckduckgo.com")


	ipcMain.on('webview-load-url', (_, url) => {
	console.log('Loading URL', url)
	view.webContents.loadURL(url)
	})
	ipcMain.on('webview-back', () => {
	console.log('Going back in history...')
	view.webContents.goBack()
	})
	ipcMain.on('webview-forward', () => {
	console.log('Going forward in history...')
	view.webContents.goForward()
	})
	ipcMain.on('webview-toggle-devtools', () => {
	console.log('Toggling devtools')
	view.webContents.toggleDevTools()
	})
	}

	main()
	{
	"name": "encouraging-market-tutor-8poff",
	"productName": "encouraging-market-tutor-8poff",
	"description": "My Electron application description",
	"keywords": [],
	"main": "./main.js",
	"version": "1.0.0",
	"author": "vmars",
	"scripts": {
	"start": "electron ."
	},
	"dependencies": {},
	"devDependencies": {
	"electron": "16.0.5"
	}
	}
	const { ipcRenderer, contextBridge } = require('electron')

	contextBridge.exposeInMainWorld('webview', {
	loadURL: (url) => ipcRenderer.send('webview-load-url', url),
	back: () => ipcRenderer.send('webview-back'),
	forward: () => ipcRenderer.send('webview-forward'),
	toggleDevtools: () => ipcRenderer.send('webview-toggle-devtools'),
	})
	// This file is required by the index.html file and will
	// be executed in the renderer process for that window.
	// No Node.js APIs are available in this process because
	// `nodeIntegration` is turned off. Use `preload.js` to
	// selectively enable features needed in the rendering
	// process.
	/* styles.css */

	/* Add styles here to customize the appearance of your app */