Usa WebUSB

La API de WebUSB expone dispositivos compatibles con el bus universal en serie (USB) no estándar a la Web. En esta página, se describen aspectos de la API específicos de las extensiones. Consulta MDN para obtener todos los detalles sobre la API de WebUSB.

Disponibilidad en las extensiones

Chrome 118 o versiones posteriores

Permisos

No se requieren permisos de archivos de manifiesto; sin embargo, WebUSB activa el flujo de permisos del usuario del navegador.

Manifest

No se necesitan claves de manifiesto para esta API.

Contextos complementarios

Esta API se puede usar en casi cualquier contexto. El método WebUSB.requestDevice() no se puede usar en los service workers de extensión. Consulte la siguiente sección para obtener más detalles.

Cuando se usa esta API en un service worker de extensión, la sesión de conexión de dispositivos mantiene activo el service worker.

Diferencias de las extensiones de Chrome

Aunque WebUSB está disponible para service workers de extensión, WebUSB.requestDevice(), que muestra una promesa que se resuelve con una instancia USBDevice, no se puede llamar en un service worker de extensión. Para solucionar este problema, llama a requestDevice() desde una página de extensión que no sea el service worker de extensión y envía un mensaje a este.

El siguiente código sigue un patrón típico cuando llama a requestDevice() como parte de un flujo de permisos que requiere un gesto del usuario. Cuando se adquiere el dispositivo, envía un mensaje al service worker, que luego puede recuperarlo mediante 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();
    }
  }
});