vmars316/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <p>
	    <a href="https://gist.github.com/vmars316/d5c59d6cb31c8ad7f2b8af05988c92a3">https://gist.github.com/vmars316/d5c59d6cb31c8ad7f2b8af05988c92a3</a>
	</p>

    <p>
        We are using Node.js <span id="node-version"></span>,
        Chromium <span id="chrome-version"></span>,
        and Electron <span id="electron-version"></span>.
    </p>

	<p>
	<button id="back">Back</button>
    <input id="url" type="url" value="https://google.com"/>
	<button  id="go">Go</button>
	</p>
<script src="renderer.js"></script>
<!--  <script>
  alert("Click  OK Button to  src=''./renderer.js'");
 </script>
 -->
</body>
</html>

## main.js
// BrowserView-&-One-Button:  https://gist.github.com/vmars316/d5c59d6cb31c8ad7f2b8af05988c92a3
const path = require('path')
const {app, contextBridge, BrowserWindow, BrowserView, ipcMain} = require('electron')

function createWindows () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false ,
	  contextIsolation: true,
	  preload: path.join(__dirname, 'preload.js')
    }
  })

  const view = new BrowserView({
    })

  win.setBrowserView(view)
  view.setBounds({ x: 0, y: 120, width: 800, height: 500 })
  view.setAutoResize({width: true, height: true})
  win.loadFile("index.html")
  view.webContents.loadURL("https://duckduckgo.com")
//  win.webContents.openDevTools({ mode: 'detach' });
  view.webContents.openDevTools({ mode: 'detach' });

  ipcMain.handle('back', (_event , holdUrl) => {
  console.log("ipcMain.handle 'back' ")
	whichWay = "back"
    view.webContents.goBack()
	setTimeout(function(){waitSeconds() }, 1000);
}) // 'back'

function waitSeconds() {
	holdUrl = view.webContents.getURL()
//	console.log("main.js  AFTER " + whichWay + " = " + holdUrl)
    win.webContents.send('back-or-forward-navigated', holdUrl)
}

    ipcMain.handle('load-url', (event, url) => {
    console.log("main: load url", {url})
   view.webContents.loadURL(url)
  })


}  // ==============End of function createWindows () ====================

app.on('ready', () => {
    createWindows() ;
})

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

## package.json
{
  "name": "kindhearted-music-attempt-eum1t",
  "productName": "kindhearted-music-attempt-eum1t",
  "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
console.log("Beginning preload.js")
const { contextBridge, ipcRenderer  } = require('electron')
contextBridge.exposeInMainWorld('electron', {
loadUrl: (url) => ipcRenderer.invoke('load-url', url)
})


window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }
  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

## renderer.js


document.getElementById('go').addEventListener('click',  async () => {
const  url = document.getElementById('url').value
  console.log("renderer: GO button clicked", url)
  window.electron.loadUrl(url)
})


document.getElementById('back').addEventListener('click',  async () => {
  const back = document.getElementById('back')
  console.log("renderer: BACK button clicked", url)
//  window.electron.loadUrl(url)
  ipcRenderer.invoke('back' ,)
})

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

/* Add styles here to customize the appearance of your app */
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Hello World!</title>
	<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<body>
	<p>
	<a href="https://gist.github.com/vmars316/d5c59d6cb31c8ad7f2b8af05988c92a3">https://gist.github.com/vmars316/d5c59d6cb31c8ad7f2b8af05988c92a3</a>
	</p>

	<p>
	We are using Node.js <span id="node-version"></span>,
	Chromium <span id="chrome-version"></span>,
	and Electron <span id="electron-version"></span>.
	</p>

	<p>
	<button id="back">Back</button>
	<input id="url" type="url" value="https://google.com"/>
	<button id="go">Go</button>
	</p>
	<script src="renderer.js"></script>
	<!-- <script>
	alert("Click OK Button to src=''./renderer.js'");
	</script>
	-->
	</body>
	</html>
	// BrowserView-&-One-Button: https://gist.github.com/vmars316/d5c59d6cb31c8ad7f2b8af05988c92a3
	const path = require('path')
	const {app, contextBridge, BrowserWindow, BrowserView, ipcMain} = require('electron')

	function createWindows () {
	const win = new BrowserWindow({
	width: 800,
	height: 600,
	webPreferences: {
	nodeIntegration: false ,
	contextIsolation: true,
	preload: path.join(__dirname, 'preload.js')
	}
	})

	const view = new BrowserView({
	})

	win.setBrowserView(view)
	view.setBounds({ x: 0, y: 120, width: 800, height: 500 })
	view.setAutoResize({width: true, height: true})
	win.loadFile("index.html")
	view.webContents.loadURL("https://duckduckgo.com")
	// win.webContents.openDevTools({ mode: 'detach' });
	view.webContents.openDevTools({ mode: 'detach' });

	ipcMain.handle('back', (_event , holdUrl) => {
	console.log("ipcMain.handle 'back' ")
	whichWay = "back"
	view.webContents.goBack()
	setTimeout(function(){waitSeconds() }, 1000);
	}) // 'back'

	function waitSeconds() {
	holdUrl = view.webContents.getURL()
	// console.log("main.js AFTER " + whichWay + " = " + holdUrl)
	win.webContents.send('back-or-forward-navigated', holdUrl)
	}

	ipcMain.handle('load-url', (event, url) => {
	console.log("main: load url", {url})
	view.webContents.loadURL(url)
	})





	} // ==============End of function createWindows () ====================

	app.on('ready', () => {
	createWindows() ;
	})

	app.on('window-all-closed', function () {
	if (process.platform !== 'darwin') {
	app.quit()
	}
	})
	{
	"name": "kindhearted-music-attempt-eum1t",
	"productName": "kindhearted-music-attempt-eum1t",
	"description": "My Electron application description",
	"keywords": [],
	"main": "./main.js",
	"version": "1.0.0",
	"author": "vmars",
	"scripts": {
	"start": "electron ."
	},
	"dependencies": {},
	"devDependencies": {
	"electron": "16.0.5"
	}
	}
	console.log("Beginning preload.js")
	const { contextBridge, ipcRenderer } = require('electron')
	contextBridge.exposeInMainWorld('electron', {
	loadUrl: (url) => ipcRenderer.invoke('load-url', url)
	})



	window.addEventListener('DOMContentLoaded', () => {
	const replaceText = (selector, text) => {
	const element = document.getElementById(selector)
	if (element) element.innerText = text
	}
	for (const type of ['chrome', 'node', 'electron']) {
	replaceText(`${type}-version`, process.versions[type])
	}
	})


	document.getElementById('go').addEventListener('click', async () => {
	const url = document.getElementById('url').value
	console.log("renderer: GO button clicked", url)
	window.electron.loadUrl(url)
	})


	document.getElementById('back').addEventListener('click', async () => {
	const back = document.getElementById('back')
	console.log("renderer: BACK button clicked", url)
	// window.electron.loadUrl(url)
	ipcRenderer.invoke('back' ,)
	})
	/* styles.css */

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