WebUSB の使用

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

拡張機能での提供状況

Chrome 118 以降。

権限

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

マニフェスト

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

サポート コンテキスト

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

この API を拡張機能サービス ワーカーで使用すると、デバイスの接続セッションによってサービス ワーカーが存続します。

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();
    }
  }
});