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>
	  <div id="mainDiv" style="text-align: center;">
        <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>
     </div>
    </header>
</body>
<script>
src="./renderer.js"
src="./main.js"
    document.getElementById('back')
        .addEventListener('click', () => browserview.back())
    document.getElementById('forward')
        .addEventListener('click', () => browserview.forward())
    document.getElementById('go')
        .addEventListener('click', () => browserview.loadURL(document.getElementById('url').value))
    document.getElementById('devtools')
        .addEventListener('click', () => browserview.toggleDevtools())
</script>
</html>

## main.js
const path = require('path')
const url = require('url')
const { app, BrowserWindow, BrowserView, ipcMain } = require('electron')
var holdUrl = "" ;

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,
        y: 30,
        x: 0,
        width: win.getBounds().width,
//        height: win.getBounds().height - 21
        height: win.getBounds().height - 30
    })
    view.setAutoResize({
        width: true, height: true
    })
    win.setBrowserView(view)
//    view.webContents.loadURL("https://duckduckgo.com")
    view.webContents.loadURL("http://vmars.us/KidSafeBrowser/KidSafeBrowserHome.html")

view.webContents.on('will-navigate', (event, url) => {
  holdUrl = url ;
  console.log(" 1  main.js  view.webContents.on( will-navigate = " + url)
//	    win.webContents.document.getElementById("url").value = holdUrl;
   }); // 'will-navigate'

view.webContents.on('did-start-navigation', (event, url) => {
	holdUrl = url ;
	console.log("main.js 'did-start-navigation' =  " + holdUrl)
    win.webContents.send('update-address-bar-only', url) ;
}) // 'did-start-navigation'

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

main()

## package.json
{
  "name": "quizzical-temperature-step-2zzog",
  "productName": "quizzical-temperature-step-2zzog",
  "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>
	<div id="mainDiv" style="text-align: center;">
	<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>
	</div>
	</header>
	</body>
	<script>
	src="./renderer.js"
	src="./main.js"
	document.getElementById('back')
	.addEventListener('click', () => browserview.back())
	document.getElementById('forward')
	.addEventListener('click', () => browserview.forward())
	document.getElementById('go')
	.addEventListener('click', () => browserview.loadURL(document.getElementById('url').value))
	document.getElementById('devtools')
	.addEventListener('click', () => browserview.toggleDevtools())
	</script>
	</html>
	const path = require('path')
	const url = require('url')
	const { app, BrowserWindow, BrowserView, ipcMain } = require('electron')
	var holdUrl = "" ;

	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,
	y: 30,
	x: 0,
	width: win.getBounds().width,
	// height: win.getBounds().height - 21
	height: win.getBounds().height - 30
	})
	view.setAutoResize({
	width: true, height: true
	})
	win.setBrowserView(view)
	// view.webContents.loadURL("https://duckduckgo.com")
	view.webContents.loadURL("http://vmars.us/KidSafeBrowser/KidSafeBrowserHome.html")

	view.webContents.on('will-navigate', (event, url) => {
	holdUrl = url ;
	console.log(" 1 main.js view.webContents.on( will-navigate = " + url)
	// win.webContents.document.getElementById("url").value = holdUrl;
	}); // 'will-navigate'

	view.webContents.on('did-start-navigation', (event, url) => {
	holdUrl = url ;
	console.log("main.js 'did-start-navigation' = " + holdUrl)
	win.webContents.send('update-address-bar-only', url) ;
	}) // 'did-start-navigation'

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

	main()
	{
	"name": "quizzical-temperature-step-2zzog",
	"productName": "quizzical-temperature-step-2zzog",
	"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 */