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/65e29a008de46fe46e5a7bbade32fcb1">https://gist.github.com/vmars316/65e29a008de46fe46e5a7bbade32fcb1</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>
    <input id="url" type="url" value="https://google.com"/>
<!--    <button id="go">Go</button>	-->
	<button  id="go">Go</button>
<!--	<button  id="go" onclick="goButtonClicked()">Go</button>  -->
	</p>
<script>
//  alert("Click  OK Button  to require  ./renderer.js");
  require('./renderer.js');
</script>

</body>
</html>

## main.js
// BrowserView-&-One-Button:  //https://gist.github.com/vmars316/65e29a008de46fe46e5a7bbade32fcb1
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.webContents.loadURL("https://duckduckgo.com")
  view.setAutoResize({width: true, height: true})
  win.loadFile("index.html")

  view.webContents.openDevTools({ mode: 'detach' });

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

  win.webContents.openDevTools({ mode: 'detach' });
  view.webContents.openDevTools({ mode: 'detach' });

}

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

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

## package.json
{
  "name": "consistent-scene-race-ax2fx",
  "productName": "consistent-scene-race-ax2fx",
  "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('testAPI', {
  loadUrl: (url) => ipcRenderer.invoke('load-url', url),
//  loadUrl: (url) => ipcRenderer.invoke('load-url', "www.duckduclgo.com"),
})

## renderer.js
document.getElementById('go').addEventListener('click',  async () => {
  const url = document.getElementById('url').value
  console.log("renderer: go button clicked", url)
  alert("renderer: GO Button Clicked  url = " + url)
  window.testAPI.loadUrl(url)
})

## 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/65e29a008de46fe46e5a7bbade32fcb1">https://gist.github.com/vmars316/65e29a008de46fe46e5a7bbade32fcb1</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>
	<input id="url" type="url" value="https://google.com"/>
	<!-- <button id="go">Go</button> -->
	<button id="go">Go</button>
	<!-- <button id="go" onclick="goButtonClicked()">Go</button> -->
	</p>
	<script>
	// alert("Click OK Button to require ./renderer.js");
	require('./renderer.js');
	</script>

	</body>
	</html>
	// BrowserView-&-One-Button: //https://gist.github.com/vmars316/65e29a008de46fe46e5a7bbade32fcb1
	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.webContents.loadURL("https://duckduckgo.com")
	view.setAutoResize({width: true, height: true})
	win.loadFile("index.html")

	view.webContents.openDevTools({ mode: 'detach' });

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

	win.webContents.openDevTools({ mode: 'detach' });
	view.webContents.openDevTools({ mode: 'detach' });

	}

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

	app.on('window-all-closed', function () {
	if (process.platform !== 'darwin') {
	app.quit()
	}
	})
	{
	"name": "consistent-scene-race-ax2fx",
	"productName": "consistent-scene-race-ax2fx",
	"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('testAPI', {
	loadUrl: (url) => ipcRenderer.invoke('load-url', url),
	// loadUrl: (url) => ipcRenderer.invoke('load-url', "www.duckduclgo.com"),
	})
	document.getElementById('go').addEventListener('click', async () => {
	const url = document.getElementById('url').value
	console.log("renderer: go button clicked", url)
	alert("renderer: GO Button Clicked url = " + url)
	window.testAPI.loadUrl(url)
	})
	/* styles.css */

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