VerteDinde/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
  <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
  <title>app.setAsDefaultProtocol Demo</title>
</head>

<body>
  <h1>App Default Protocol Demo</h1>

  <p>The protocol API allows us to register a custom protocol and intercept existing protocol requests.</p>
  <p>These methods allow you to set and unset the protocols your app should be the default app for. Similar to when a
    browser asks to be your default for viewing web pages.</p>

  <p>Open the <a href="https://www.electronjs.org/docs/api/protocol">full protocol API documentation</a> in your
    browser.</p>

  -----

  <h3>Demo</h3>
  <p>
    First: Launch current page in browser
    <button id="open-in-browser" class="js-container-target demo-toggle-button">
        Click to Launch Browser
      </button>
  </p>

  <p>
    Then: Launch the app from a web link!
    <a href="electron-fiddle://open">Click here to launch the app</a>
  </p>

  ----

  <p>You can set your app as the default app to open for a specific protocol. For instance, in this demo we set this app
    as the default for <code>electron-fiddle://</code>. The demo button above will launch a page in your default
    browser with a link. Click that link and it will re-launch this app.</p>


  <h3>Packaging</h3>
  <p>This feature will only work on macOS when your app is packaged. It will not work when you're launching it in
    development from the command-line. When you package your app you'll need to make sure the macOS <code>plist</code>
    for the app is updated to include the new protocol handler. If you're using <code>electron-packager</code> then you
    can add the flag <code>--extend-info</code> with a path to the <code>plist</code> you've created. The one for this
    app is below:</p>

  <p>
  <h5>macOS plist</h5>
  <pre><code>
    <?xml version="1.0" encoding="UTF-8"?>
        <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
            <plist version="1.0">
                <dict>
                    <key>CFBundleURLTypes</key>
                    <array>
                        <dict>
                            <key>CFBundleURLSchemes</key>
                            <array>
                                <string>electron-api-demos</string>
                            </array>
                            <key>CFBundleURLName</key>
                            <string>Electron API Demos Protocol</string>
                        </dict>
                    </array>
                    <key>ElectronTeamID</key>
                    <string>VEKTX9H2N7</string>
                </dict>
            </plist>
        </code>
    </pre>
  <p>

    <!-- You can also require other files to run in this process -->
    <script src="./renderer.js"></script>
</body>

</html>

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

if (process.defaultApp) {
  if (process.argv.length >= 2) {
    app.setAsDefaultProtocolClient('electron-fiddle', process.execPath, [path.resolve(process.argv[1])])
  }
} else {
    app.setAsDefaultProtocolClient('electron-fiddle')
}

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  mainWindow.loadFile('index.html')
}

// 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.whenReady().then(() => {
  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

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

app.on('open-url', (event, url) => {
    dialog.showErrorBox('Welcome Back', `You arrived from: ${url}`)
})

// Handle window controls via IPC
ipcMain.on('shell:open', (ipcEvent) => {
  const pageDirectory = __dirname.replace('app.asar', 'app.asar.unpacked')
  const pagePath = path.join('file://', pageDirectory, 'index.html')
  shell.openExternal(pagePath)
})

// ipcEvent.sender is the webContents that sent the message
// use BrowserWindow.fromWecContents to get the associated BrowserWindow instance
function findBrowserWindow (ipcEvent) {
  return BrowserWindow.fromWebContents(ipcEvent.sender)
}

## preload.js
// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
const { contextBridge, ipcRenderer, shell } = require('electron')

// Set up context bridge between the renderer process and the main process
contextBridge.exposeInMainWorld(
  'shell',
  {
    open: () => ipcRenderer.send('shell:open'),
    close: () => ipcRenderer.send('shell:close'),
  }
)

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
// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// All APIs exposed by the context bridge are available here.

// Binds the buttons to the context bridge API.
document.getElementById('open-in-browser').addEventListener('click', () => {
  shell.open();
});

