浏览器扩展侧边栏Web Serial API端口选择窗口不显示问题

要在Chrome扩展侧边栏中正常使用Web Serial API，需通过后台脚本中转串口请求，步骤如下：

1. 更新manifest.json权限与配置
   添加serial权限，并配置后台服务worker：

   {
     "name": "Side Panel Web Serial API",
     "description": "SPWSAPI",
     "version": "1.0",
     "manifest_version": 3,
     "permissions": ["sidePanel", "serial"],
     "side_panel": {"default_path": "test.html"},
     "background": {
       "service_worker": "background.js"
     }
   }
   

2. 编写后台脚本background.js
   后台脚本负责处理串口请求，并与侧边栏通信：

   chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
     if (message.type === 'REQUEST_SERIAL_PORT') {
       try {
         const port = await navigator.serial.requestPort();
         await port.open({ baudRate: 9600 });
         // 向侧边栏返回端口标识
         sendResponse({ success: true, portId: port.id });
         
         // 后台持续读取串口数据并发送到侧边栏
         const decoder = new TextDecoderStream();
         port.readable.pipeTo(decoder.writable);
         const reader = decoder.readable.getReader();
         
         while (true) {
           const { value, done } = await reader.read();
           if (done) break;
           chrome.runtime.sendMessage({ type: 'SERIAL_DATA', data: value });
         }
       } catch (error) {
         sendResponse({ success: false, error: error.message });
       }
       return true; // 标记异步响应
     }
   });
   

3. 修改侧边栏serial.js逻辑
   侧边栏通过消息向后台发起请求，并接收返回的数据：

   async function connectSerial() {
     const log = document.getElementById('target');
     try {
       const response = await chrome.runtime.sendMessage({ type: 'REQUEST_SERIAL_PORT' });
       if (!response.success) throw new Error(response.error);
       log.textContent += '串口连接成功，端口ID：' + response.portId + '\n';
     } catch (error) {
       log.innerHTML = error;
     }
   }
   
   // 监听后台发送的串口数据
   chrome.runtime.onMessage.addListener((message) => {
     if (message.type === 'SERIAL_DATA') {
       const log = document.getElementById('target');
       log.textContent += message.data + '\n';
     }
   });
   
   document.getElementById('connectButton').addEventListener('click', () => {
     if (chrome.runtime && navigator.serial) {
       connectSerial();
     } else {
       alert('Web Serial API或扩展API不支持。');
     }
   });
   

Chrome扩展侧边栏处于隔离上下文，出于安全策略，无法直接触发需要用户交互的权限弹窗（如Web Serial的端口选择框）。这类操作必须在用户直接交互驱动的上下文中执行，而后台脚本通过侧边栏按钮点击触发的消息调用，符合用户交互驱动的要求，因此可以正常弹出选择窗口并完成串口操作。

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