kyle-nrs/index.html Secret

## 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'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.

    <button id="clickme">Test Serial</button>

    <!-- 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 } = require("electron");
const path = require("path");
const { usb, getDeviceList } = require("usb");
const serialport = require("./serialport");

const SUPPORTED_DEVICES = ["11734:8522", "3111:9002"];

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

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

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

  mainWindow.webContents.session.on(
    "select-serial-port",
    (event, portList, webContents, callback) => {
      console.log(portList);
      let selectedPort = portList.find((device) => {
        // Automatically return the first device
        return true;
      });
      if (!selectedPort) {
        callback("");
      } else {
        callback(selectedPort.portId);
      }
    }
  );

  for (const device of getDeviceList()) {
    if (serialport.isSuportedDevice(device)) {
      serialport.allowSerial(device, mainWindow);
    }
  }
}

app.whenReady().then(() => {
  createWindow();

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

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


## package.json
{
  "name": "serial-fiddle",
  "productName": "serial-fiddle",
  "description": "My Electron application description",
  "keywords": [],
  "main": "./main.js",
  "version": "1.0.0",
  "author": "kyle",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "usb": "*"
  },
  "devDependencies": {
    "electron": "18.1.0"
  }
}

## preload.js
// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
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
async function testIt() {
  //Our actual code uses navigator.serial.requestPort()
  //This doesn't crash in development mode for some reason.
  const existingPermissions = await navigator.serial.requestPort({
    filters: [{
        usbVendorId: '3111',
        usbProductId: '9002'
      }]
    });
  //await navigator.serial.getPorts(); // Bombs here:
  console.log("Existing port permissions: ", existingPermissions);
}

document.getElementById("clickme").addEventListener("click", testIt);

## serialport.js
(function (globalThis, factory) {
  module.exports = factory();
})(this, function () {
    const SUPPORTED_DEVICES = ["11734:8522", "3111:9002"];

    function isSuportedDevice(device) {
      return SUPPORTED_DEVICES.includes(
        `${device.deviceDescriptor.idVendor}:${device.deviceDescriptor.idProduct}`
      );
    }

    function allowSerial(device, window) {
      window.webContents.executeJavaScript(
        `navigator.serial.requestPort({filters: [{ usbVendorId: ${device.deviceDescriptor.idVendor}, usbProductId: ${device.deviceDescriptor.idProduct} }]})`,
        true
      );
    }

  return {
    isSuportedDevice,
    allowSerial,
  };
});

## styles.css
/* styles.css */

/* Add styles here to customize the appearance of your app */
	<!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'">
	<title>Hello World!</title>
	</head>
	<body>
	<h1>Hello World!</h1>
	We are using Node.js <span id="node-version"></span>,
	Chromium <span id="chrome-version"></span>,
	and Electron <span id="electron-version"></span>.

	<button id="clickme">Test Serial</button>

	<!-- 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 } = require("electron");
	const path = require("path");
	const { usb, getDeviceList } = require("usb");
	const serialport = require("./serialport");

	const SUPPORTED_DEVICES = ["11734:8522", "3111:9002"];

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

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

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

	mainWindow.webContents.session.on(
	"select-serial-port",
	(event, portList, webContents, callback) => {
	console.log(portList);
	let selectedPort = portList.find((device) => {
	// Automatically return the first device
	return true;
	});
	if (!selectedPort) {
	callback("");
	} else {
	callback(selectedPort.portId);
	}
	}
	);

	for (const device of getDeviceList()) {
	if (serialport.isSuportedDevice(device)) {
	serialport.allowSerial(device, mainWindow);
	}
	}
	}

	app.whenReady().then(() => {
	createWindow();

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

	app.on("window-all-closed", function () {
	if (process.platform !== "darwin") app.quit();
	});
	{
	"name": "serial-fiddle",
	"productName": "serial-fiddle",
	"description": "My Electron application description",
	"keywords": [],
	"main": "./main.js",
	"version": "1.0.0",
	"author": "kyle",
	"scripts": {
	"start": "electron ."
	},
	"dependencies": {
	"usb": "*"
	},
	"devDependencies": {
	"electron": "18.1.0"
	}
	}
	// All of the Node.js APIs are available in the preload process.
	// It has the same sandbox as a Chrome extension.
	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])
	}
	})
	async function testIt() {
	//Our actual code uses navigator.serial.requestPort()
	//This doesn't crash in development mode for some reason.
	const existingPermissions = await navigator.serial.requestPort({
	filters: [{
	usbVendorId: '3111',
	usbProductId: '9002'
	}]
	});
	//await navigator.serial.getPorts(); // Bombs here:
	console.log("Existing port permissions: ", existingPermissions);
	}

	document.getElementById("clickme").addEventListener("click", testIt);
	(function (globalThis, factory) {
	module.exports = factory();
	})(this, function () {
	const SUPPORTED_DEVICES = ["11734:8522", "3111:9002"];

	function isSuportedDevice(device) {
	return SUPPORTED_DEVICES.includes(
	`${device.deviceDescriptor.idVendor}:${device.deviceDescriptor.idProduct}`
	);
	}

	function allowSerial(device, window) {
	window.webContents.executeJavaScript(
	`navigator.serial.requestPort({filters: [{ usbVendorId: ${device.deviceDescriptor.idVendor}, usbProductId: ${device.deviceDescriptor.idProduct} }]})`,
	true
	);
	}

	return {
	isSuportedDevice,
	allowSerial,
	};
	});
	/* styles.css */

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