Ubuntu20.04下Chromium 118无法通过Web Serial API识别串口求助

问题背景 #

Ubuntu 20.04系统中，通过Snap安装的Chromium 118.0.5993.88使用Web Serial API连接USB ESP32时，串口列表为空；但相同测试脚本在Google Chrome中可正常识别所有串口。已确认Arduino能识别该串口，用户已加入dialout组，执行过sudo snap connect chromium:raw-usb并重装Chromium，问题仍未解决。

解决步骤 #

1. 赋予Chromium串口接口权限 #

Snap的raw-usb权限不覆盖串口设备的单独访问权限，需手动连接serial-port接口：

sudo snap connect chromium:serial-port

执行完成后重启Chromium，重新测试串口识别。

2. 添加ESP32专属udev规则 #

如果系统未正确赋予ESP32串口设备访问权限，需添加udev规则：

• 创建规则文件：

sudo nano /etc/udev/rules.d/99-esp32.rules

• 在文件中写入以下内容（可通过lsusb命令查看你的ESP32的VID和PID，示例为常见的ESP32参数）：

SUBSYSTEM=="tty", ATTRS{idVendor}=="10C4", ATTRS{idProduct}=="EA60", MODE="0666", GROUP="dialout"

• 保存文件后重载udev规则并触发设备刷新：

sudo udevadm control --reload-rules && sudo udevadm trigger

拔掉并重新插入ESP32，重启Chromium测试。

3. 检查并配置Snap允许的串口路径 #

Snap应用仅能访问特定路径下的串口设备（默认/dev/ttyUSB*、/dev/ttyACM*），若ESP32被识别为其他路径（如/dev/ttyS*），需手动添加到允许列表：

• 查看ESP32的实际设备路径：

ls /dev/tty* | grep -E "(USB|ACM)"

• 将设备路径添加到Snap的Chromium配置：

sudo snap set chromium serial-port.paths=/dev/ttyS0

（多个路径用逗号分隔，如/dev/ttyS0,/dev/ttyUSB0）
重启Chromium后测试。

4. 切换为Deb版Chromium（备选方案） #

若Snap沙箱限制无法绕过，可卸载Snap版并安装Deb版：

sudo snap remove chromium
sudo apt update && sudo apt install chromium-browser

Deb版无Snap的严格沙箱限制，Web Serial API可正常识别串口。

测试脚本（格式化版） #

<!DOCTYPE html>
<html>
<head>
  <title>Serial Ports List</title>
</head>
<body>

<h1>Serial Ports Test</h1>

<button id="listPortsButton">List Serial Ports</button>

<script>
  async function listSerialPorts() {
    try {
      const availablePorts = await navigator.serial.getPorts();
      availablePorts.forEach(port => {
        console.log('Port:', port);
      });
    } catch (error) {
      console.error('There was an error listing serial ports:', error);
    }
  }

  document.querySelector("#listPortsButton").addEventListener("click", async () => {
    try {
      const port = await navigator.serial.requestPort();
      console.log('User-selected port:', port);
      listSerialPorts();
    } catch (err) {
      console.error('There was an error selecting a port:', err);
    }
  });
</script>

</body>
</html>

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