Usar WebHID

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

Nesta página, descrevemos aspectos da API específicos para extensões. Consulte o MDN para ver todos os detalhes da API WebHID.

Você encontra um app de exemplo para WebHID no nosso repositório de exemplos.

Disponibilidade em extensões

Chrome 117 ou mais recente

Permissões

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

Manifesto

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

Contextos de apoio

Essa API pode ser usada em quase todos os contextos. Não é possível usar o método WebHID.requestDevice() em service workers de extensão. Consulte a próxima seção para obter detalhes.

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

Diferenças das extensões do Chrome

Embora o WebHID esteja disponível para os service workers de extensão, o WebHID.requestDevice(), que retorna uma promessa que é resolvida com uma instância do HIDDevice, não pode ser chamado em um service worker de extensão. Para contornar isso, chame requestDevice() em uma página de extensão que não seja o service worker de extensão e envie uma mensagem a 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 service worker, que pode recuperá-lo usando o getDevices().

popup.js:

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

service-worker.js (link em inglês)

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();
    }
  }
});