Usar WebUSB

A API WebUSB expõe à Web dispositivos compatíveis com Universal Serial Bus (USB) não padrão. Nesta página, descrevemos aspectos da API que são 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 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 suporte

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 service worker de extensão, a sessão de conexão dos dispositivos mantém o service worker ativo.

Diferenças entre extensões do Chrome

Embora o WebUSB esteja disponível para service workers de extensão, WebUSB.requestDevice(), que retorna uma promessa resolvida com uma instância USBDevice, não pode ser chamado em um service worker de extensão. Para contornar isso, 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 ao service worker, 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();
    }
  }
});