WebHID を使用する

ヒューマン インターフェース デバイス（HID）は、人間から入力を受け取ったり、人間に出力を提供するデバイスです。また、HID プロトコル（ホストとデバイス間の双方向通信の標準で、インストール手順を簡素化するように設計されている）も指します。

このページでは、拡張機能に固有の API の側面について説明します。WebHID API について詳しくは MDN をご覧ください。

サンプル リポジトリに WebHID のサンプルアプリがあります。

拡張機能での提供状況

Chrome 117 以降。

権限

マニフェスト ファイルの権限は不要ですが、WebHID はブラウザのユーザー権限フローをトリガーします。

マニフェスト

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

サポートされているコンテキスト

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

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

Chrome 拡張機能の違い

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

次のコードは、ユーザー操作を必要とする権限フローの一環として requestDevice() を呼び出すという一般的なパターンに沿っています。デバイスが取得されると、サービス ワーカーにメッセージが送信され、サービス ワーカーは getDevices() を使用してデバイスを取得できます。

popup.js:

myButton.addEventListener("click", async () => {
  await navigator.hid.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.hid.getDevices();
    for (const device of devices) {
      // open device connection.
      await device.open();
    }
  }
});