connor4312/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <link rel="stylesheet" type="text/css" href="./styles.css">
  </head>
  <body>
    <h1>iframe:</h1>
    <iframe width="560" height="100" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <h1>messages:</h1>
    <ol style="font-family: monospace; white-space: nowrap;"></ol>
    <script>
      require('./renderer.js')
    </script>
  </body>
</html>

## main.js
// Modules to control application life and create native browser window
const { app, BrowserWindow, ipcMain } = require('electron')

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()

  const dbg = mainWindow.webContents.debugger;
  const send = (method, params) => dbg.sendCommand(method, params)
    .then(result => {
      mainWindow.webContents.send('got-message', { result });
      return result;
    });

  setTimeout(() => { // let the renderer start listening
    dbg.attach();
    dbg.addListener('message', (event, ...args) => {
      mainWindow.webContents.send('got-message', args);

      const [method, params] = args;
      if (method === 'Target.targetCreated') {
        send('Target.attachToTarget', { targetId: params.targetInfo.targetId, flatten: true }).then(result => {
          send('Debugger.enable', { sessionId: result.sessionId })
        });
      }
    });

    send('Target.setDiscoverTargets', { discover: true });
  }, 2000);
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

## preload.js
// Empty

## renderer.js
const { ipcRenderer } = require('electron');

const list = document.querySelector('ol');

ipcRenderer.on('got-message', (event, args) => {
  const li = document.createElement('li');
  li.innerText = '< ' + JSON.stringify(args);
  list.appendChild(li);
});

ipcRenderer.on('sent-message', (event, args) => {
  const li = document.createElement('li');
  li.innerText = '> ' + JSON.stringify(args);
  list.appendChild(li);
});

## styles.css
/* Empty */
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Hello World!</title>
	<link rel="stylesheet" type="text/css" href="./styles.css">
	</head>
	<body>
	<h1>iframe:</h1>
	<iframe width="560" height="100" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
	<h1>messages:</h1>
	<ol style="font-family: monospace; white-space: nowrap;"></ol>
	<script>
	require('./renderer.js')
	</script>
	</body>
	</html>
	// Modules to control application life and create native browser window
	const { app, BrowserWindow, ipcMain } = require('electron')

	function createWindow () {
	// Create the browser window.
	const mainWindow = new BrowserWindow({
	width: 800,
	height: 600,
	webPreferences: {
	nodeIntegration: true
	}
	})

	// and load the index.html of the app.
	mainWindow.loadFile('index.html')

	// Open the DevTools.
	// mainWindow.webContents.openDevTools()

	const dbg = mainWindow.webContents.debugger;
	const send = (method, params) => dbg.sendCommand(method, params)
	.then(result => {
	mainWindow.webContents.send('got-message', { result });
	return result;
	});

	setTimeout(() => { // let the renderer start listening
	dbg.attach();
	dbg.addListener('message', (event, ...args) => {
	mainWindow.webContents.send('got-message', args);

	const [method, params] = args;
	if (method === 'Target.targetCreated') {
	send('Target.attachToTarget', { targetId: params.targetInfo.targetId, flatten: true }).then(result => {
	send('Debugger.enable', { sessionId: result.sessionId })
	});
	}
	});

	send('Target.setDiscoverTargets', { discover: true });
	}, 2000);
	}

	// This method will be called when Electron has finished
	// initialization and is ready to create browser windows.
	// Some APIs can only be used after this event occurs.
	app.on('ready', createWindow)

	// Quit when all windows are closed.
	app.on('window-all-closed', function () {
	// On OS X it is common for applications and their menu bar
	// to stay active until the user quits explicitly with Cmd + Q
	if (process.platform !== 'darwin') {
	app.quit()
	}
	})

	app.on('activate', function () {
	// On OS X it's common to re-create a window in the app when the
	// dock icon is clicked and there are no other windows open.
	if (BrowserWindow.getAllWindows().length === 0) {
	createWindow()
	}
	})

	// In this file you can include the rest of your app's specific main process
	// code. You can also put them in separate files and require them here.
	const { ipcRenderer } = require('electron');

	const list = document.querySelector('ol');

	ipcRenderer.on('got-message', (event, args) => {
	const li = document.createElement('li');
	li.innerText = '< ' + JSON.stringify(args);
	list.appendChild(li);
	});

	ipcRenderer.on('sent-message', (event, args) => {
	const li = document.createElement('li');
	li.innerText = '> ' + JSON.stringify(args);
	list.appendChild(li);
	});