codebytere/index.html Secret

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>Electron Webview Example</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div id="url-input-container">
    <input type="text" id="url-input" placeholder="Enter URL">
    <button id="load-url-button">Load URL</button>
    <button id="open-devtools-button">Open DevTools</button>
  </div>
  <div id="webview-container">
    <div id="loading-icon" hidden>Loading...</div>
    <webview id="webview" src="" preload="renderer.js"></webview>
  </div>
  <script src="renderer.js"></script>
</body>
</html>

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

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      webviewTag: true,
    }
  });

  mainWindow.loadFile('index.html');
}

app.on('ready', createWindow);

ipcMain.handle('webview-wc-id', (e, id) => {
  const { session } = webContents.fromId(id);

  session.webRequest.onBeforeSendHeaders({ urls: ["<all_urls>"] }, (details, callback) => {
    let requestHeaders = { ...details.requestHeaders };
    callback({ requestHeaders });
  });
})

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

app.on('activate', function () {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

## package.json
{
  "name": "labored-advice-implement-f2om9",
  "productName": "labored-advice-implement-f2om9",
  "description": "My Electron application description",
  "keywords": [],
  "main": "./main.js",
  "version": "1.0.0",
  "author": "codebytere",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {},
  "devDependencies": {
    "electron": "9999999999.9.9"
  }
}

## preload.js
// Empty

## renderer.js
const inputElement = document.getElementById('url-input');
const loadButton = document.getElementById('load-url-button');
const webview = document.getElementById('webview');
const { ipcRenderer } = require('electron')

loadButton.addEventListener('click', () => {
  let url = inputElement.value;
  if (!url.startsWith('http://') && !url.startsWith('https://')) {
    url = 'https://' + url;
  }
  webview.src = url;
});

inputElement.addEventListener('keyup', (event) => {
  if (event.key === 'Enter') {
    loadButton.click();
  }
});

webview.addEventListener('dom-ready', () => {
  const id = this.webview.getWebContentsId()
  ipcRenderer.invoke('webview-wc-id', id)
});


## styles.css
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#url-input-container {
  display: flex;
  padding: 10px;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ccc;
}

#url-input {
  flex: 1;
  padding: 5px;
  margin-right: 10px;
}

#load-url-button {
  padding: 5px 10px;
}

#webview-container {
  flex: 1;
  width: 100%;
}

webview {
  width: 100%;
  height: 100%;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Electron Webview Example</title>
	<link rel="stylesheet" type="text/css" href="styles.css">
	</head>
	<body>
	<div id="url-input-container">
	<input type="text" id="url-input" placeholder="Enter URL">
	<button id="load-url-button">Load URL</button>
	<button id="open-devtools-button">Open DevTools</button>
	</div>
	<div id="webview-container">
	<div id="loading-icon" hidden>Loading...</div>
	<webview id="webview" src="" preload="renderer.js"></webview>
	</div>
	<script src="renderer.js"></script>
	</body>
	</html>
	const { app, BrowserWindow, ipcMain, webContents } = require('electron');

	function createWindow () {
	const mainWindow = new BrowserWindow({
	width: 800,
	height: 600,
	webPreferences: {
	nodeIntegration: true,
	contextIsolation: false,
	webviewTag: true,
	}
	});

	mainWindow.loadFile('index.html');
	}

	app.on('ready', createWindow);

	ipcMain.handle('webview-wc-id', (e, id) => {
	const { session } = webContents.fromId(id);

	session.webRequest.onBeforeSendHeaders({ urls: ["<all_urls>"] }, (details, callback) => {
	let requestHeaders = { ...details.requestHeaders };
	callback({ requestHeaders });
	});
	})

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

	app.on('activate', function () {
	if (BrowserWindow.getAllWindows().length === 0) {
	createWindow();
	}
	});
	{
	"name": "labored-advice-implement-f2om9",
	"productName": "labored-advice-implement-f2om9",
	"description": "My Electron application description",
	"keywords": [],
	"main": "./main.js",
	"version": "1.0.0",
	"author": "codebytere",
	"scripts": {
	"start": "electron ."
	},
	"dependencies": {},
	"devDependencies": {
	"electron": "9999999999.9.9"
	}
	}
	const inputElement = document.getElementById('url-input');
	const loadButton = document.getElementById('load-url-button');
	const webview = document.getElementById('webview');
	const { ipcRenderer } = require('electron')

	loadButton.addEventListener('click', () => {
	let url = inputElement.value;
	if (!url.startsWith('http://') && !url.startsWith('https://')) {
	url = 'https://' + url;
	}
	webview.src = url;
	});

	inputElement.addEventListener('keyup', (event) => {
	if (event.key === 'Enter') {
	loadButton.click();
	}
	});

	webview.addEventListener('dom-ready', () => {
	const id = this.webview.getWebContentsId()
	ipcRenderer.invoke('webview-wc-id', id)
	});
	html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	}

	#url-input-container {
	display: flex;
	padding: 10px;
	background-color: #f0f0f0;
	border-bottom: 1px solid #ccc;
	}

	#url-input {
	flex: 1;
	padding: 5px;
	margin-right: 10px;
	}

	#load-url-button {
	padding: 5px 10px;
	}

	#webview-container {
	flex: 1;
	width: 100%;
	}

	webview {
	width: 100%;
	height: 100%;
	}