Use WebHID

A Human Interface Device (HID) takes input from or provides output to humans. It also refers to the HID protocol, a standard for bi-directional communication between a host and a device that is designed to simplify the installation procedure.

This page describes aspects of the API that are particular to extensions. Refer to MDN for complete details of the WebHID API.

You can find a sample app for WebHID in our samples repository.

Availability in extensions

Chrome 117 or later.

Permissions

No manifest file permissions are required; however WebHID triggers the browser's user permission flow.

Manifest

No manifest keys are needed for this API.

Supporting contexts

This API may be used in almost any context. The WebHID.requestDevice() method cannot be used in extension service workers. See the next section for details.

When this API is used in an extension service worker, the devices connection session keeps the service worker alive.

Chrome extension differences

Although WebHID is available to extension service workers, WebHID.requestDevice(), which returns a promise that resolves with an HIDDevice instance, cannot be called in an extension service worker. To get around this, call requestDevice() from an extension page other than the extension service worker and send a message to the extension service worker.

The following code follows a typical pattern by calling requestDevice() as part of a permissions flow requiring a user gesture. When the device is acquired it sends a message to the service worker, which can then retrieve the device using getDevices().

popup.js:

myButton.addEventListener("click", async () => {
  await navigator.hid.requestDevice({
    filters: [{ vendorId: 0x1234, productId: 0x5678 }],
  });
  chrome.runtime.sendMessage("newDevice");
});

service-worker.js

chrome.runtime.onMessage.addListener(async (message) => {
  if (message === "newDevice") {
    const devices = await navigator.hid.getDevices();
    for (const device of devices) {
      // open device connection.
      await device.open();
    }
  }
});