0

I am trying find a way to connect a usb serial port in devtools so that I can use the data from a usb connect device in devtools.

Bismark Asiedu Asante
  • 142
  • 1
  • 14

1 Answers1

0

The Web Serial API allows websites to communicate with serial devices. See https://web.dev/serial/

Does it fail for you in the context of a Chrome Extension? If so, where?

François Beaufort
  • 4,843
  • 3
  • 29
  • 38
  • Yes, it is in the context of a chrome extension using devtools. The challenge is navigator.serial.requestPort() is not able to connect the usb device in devtools because of permission and I was looking another way around it. – Bismark Asiedu Asante Aug 16 '21 at 07:13
  • 1
    You could try the `chrome.serial` API for Chrome Apps. See https://developer.chrome.com/docs/extensions/reference/serial/ Note that the Chrome Apps platform is being deprecated though. – François Beaufort Aug 16 '21 at 07:20
  • Ok thanks. I will give it a try and let you know of the outcome. – Bismark Asiedu Asante Aug 16 '21 at 07:26
  • Note that if you open a Chrome Extension page such as `chrome-extension:///my-page.html`, `navigator.serial.requestPort();` works fine. Users will see a browser prompt. (I just did) – François Beaufort Aug 16 '21 at 07:47
  • Yes it will work in a browser page but in the devtools page, I get the error : DOMException: Failed to execute 'requestPort' on 'Serial': Access to the feature "serial" is disallowed by permissions policy. at connectSerial (chrome-extension://Extension ID>devtoolsPanel.js:103:45) at HTMLInputElement. (chrome-extension:///devtoolsPanel.js:89:13) – Bismark Asiedu Asante Aug 16 '21 at 09:08
  • I guess your best bet is to open a "regular" Chrome extension page, gather data from your device, then pass it through extension messaging (https://developer.chrome.com/docs/extensions/mv2/messaging/) to your devtools page then. – François Beaufort Aug 16 '21 at 09:28
  • Oh yeah that sounds possible I will try that now. – Bismark Asiedu Asante Aug 16 '21 at 09:36
  • Sorry for the long break, currently working on it. I will be passing the data from a created tab to devtools panel through the content script. This seems possible because we have already exchanged some data through that medium and also reading doc you sent me shows we can Long-lived connections which is also good for me in this case. – Bismark Asiedu Asante Aug 20 '21 at 08:35
  • Thank you for the support. I finally got it working passing the data from the page to the devtools panel. First I connect the serial device by a button click process the data into the expected for and using a customEvent approach presented by https://stackoverflow.com/questions/33991572/how-to-pass-data-from-content-script-to-page-level to send the data to content script. – Bismark Asiedu Asante Aug 23 '21 at 09:42