Web 蓝牙和 Chrome 扩展：用户取消了 requestDevice() 选择器答案

【问题标题】：Web Bluetooth & Chrome Extension: User cancelled the requestDevice() chooserWeb 蓝牙和 Chrome 扩展：用户取消了 requestDevice() 选择器
【发布时间】：2021-12-20 18:19:48
【问题描述】：

尝试从 Google Chrome 扩展程序弹出窗口打开网络蓝牙设备选择器对话框时出现以下错误： DOMException: User cancelled the requestDevice() chooser.

我正在使用带有 ES2020 目标、模块和库的 TypeScript 和 browserify。这是从我的 popup.html 运行的代码

document.getElementById("test-button")?.addEventListener("click", async () => {
    await navigator.bluetooth
        .requestDevice({ acceptAllDevices: true })
        .then((device) => {
            alert(device.name);
        })
        .catch((error) => {
            console.error(error); // <- Getting the error here!
        });
});

我假设有一些 Chrome 扩展魔法会欺骗网络蓝牙认为我点击离开了对话框，但不知道如何解决这个问题。有什么想法吗？

【问题讨论】：

标签： google-chrome-extension web-bluetooth

【解决方案1】：

如https://bugs.chromium.org/p/chromium/issues/detail?id=994185 中所述，Chrome 扩展程序弹出窗口不支持网络蓝牙。

但它在 Chrome 扩展程序“选项卡/选项”页面中受支持，因为它充当常规选项卡。

我还没有尝试重现这一点，但我认为问题在于 Web 蓝牙没有代码来处理创建权限提示作为扩展弹出窗口的子项。它适用于选项页面，因为它是一个普通的 Chrome 标签页，也适用于独立的应用程序窗口。

我的建议是打开一个 Chrome 扩展常规页面，其中包含一些与附近蓝牙设备交互的代码。

// popup.js

button.addEventListener("click", function() {
  // Open a page that contains Javascript to handle Bluetooth devices.
  chrome.tabs.create({ url: "page.html" });
});

【讨论】：