Użyj WebUSB

Interfejs WebUSB API udostępnia w internecie urządzenia zgodne z niestandardową uniwersalną magistrali szeregową (USB). Na tej stronie opisaliśmy aspekty interfejsu API, które są charakterystyczne dla rozszerzeń. Szczegółowe informacje o WebUSB API znajdziesz w MDN.

Dostępność w rozszerzeniach

Chrome w wersji 118 lub nowszej.

Uprawnienia

Żadne uprawnienia do pliku manifestu nie są wymagane, ale WebUSB uruchamia w przeglądarce uprawnienia użytkownika.

Plik manifestu

Ten interfejs API nie wymaga kluczy manifestu.

Konteksty pomocnicze

Tego interfejsu API można używać w prawie każdym kontekście; metody WebUSB.requestDevice() nie można używać w skryptach service worker dla rozszerzeń. Więcej informacji na ten temat można znaleźć w następnej sekcji.

Gdy ten interfejs API jest używany w skrypcie service worker rozszerzenia, sesja połączenia z urządzeniem podtrzymuje jego aktywność.

Różnice dotyczące rozszerzeń do Chrome

Chociaż protokół WebUSB jest dostępny dla mechanizmów Service Worker rozszerzenia, nie można wywołać metody WebUSB.requestDevice(), która zwraca obietnicę rozwiązaną po wystąpieniu zdarzenia USBDevice. Aby obejść ten problem, wywołaj połączenie requestDevice() ze strony rozszerzenia innej niż skrypt service worker i wyślij do niego wiadomość.

Ten kod działa zgodnie ze standardowym wzorcem – wywołuje funkcję requestDevice() w ramach procesu przyznawania uprawnień, które wymaga gestu użytkownika. Po pobraniu urządzenie wysyła komunikat do skryptu service worker, który może pobrać urządzenie przy użyciu 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();
    }
  }
});