jtbandes · April 9, 2021 21:43
diff --git a/.gitignore b/.gitignore
 node_modules
 out
 package-lock.json
diff --git a/index.html b/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' blob: file: 'unsafe-inline'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self' blob: file: 'unsafe-inline'">
    <title>Hello World!</title>
  </head>
  <body>
    <script src="./renderer.js"></script>
    <p>
      <button onclick="testWorker()">Create Worker with file: URL</button>
      <button onclick="testSharedWorker()">Create SharedWorker with file: URL</button>
      <button onclick="testSharedWorkerWorkaround()">Create SharedWorker with blob: URL</button>
    </p>
    <p>
      <button onclick="preload.openDevTools()">Open main dev tools</button>
      <button onclick="preload.inspectSharedWorker()">Open dev tools on SharedWorker</button>
    </p>
  </body>
 </html>
diff --git a/main.js b/main.js
 // Modules to control application life and create native browser window
 const {app, BrowserWindow} = require('electron')
 const path = require('path')

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

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

  mainWindow.webContents.on('ipc-message', (event, channel) => {
    if (channel === 'openDevTools') {
      mainWindow.webContents.closeDevTools();
      mainWindow.webContents.openDevTools();
    } else {
      mainWindow.webContents.closeDevTools();
      mainWindow.webContents.inspectSharedWorker();
    }
  });
 }

 // 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(() => {
  createWindow()
  
  app.on('activate', function () {
    // On macOS 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()
  })
 })

 // 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()
 })

 // 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.
diff --git a/package.json b/package.json
 {
  "name": "selfish-wave-summarize-n5lg9",
  "productName": "selfish-wave-summarize-n5lg9",
  "description": "My Electron application description",
  "keywords": [],
  "main": "./main.js",
  "version": "1.0.0",
  "author": "work",
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "publish": "electron-forge publish",
    "lint": "echo \"No linting configured\""
  },
  "devDependencies": {
    "@electron-forge/cli": "6.0.0-beta.52",
    "@electron-forge/maker-deb": "6.0.0-beta.52",
    "@electron-forge/maker-rpm": "6.0.0-beta.52",
    "@electron-forge/maker-squirrel": "6.0.0-beta.52",
    "@electron-forge/maker-zip": "6.0.0-beta.52",
    "electron": "13.0.0-beta.8"
  },
  "config": {
    "forge": {
      "packagerConfig": {
        "asar": true
      },
      "makers": [
        {
          "name": "@electron-forge/maker-squirrel"
        },
        {
          "name": "@electron-forge/maker-zip",
          "platforms": [
            "darwin"
          ]
        },
        {
          "name": "@electron-forge/maker-deb",
          "config": {}
        },
        {
          "name": "@electron-forge/maker-rpm",
          "config": {}
        }
      ]
    }
  }
 }
diff --git a/preload.js b/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} = require("electron");

 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])
  }
 })

 contextBridge.exposeInMainWorld('preload', {
  openDevTools: () => ipcRenderer.send('openDevTools'),
  inspectSharedWorker: () => ipcRenderer.send('inspectSharedWorker'),
 })
diff --git a/renderer.js b/renderer.js
 // This file is required by the index.html file and will
 // be executed in the renderer process for that window.
 // No Node.js APIs are available in this process because
 // `nodeIntegration` is turned off. Use `preload.js` to
 // selectively enable features needed in the rendering
 // process.

 const h1 = document.createElement('h1');
 h1.textContent = `Running from ASAR: ${JSON.stringify(window.location.href.includes(".asar/"))}`;
 document.body.prepend(h1);

 async function testWorker() {
    const worker = new Worker('worker.js');
    worker.onmessage = (e) => {
        console.log('message from Worker:', e);
    };
 }

 async function testSharedWorker() {
    const worker = new SharedWorker('worker.js');
    worker.onerror = (e) => {
        console.log('SharedWorker error:', e);
    };
    worker.port.onmessage = (e) => {
        console.log('Message from SharedWorker:', e);
    };
    worker.port.start();
 }

 async function testSharedWorkerWorkaround() {
    const url = URL.createObjectURL(await (await fetch('worker.js')).blob());
    const worker = new SharedWorker(url);
    worker.onerror = (e) => {
        console.log('SharedWorker error:', e);
    };
    worker.port.onmessage = (e) => {
        console.log('Message from SharedWorker:', e);
    };
    worker.port.start();
 }
diff --git a/worker-helper.js b/worker-helper.js
 function helperFunction() {
    return 'A worker loaded a helper function!';
 }
