Chrome扩展调用Web Bluetooth的requestDevice()报用户取消选择器错误

问题根因 #

Chrome 扩展的默认popup弹窗只要失去焦点就会被自动销毁，你调用navigator.bluetooth.requestDevice时会弹出系统级的蓝牙设备选择对话框，此时popup会直接失焦被销毁，对应的JS执行上下文完全失效，API就会误返回用户主动取消的错误，和你的代码逻辑、编译配置没有关系。

可用解决方案 #

方案1：独立配对窗口（兼容性最好） #

这是最通用的解决方式，完全避开popup自动销毁的问题：

1. 在扩展项目中新增一个独立的配对页面bluetooth-pair.html以及对应的逻辑脚本
2. 修改popup内的按钮点击逻辑，不再直接调用蓝牙API，改为调用chrome.windows.create打开这个独立页面，可指定小尺寸模拟弹窗效果：

// popup内的按钮点击逻辑
document.getElementById("test-button")?.addEventListener("click", async () => {
  await chrome.windows.create({
    url: chrome.runtime.getURL("bluetooth-pair.html"),
    type: "popup",
    width: 400,
    height: 300
  })
})

3. 把原来的蓝牙请求逻辑移到bluetooth-pair.html的脚本中，独立页面不会因为弹出系统选择框失焦被销毁，可正常完成配对流程，配对完成后可通过chrome.runtime.sendMessage把设备信息回传给扩展其他组件，再自行关闭当前窗口即可。

方案2：使用侧面板（Side Panel） #

如果你的扩展目标使用人群的Chrome版本≥114，可直接把蓝牙交互逻辑放在侧面板中实现，侧面板不会因为失去焦点自动关闭，可直接调用蓝牙API正常执行。

必须的权限配置 #

不管用哪种方案，都需要在manifest.json中声明蓝牙权限：

// manifest v3 示例
{
  "manifest_version": 3,
  "permissions": ["bluetooth"],
  // 其他配置...
}

注意：navigator.bluetooth.requestDevice需要用户主动交互触发，且必须在有DOM的页面上下文执行，不能在扩展的Service Worker中直接调用。

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