WebUSB の使用

WebUSB API は、標準以外のユニバーサル シリアル バス（USB）互換デバイスをウェブに公開します。このページでは、拡張機能に固有の API の側面について説明します。WebUSB API の詳細については、MDN をご覧ください。

拡張機能での利用

Chrome 118 以降。

権限

マニフェスト ファイルの権限は必要ありませんが、WebUSB はブラウザのユーザー権限フローをトリガーします。

マニフェスト

この API にマニフェスト キーは必要ありません。

補足コンテキスト

この API はほぼすべてのコンテキストで使用できます。WebUSB.requestDevice() メソッドは拡張機能 Service Worker では使用できません。詳細については、次のセクションをご覧ください。

この API が拡張機能 Service Worker で使用されている場合、デバイス接続セッションにより Service Worker は動作し続けます。

Chrome 拡張機能の違い

WebUSB は拡張機能 Service Worker で使用できますが、USBDevice インスタンスで解決される Promise を返す WebUSB.requestDevice() を拡張機能 Service Worker で呼び出すことはできません。この問題を回避するには、拡張機能 Service Worker 以外の拡張機能ページから requestDevice() を呼び出し、拡張機能 Service Worker にメッセージを送信します。

次のコードは、ユーザー操作を必要とする権限フローの一部として requestDevice() を呼び出す一般的なパターンに従っています。デバイスを取得すると、Service Worker にメッセージが送信されます。Service Worker は 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();
    }
  }
});