diff --git a/worker.js b/worker.js
 console.log('I am executing in a worker!');

 if (self.postMessage) {
    self.postMessage('You successfully launched a Worker');
    importScripts('worker-helper.js');
    self.postMessage(helperFunction());
 }

 if (typeof SharedWorkerGlobalScope !== 'undefined' && self instanceof SharedWorkerGlobalScope) {
    self.onconnect = (e) => {
        console.log('Connected');
        e.ports[0].start();
        e.ports[0].postMessage('You successfully launched a SharedWorker');
        importScripts('worker-helper.js');
        e.ports[0].postMessage(helperFunction());
    };
 }
	<!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' blob: file: 'unsafe-inline'">
	<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self' blob: file: 'unsafe-inline'">
	<title>Hello World!</title>
	</head>
	<body>
	<script src="./renderer.js"></script>
	<p>
	<button onclick="testWorker()">Create Worker with file: URL</button>
	<button onclick="testSharedWorker()">Create SharedWorker with file: URL</button>
	<button onclick="testSharedWorkerWorkaround()">Create SharedWorker with blob: URL</button>
	</p>
	<p>
	<button onclick="preload.openDevTools()">Open main dev tools</button>
	<button onclick="preload.inspectSharedWorker()">Open dev tools on SharedWorker</button>
	</p>
	</body>
	</html>
	// Modules to control application life and create native browser window
	const {app, BrowserWindow} = require('electron')
	const path = require('path')

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

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

	mainWindow.webContents.on('ipc-message', (event, channel) => {
	if (channel === 'openDevTools') {
	mainWindow.webContents.closeDevTools();
	mainWindow.webContents.openDevTools();
	} else {
	mainWindow.webContents.closeDevTools();
	mainWindow.webContents.inspectSharedWorker();
	}
	});
	}

	// 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(() => {
	createWindow()

	app.on('activate', function () {
	// On macOS 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()
	})
	})

	// 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()
	})

	// 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.
	{
	"name": "selfish-wave-summarize-n5lg9",
	"productName": "selfish-wave-summarize-n5lg9",
	"description": "My Electron application description",
	"keywords": [],
	"main": "./main.js",
	"version": "1.0.0",
	"author": "work",
	"scripts": {
	"start": "electron-forge start",
	"package": "electron-forge package",
	"make": "electron-forge make",
	"publish": "electron-forge publish",
	"lint": "echo \"No linting configured\""
	},
	"devDependencies": {
	"@electron-forge/cli": "6.0.0-beta.52",
	"@electron-forge/maker-deb": "6.0.0-beta.52",
	"@electron-forge/maker-rpm": "6.0.0-beta.52",
	"@electron-forge/maker-squirrel": "6.0.0-beta.52",
	"@electron-forge/maker-zip": "6.0.0-beta.52",
	"electron": "13.0.0-beta.8"
	},
	"config": {
	"forge": {
	"packagerConfig": {
	"asar": true
	},
	"makers": [
	{
	"name": "@electron-forge/maker-squirrel"
	},
	{
	"name": "@electron-forge/maker-zip",
	"platforms": [
	"darwin"
	]
	},
	{
	"name": "@electron-forge/maker-deb",
	"config": {}
	},
	{
	"name": "@electron-forge/maker-rpm",
	"config": {}
	}
	]
	}
	}
	}
	// All of the Node.js APIs are available in the preload process.
	// It has the same sandbox as a Chrome extension.

	const {contextBridge, ipcRenderer} = require("electron");

	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])
	}
	})

	contextBridge.exposeInMainWorld('preload', {
	openDevTools: () => ipcRenderer.send('openDevTools'),
	inspectSharedWorker: () => ipcRenderer.send('inspectSharedWorker'),
	})
	// This file is required by the index.html file and will
	// be executed in the renderer process for that window.
	// No Node.js APIs are available in this process because
	// `nodeIntegration` is turned off. Use `preload.js` to
	// selectively enable features needed in the rendering
	// process.

	const h1 = document.createElement('h1');
	h1.textContent = `Running from ASAR: ${JSON.stringify(window.location.href.includes(".asar/"))}`;
	document.body.prepend(h1);

	async function testWorker() {
	const worker = new Worker('worker.js');
	worker.onmessage = (e) => {
	console.log('message from Worker:', e);
	};
	}

	async function testSharedWorker() {
	const worker = new SharedWorker('worker.js');
	worker.onerror = (e) => {
	console.log('SharedWorker error:', e);
	};
	worker.port.onmessage = (e) => {
	console.log('Message from SharedWorker:', e);
	};
	worker.port.start();
	}

	async function testSharedWorkerWorkaround() {
	const url = URL.createObjectURL(await (await fetch('worker.js')).blob());
	const worker = new SharedWorker(url);
	worker.onerror = (e) => {
	console.log('SharedWorker error:', e);
	};
	worker.port.onmessage = (e) => {
	console.log('Message from SharedWorker:', e);
	};
	worker.port.start();
	}
	function helperFunction() {
	return 'A worker loaded a helper function!';
	}
	console.log('I am executing in a worker!');

	if (self.postMessage) {
	self.postMessage('You successfully launched a Worker');
	importScripts('worker-helper.js');
	self.postMessage(helperFunction());
	}

	if (typeof SharedWorkerGlobalScope !== 'undefined' && self instanceof SharedWorkerGlobalScope) {
	self.onconnect = (e) => {
	console.log('Connected');
	e.ports[0].start();
	e.ports[0].postMessage('You successfully launched a SharedWorker');
	importScripts('worker-helper.js');
	e.ports[0].postMessage(helperFunction());
	};
	}