Usar WebUSB

A API WebUSB expõe dispositivos compatíveis com o Universal Serial Bus (USB) não padrão à Web. Esta página descreve aspectos da API específicos para extensões. Consulte o MDN para saber todos os detalhes sobre a API WebUSB.

Disponibilidade em extensões

Chrome 118 ou mais recente.

Permissões

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

Manifesto

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

Contextos de apoio

Essa API pode ser usada em quase qualquer contexto. O método WebUSB.requestDevice() não pode ser usado em service workers 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 entre as extensões do Chrome

Embora o WebUSB esteja disponível para service workers de extensão, o WebUSB.requestDevice(), que retorna uma promessa que é resolvida com uma instância de USBDevice, não pode ser chamado em um service worker 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.usb.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.usb.getDevices();
    for (const device of devices) {
      // open device connection.
      await device.open();
    }
  }
});