Usar WebHID

Um dispositivo de interface humana (HID, na sigla em inglês) recebe entradas ou fornece saídas para humanos. Ele também se refere ao protocolo HID, um padrão de comunicação bidirecional entre um host e um dispositivo projetado para simplificar o procedimento de instalação.

Esta página descreve aspectos da API específicos para extensões. Consulte o MDN para conferir todos os detalhes da API WebHID.

Encontre um app de exemplo para WebHID no nosso repositório de amostras.

Disponibilidade em extensões

Chrome 117 ou mais recente.

Permissões

Nenhuma permissão de arquivo de manifesto é necessária. No entanto, o WebHID aciona o fluxo de permissão do usuário do navegador.

Manifesto

Nenhuma chave de manifesto é necessária para essa API.

Compatibilidade com contextos

Essa API pode ser usada em quase qualquer contexto. O método WebHID.requestDevice() não pode ser usado em workers de serviço de extensão. Consulte a próxima seção para obter detalhes.

Quando essa API é usada em um worker de serviço de extensão, a sessão de conexão dos dispositivos mantém o worker de serviço ativo.

Diferenças das extensões do Chrome

Embora o WebHID esteja disponível para workers de serviço de extensão, WebHID.requestDevice(), que retorna uma promessa resolvida com uma instância HIDDevice, não pode ser chamado em um worker de serviço de extensão. Para contornar esse problema, chame requestDevice() de uma página de extensão diferente do service worker de extensão e envie uma mensagem para ele.

O código a seguir segue um padrão típico chamando requestDevice() como parte de um fluxo de permissões que exige um gesto do usuário. Quando o dispositivo é adquirido, ele envia uma mensagem para o worker do serviço, que pode recuperar o dispositivo usando 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();
    }
  }
});