## styles.css
/* Empty */
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
	<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
	<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
	<title>app.setAsDefaultProtocol Demo</title>
	</head>

	<body>
	<h1>App Default Protocol Demo</h1>

	<p>The protocol API allows us to register a custom protocol and intercept existing protocol requests.</p>
	<p>These methods allow you to set and unset the protocols your app should be the default app for. Similar to when a
	browser asks to be your default for viewing web pages.</p>

	<p>Open the <a href="https://www.electronjs.org/docs/api/protocol">full protocol API documentation</a> in your
	browser.</p>

	-----

	<h3>Demo</h3>
	<p>
	First: Launch current page in browser
	<button id="open-in-browser" class="js-container-target demo-toggle-button">
	Click to Launch Browser
	</button>
	</p>

	<p>
	Then: Launch the app from a web link!
	<a href="electron-fiddle://open">Click here to launch the app</a>
	</p>

	----

	<p>You can set your app as the default app to open for a specific protocol. For instance, in this demo we set this app
	as the default for <code>electron-fiddle://</code>. The demo button above will launch a page in your default
	browser with a link. Click that link and it will re-launch this app.</p>


	<h3>Packaging</h3>
	<p>This feature will only work on macOS when your app is packaged. It will not work when you're launching it in
	development from the command-line. When you package your app you'll need to make sure the macOS <code>plist</code>
	for the app is updated to include the new protocol handler. If you're using <code>electron-packager</code> then you
	can add the flag <code>--extend-info</code> with a path to the <code>plist</code> you've created. The one for this
	app is below:</p>

	<p>
	<h5>macOS plist</h5>
	<pre><code>
	<?xml version="1.0" encoding="UTF-8"?>
	<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
	<plist version="1.0">
	<dict>
	<key>CFBundleURLTypes</key>
	<array>
	<dict>
	<key>CFBundleURLSchemes</key>
	<array>
	<string>electron-api-demos</string>
	</array>
	<key>CFBundleURLName</key>
	<string>Electron API Demos Protocol</string>
	</dict>
	</array>
	<key>ElectronTeamID</key>
	<string>VEKTX9H2N7</string>
	</dict>
	</plist>
	</code>
	</pre>
	<p>

	<!-- You can also require other files to run in this process -->
	<script src="./renderer.js"></script>
	</body>

	</html>
	// Modules to control application life and create native browser window
	const { app, BrowserWindow, ipcMain, protocol, shell } = require('electron')
	const path = require('path')

	if (process.defaultApp) {
	if (process.argv.length >= 2) {
	app.setAsDefaultProtocolClient('electron-fiddle', process.execPath, [path.resolve(process.argv[1])])
	}
	} else {
	app.setAsDefaultProtocolClient('electron-fiddle')
	}

	function createWindow () {
	// Create the browser window.
	const mainWindow = new BrowserWindow({
	width: 800,
	height: 600,
	webPreferences: {
	preload: path.join(__dirname, 'preload.js')
	}
	})

	mainWindow.loadFile('index.html')
	}

	// 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.whenReady().then(() => {
	app.on('activate', function () {
	if (BrowserWindow.getAllWindows().length === 0) createWindow()
	})
	})

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

	app.on('open-url', (event, url) => {
	dialog.showErrorBox('Welcome Back', `You arrived from: ${url}`)
	})

	// Handle window controls via IPC
	ipcMain.on('shell:open', (ipcEvent) => {
	const pageDirectory = __dirname.replace('app.asar', 'app.asar.unpacked')
	const pagePath = path.join('file://', pageDirectory, 'index.html')
	shell.openExternal(pagePath)
	})

	// ipcEvent.sender is the webContents that sent the message
	// use BrowserWindow.fromWecContents to get the associated BrowserWindow instance
	function findBrowserWindow (ipcEvent) {
	return BrowserWindow.fromWebContents(ipcEvent.sender)
	}
	// All of the Node.js APIs are available in the preload process.
	// It has the same sandbox as a Chrome extension.
	const { contextBridge, ipcRenderer, shell } = require('electron')

	// Set up context bridge between the renderer process and the main process
	contextBridge.exposeInMainWorld(
	'shell',
	{
	open: () => ipcRenderer.send('shell:open'),
	close: () => ipcRenderer.send('shell:close'),
	}
	)

	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])
	}
	})
	// This file is required by the index.html file and will
	// be executed in the renderer process for that window.
	// All APIs exposed by the context bridge are available here.

	// Binds the buttons to the context bridge API.
	document.getElementById('open-in-browser').addEventListener('click', () => {
	shell.open();
	});