[Feature]: Cannot grant access to WebUSB device, "Connect" dialog cannot be managed

[busticated]

Bug description

Steps to reproduce the problem:

1. Launch a browser:

   const browser = await puppeteer.launch();

2. Navigate to a url w/ WebUSB functionality:

   const page = await browser.newPage();
   await page.goto('https://example.com/webusb-test'); // replace example url

3. Listen for "Connect" dialog and accept device:

   page.on("dialog", async dialog => {
       await dialog.accept('my-device-name'); 
   });

4. Request a device:

   await page.evaluate(() => {
       const device = await navigator.usb.requestDevice({ filters: [{ vendorId: <my-id> }] });
   });

Dialog launches but i'm not able to programmatically interact with it to select and approve my device.

Puppeteer version

16.1.1

Node.js version

16.16.0

npm version

8.11.0

What operating system are you seeing the problem on?

macOS

Relevant log output

No response

[OrKoN]

The dialog is for JS alert/confirm dialogs etc. I think WebUSB is using a different mechanism that is more similar to permissions than to JS-driven dialogs. Have you tried to override the dialog using browser permission overrides https://pptr.dev/api/puppeteer.browsercontext.overridepermissions? if that does not work, I think it's a feature request.

[busticated]

Have you tried to override the dialog using browser permission overrides

no, but i'll give that a shot and share my findings here. i haven't used that API before though so i'm not sure what value(s) to try. any tips there would be much appreciated. is it at all related to WebUsbAllowDevicesForUrls? (docs)

[busticated]

ok, using the following routine:

async function launchBrowser(url, permissions){
    const browser = await puppeteer.launch({ headless: false, slowMo: 1000 });
    const context = browser.defaultBrowserContext();
    await context.overridePermissions(url, permissions);
    const page = await browser.newPage();
    await page.goto(url);
    return { browser, page };
}

....with permissions set to ['webusb'], i get:

Error: Unknown permission: webusb

these values fail in the same way as well: ['usb'], ['WebUsbAllowDevicesForUrls'] - none are recognized and the process errors out. i even tried changing the casing - e.g. webusb -> WebUSB, WebUsb, WEBUSB. this suggests maybe the value should be 'USB' but that didn't work either.

so, i'm a bit stumped on what the correct permission key should be (or even if there is one at all) 🤷‍♂️

fwiw, i also found my way to: chrome://usb-internals/ (info) but haven't figured out how to make effective use of it. i was thinking maybe this could let me pre-approve a specific device and thus bypass the "Connect" dialog entirely via navigator.usb.getDevices() but no luck there yet either 😭

[OrKoN]

@busticated thanks for the investigation! As I am not really sure if this can be solved via permissions, I assume the support for handling this dialog is missing from CDP.

[OrKoN]

Filed https://crbug.com/1355742

[busticated]

@OrKoN ah, makes sense. thanks for filing that. i starred it and will follow along 🙏👍