Puppeteer拦截navigator.usb.requestDevice弹出USB对话框的方法

navigator.usb.requestDevice触发的USB设备选择对话框不属于网页上下文内的可监听对话框，你尝试的两种常规监听方案无法触发回调是正常现象，没有办法通过dialog相关事件拦截该弹窗。

• Puppeteer的page.on('dialog', callback)仅能监听网页内调用alert()/confirm()/prompt()/beforeunload触发的页内原生对话框，USB设备选择器是浏览器进程渲染的系统级权限选择UI，不属于网页渲染进程管辖的内容，根本不会触发该事件。
• DOM环境下绑定document.addEventListener('dialog', ...)本身逻辑就不成立：网页不存在冒泡到document层的原生dialog事件，<dialog>自定义元素触发的close/cancel事件也仅在元素自身上触发；再加上市面浏览器的USB选择弹窗不会被插入到当前页面的DOM树中，完全脱离网页上下文，不可能通过DOM事件捕获。

如果是在Puppeteer自动化场景下处理该逻辑，不需要拦截弹窗，可直接从根源避免弹窗弹出：

方案1：提前覆写WebUSB API（最稳定，推荐） #

在页面加载前注入脚本覆写navigator.usb.requestDevice方法，直接返回预设的模拟设备对象，完全跳过弹窗流程：

// 必须在page.goto()之前调用，确保覆写逻辑在页面业务脚本执行前生效
await page.evaluateOnNewDocument(() => {
  // 按需配置模拟设备的属性、方法
  const mockDevice = {
    deviceName: 'Mock_USB_Device',
    vendorId: 0x27b8, // 替换为目标设备的VID
    productId: 0x01ed, // 替换为目标设备的PID
    open: async () => {},
    selectConfiguration: async () => {},
    claimInterface: async () => {},
    releaseInterface: async () => {},
    selectAlternateInterface: async () => {},
    controlTransferIn: async () => ({ data: new DataView(new ArrayBuffer(0)) }),
    controlTransferOut: async () => ({ bytesWritten: 0 }),
    transferIn: async () => ({ data: new DataView(new ArrayBuffer(0)) }),
    transferOut: async () => ({ bytesWritten: 0 }),
    close: async () => {}
  };
  navigator.usb.requestDevice = async () => mockDevice;
});

方案2：通过启动参数+CDP授权真实设备 #

如果需要操作真实连接的USB设备，可在启动Puppeteer时添加测试参数，通过Chrome DevTools Protocol直接给站点授予设备权限，跳过选择弹窗：

1. 启动浏览器时添加专用启动参数：

const browser = await puppeteer.launch({
  args: [
    '--enable-webusb-testing',
    '--disable-webusb-security' // 仅可用于本地测试环境，禁止在生产场景使用
  ]
});

2. 创建CDP会话，绑定已连接的USB设备并直接授予当前页面访问权限，整个流程不会触发选择弹窗。

不推荐方案 #

如果一定要处理已经弹出的浏览器级选择框，只能通过系统级桌面自动化工具模拟键盘、鼠标操作点击弹窗，该方案受系统分辨率、窗口位置、前台进程状态影响极大，稳定性极差，非必要不要使用。

内容的提问来源于stack exchange，提问作者ealfonso