Search code examples
web-bluetooth

How to control the size and position of the window used by navigator.bluetooth.requestDevice?

Ref this issue: How to make the Web Bluetooth Pair button work when run as chrome app

In my tests, the window which pops up when navigator.bluetooth.requestDevice is called is quite large, covers the html window from which it was invoked completely and the bottom of the window, containing the Pair and Cancel buttons are off the bottom of the screen and so not visible.

Is it possible to control and position of the requestDevice window?

Window containing basic html

requestDevice window covering original and extending off screen

<html>
  <head>
   <script type="text/javascript" src="bluetoothle.js"></script> 
   <script type="text/javascript" src="popup.js"></script>
  </head>
  <body>
    <h1>Hello Bluetooth</h1>
    <h2>Device Discovery</h2>
    <button id="btn_discover">Discover Devices</button>
    <div id="devices"></div>
  </body>
</html>

navigator.bluetooth.requestDevice(options)
  .then(device => {
    console.log('> Name:             ' + device.name);
    console.log('> Id:               ' + device.id);
    console.log('> Connected:        ' + device.gatt.connected);
    bluetoothle.selected_device = device;
    console.log(bluetoothle.selected_device);
  })
  .catch(error => {
    console.log('ERROR: '+ error);
  });
Solution

  • No, there is no way to control the size of the device chooser window that requestDevice() opens. It will use a fixed maximum size. (I don't have those dimensions on hand while writing here.) chrome.app.window can be opened maximized to work around this in the short term.

    (Also, while there may be reasons to develop a chrome app or to retrofit web bluetooth into a previous one, if you haven't seen that Chrome Apps are being deprecated on Windows, macOS, Linux, you should read the announcement.)