Usar WebUSB

A API WebUSB expõe dispositivos compatíveis com USB (Universal Serial Bus) não padrão na Web. Nesta página, descrevemos aspectos da API específicos para extensões. Consulte o MDN para ver todos os detalhes da API WebUSB.

Disponibilidade em extensões

Chrome 118 ou mais recente.

Permissões

Nenhuma permissão para arquivo de manifesto é necessária. No entanto, o WebUSB aciona o fluxo de permissões de 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. 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 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 WebUSB esteja disponível para os 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 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.usb.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.usb.getDevices();
    for (const device of devices) {
      // open device connection.
      await device.open();
    }
  }
});