ヒューマン インターフェース デバイス（HID）は、人間から入力を受け取るか、人間に出力を提供します。また、インストール手順を簡素化するために設計されたホストとデバイス間の双方向通信の標準である HID プロトコルを指します。
このページでは、拡張機能に固有の API の側面について説明します。WebHID API の詳細については、MDN をご覧ください。
サンプル リポジトリに WebHID のサンプルアプリがあります。
拡張機能での利用
Chrome 117 以降。
権限
マニフェスト ファイルの権限は必要ありませんが、WebHID はブラウザのユーザー権限フローをトリガーします。
マニフェスト
この API にマニフェスト キーは必要ありません。
補足コンテキスト
この API はほぼすべてのコンテキストで使用できます。WebHID.requestDevice() メソッドは拡張機能 Service Worker では使用できません。詳細については、次のセクションをご覧ください。
この API が拡張機能 Service Worker で使用されている場合、デバイス接続セッションにより Service Worker は動作し続けます。
Chrome 拡張機能の違い
WebHID は拡張機能 Service Worker で使用できますが、HIDDevice インスタンスで解決される Promise を返す WebHID.requestDevice() を拡張機能 Service Worker で呼び出すことはできません。この問題を回避するには、拡張機能 Service Worker 以外の拡張機能ページから requestDevice() を呼び出し、拡張機能 Service Worker にメッセージを送信します。
次のコードは、ユーザー操作を必要とする権限フローの一部として requestDevice() を呼び出す一般的なパターンに従っています。デバイスを取得すると、Service Worker にメッセージが送信されます。Service Worker は 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();
}
}
});