Un dispositivo de interfaz humana (HID) recibe entradas de las personas o les proporciona salidas. También hace referencia al protocolo HID, un estándar para la comunicación bidireccional entre un host y un dispositivo diseñado para simplificar el procedimiento de instalación.
En esta página, se describen los aspectos de la API que son particulares de las extensiones. Consulta MDN para obtener todos los detalles de 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 archivo de manifiesto. Sin embargo, WebHID activa el flujo de permisos del usuario del navegador.
Manifiesto
No se necesitan claves de manifiesto para esta API.
Contextos compatibles
Esta API se puede usar en casi cualquier contexto. El método WebHID.requestDevice() no se puede usar en los trabajadores de servicio de extensión. Consulte la siguiente sección para obtener más detalles.
Cuando se usa esta API en un trabajador de servicio de extensión, la sesión de conexión de los dispositivos mantiene activo el trabajador de servicio.
Diferencias en la extensión de Chrome
Aunque WebHID está disponible para los service workers de extensiones, no se puede llamar a WebHID.requestDevice(), que muestra una promesa que se resuelve con una instancia de HIDDevice, en un service worker de extensión. Para evitar esto, llama a requestDevice() desde una página de extensión que no sea el service worker de la extensión y envía un mensaje a este.
El siguiente código sigue un patrón típico llamando 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 trabajador de servicio, que luego puede recuperarlo con 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();
}
}
});