Chrome扩展Service Worker中navigator.usb.requestDevice缺失问题求助

核心限制说明 #

navigator.usb.requestDevice是必须由用户交互触发的API，Service Worker作为无界面的后台执行环境，受浏览器安全策略限制，无法直接调用这类需要弹出用户交互窗口的方法——这是为了防止后台脚本未经许可访问硬件设备。

正确实现步骤 #

1. 在交互页面/Popup中触发设备授权 #

必须在有用户交互的前端上下文（比如扩展的Popup页面、通过chrome.windows.create创建的可见页面）中完成设备选择：

• 给页面添加触发按钮，监听点击事件调用requestDevice：

// popup.js 或自定义页面脚本
document.querySelector('#connect-device').addEventListener('click', async () => {
  try {
    // 按Oculus Quest的设备ID配置过滤条件
    const device = await navigator.usb.requestDevice({
      filters: [{ vendorId: 0x2833 }] // Oculus的VendorID，可根据实际设备调整
    });
    // 将授权后的设备实例传递给Service Worker
    chrome.runtime.sendMessage({ 
      type: 'USB_DEVICE_READY', 
      device: device 
    });
  } catch (err) {
    console.error('设备选择失败:', err);
  }
});

2. Service Worker接收设备并维持ADB连接 #

在Service Worker中监听消息，拿到授权设备后执行ADB连接逻辑：

// service-worker.js
let adbDevice = null;

chrome.runtime.onMessage.addListener(async (msg, sender, sendResp) => {
  if (msg.type === 'USB_DEVICE_READY') {
    adbDevice = msg.device;
    // 初始化ADB连接（这里替换为你的ADB初始化代码）
    await initADBConnection(adbDevice);
    console.log('ADB连接已建立');
  }
});

// 监听下载任务事件，传输资源到设备
chrome.runtime.onMessage.addListener(async (msg) => {
  if (msg.type === 'DOWNLOAD_AND_TRANSFER' && adbDevice) {
    // 下载资源
    const response = await fetch(msg.resourceUrl);
    const blob = await response.blob();
    // 将资源传输到Oculus设备
    await transferToDevice(adbDevice, blob);
  }
});

3. 修复chrome.windows.create无效的问题 #

你之前调用chrome.windows.create后没弹出设备选择，是因为新页面必须由用户主动触发交互才能调用requestDevice：

• 创建的页面里必须包含可见的交互元素（比如按钮），用户点击后才执行navigator.usb.requestDevice，不能在Service Worker中直接操控新页面自动执行该方法。

关于Content Script的疑问 #

不需要在Content Script中创建ADB连接。Content Script注入到网页上下文，权限受限且依赖网页环境，远不如在扩展自有页面（Popup/独立交互页）完成设备授权，再交给Service Worker处理后台传输的方案稳定。

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