feat: add support for WebUSB (#36289)

* feat: add support for WebUSB * fixup for gn check * fixup gn check on Windows * Apply review feedback Co-authored-by: Charles Kerr <charles@charleskerr.com> * chore: address review feedback * chore: removed unneeded code * Migrate non-default ScopedObservation<> instantiations to ScopedObservationTraits<> in chrome/browser/ 4016595 Co-authored-by: Charles Kerr <charles@charleskerr.com>
2022-11-22 16:50:32 -05:00 · 2022-11-22 16:50:32 -05:00 · 629c54ba36
commit 629c54ba36
parent 2751c2b07f
29 changed files with 1772 additions and 23 deletions
--- a/docs/fiddles/features/web-usb/index.html
+++ b/docs/fiddles/features/web-usb/index.html
@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
+    <title>WebUSB API</title>
+  </head>
+  <body>
+    <h1>WebUSB API</h1>
+
+    <button id="clickme">Test WebUSB</button>
+
+    <h3>USB devices automatically granted access via <i>setDevicePermissionHandler</i></h3>
+    <div id="granted-devices"></div>
+    
+    <h3>USB devices automatically granted access via <i>select-usb-device</i></h3>
+    <div id="granted-devices2"></div>
+
+    <script src="./renderer.js"></script>
+  </body>
+</html>
--- a/docs/fiddles/features/web-usb/main.js
+++ b/docs/fiddles/features/web-usb/main.js
@ -0,0 +1,72 @@
+const {app, BrowserWindow} = require('electron')
+const e = require('express')
+const path = require('path')
+
+function createWindow () {
+  const mainWindow = new BrowserWindow({
+    width: 800,
+    height: 600
+  })
+  
+  let grantedDeviceThroughPermHandler
+
+  mainWindow.webContents.session.on('select-usb-device', (event, details, callback) => {
+    //Add events to handle devices being added or removed before the callback on
+    //`select-usb-device` is called.
+    mainWindow.webContents.session.on('usb-device-added', (event, device) => {    
+      console.log('usb-device-added FIRED WITH', device)
+      //Optionally update details.deviceList
+    })
+  
+    mainWindow.webContents.session.on('usb-device-removed', (event, device) => {
+      console.log('usb-device-removed FIRED WITH', device)
+      //Optionally update details.deviceList
+    })
+
+    event.preventDefault()
+    if (details.deviceList && details.deviceList.length > 0) {
+      const deviceToReturn  = details.deviceList.find((device) => {
+        if (!grantedDeviceThroughPermHandler || (device.deviceId != grantedDeviceThroughPermHandler.deviceId)) {
+          return true
+        }
+      })
+      if (deviceToReturn) {
+        callback(deviceToReturn.deviceId)        
+      } else {
+        callback()
+      }
+    }
+  })
+
+  mainWindow.webContents.session.setPermissionCheckHandler((webContents, permission, requestingOrigin, details) => {
+    if (permission === 'usb' && details.securityOrigin === 'file:///') {
+      return true
+    }
+  })
+
+  
+  mainWindow.webContents.session.setDevicePermissionHandler((details) => {
+    if (details.deviceType === 'usb' && details.origin === 'file://') {
+      if (!grantedDeviceThroughPermHandler) {        
+        grantedDeviceThroughPermHandler = details.device
+        return true
+      } else {
+        return false
+      }
+    }
+  })
+  
+  mainWindow.loadFile('index.html')
+}
+
+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()
+})
--- a/docs/fiddles/features/web-usb/renderer.js
+++ b/docs/fiddles/features/web-usb/renderer.js
@ -0,0 +1,33 @@
+function getDeviceDetails(device) {
+  return grantedDevice.productName || `Unknown device ${grantedDevice.deviceId}`
+}
+
+async function testIt() {
+  const noDevicesFoundMsg = 'No devices found'
+  const grantedDevices = await navigator.usb.getDevices()
+  let grantedDeviceList = ''
+  if (grantedDevices.length > 0) {    
+    grantedDevices.forEach(device => {
+      grantedDeviceList += `<hr>${getDeviceDetails(device)}</hr>`
+    })    
+  } else {
+    grantedDeviceList = noDevicesFoundMsg
+  }
+  document.getElementById('granted-devices').innerHTML = grantedDeviceList
+
+  grantedDeviceList = ''
+  try {
+    const grantedDevice = await navigator.usb.requestDevice({
+      filters: []
+    })
+    grantedDeviceList += `<hr>${getDeviceDetails(device)}</hr>`
+    
+  } catch (ex) {
+    if (ex.name === 'NotFoundError') {
+      grantedDeviceList = noDevicesFoundMsg
+    }
+  }
+  document.getElementById('granted-devices2').innerHTML = grantedDeviceList
+}
+
+document.getElementById('clickme').addEventListener('click',testIt)