Chrome & Web Serial API 如何无需弹窗获取已授权串口

无需重复调用navigator.serial.requestPort()触发弹窗的方案是存在的，核心依赖navigator.serial.getPorts()接口实现

实现逻辑 #

• 首次接入串口时，仍需要调用requestPort()触发用户选择弹窗完成授权，浏览器会持久化保存该站点对指定串口的访问权限，只要用户不主动清除站点权限，后续访问无需重复授权
• 后续访问站点时，直接调用getPorts()即可获取所有当前站点已获得授权的串口实例列表，无需任何弹窗交互，示例代码如下：

// 页面初始化时直接拉取已授权串口
async function getAuthorizedSerialPort() {
  const portList = await navigator.serial.getPorts();
  // 可通过getInfo()返回的vendorId、productId匹配目标设备
  const targetPort = portList.find(port => {
    const info = port.getInfo();
    return info.usbVendorId === 0x1234 && info.usbProductId === 0x5678; // 替换为你的设备标识
  });
  if (targetPort) {
    // 直接打开串口使用
    await targetPort.open({ baudRate: 115200 });
    return targetPort;
  }
  // 无匹配的已授权串口时，再引导用户触发授权流程
  // 注：requestPort()必须在点击等用户交互事件回调中调用，否则会被浏览器拦截
  return null;
}

注意事项 #

• 授权仅在当前浏览器、当前站点域名下生效，跨浏览器、跨域名无法共享授权记录
• 若用户在浏览器的站点权限设置中删除了串口授权，getPorts()将不再返回对应串口，需要重新走授权流程
• getPorts()无调用时机限制，无需用户交互即可直接调用

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