Usa WebHID

Un dispositivo de interfaz humana (HID) recibe o proporciona salidas a los humanos. También se refiere al protocolo HID, un estándar para la comunicación bidireccional entre un host y un dispositivo que está diseñado para simplificar el procedimiento de instalación.

En esta página, se describen aspectos de la API específicos de las extensiones. Consulta MDN para obtener todos los detalles sobre la API de WebHID.

Puedes encontrar una app de ejemplo para WebHID en nuestro repositorio de muestras.

Disponibilidad en las extensiones

Chrome 117 o versiones posteriores.

Permisos

No se requieren permisos de archivos de manifiesto. Sin embargo, WebHID activa el flujo de permisos del usuario del navegador.

Manifest

No se necesitan claves de manifiesto para esta API.

Contextos complementarios

Esta API se puede usar en casi cualquier contexto. No se puede usar el método WebHID.requestDevice() en los service workers de extensión. Consulte la siguiente sección para obtener más detalles.

Cuando se usa esta API en un service worker de extensión, la sesión de conexión de dispositivos mantiene activo el service worker.

Diferencias de las extensiones de Chrome

Aunque WebHID está disponible para los service workers de extensión, WebHID.requestDevice(), que muestra una promesa que se resuelve con una instancia HIDDevice, no se puede llamar en un service worker de extensión. Para solucionar este problema, llama a requestDevice() desde una página de extensión que no sea el service worker de extensión y envía un mensaje a este.

El siguiente código sigue un patrón típico cuando llama a requestDevice() como parte de un flujo de permisos que requiere un gesto del usuario. Cuando se adquiere el dispositivo, envía un mensaje al service worker, que luego puede recuperarlo mediante 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();
    }
  }
});