WebHID 사용

휴먼 인터페이스 기기 (HID)는 인간의 입력을 받거나 인간에게 출력을 제공합니다. 또한 호스트와 장치 간의 양방향 통신을 위한 표준인 HID 프로토콜을 지칭하며, 설치 절차를 단순화하도록 설계되었습니다.

이 페이지에서는 확장 프로그램에만 해당하는 API 요소를 설명합니다. WebHID API에 대한 자세한 내용은 MDN을 참조하세요.

샘플 저장소에서 WebHID용 샘플 앱을 찾을 수 있습니다.

확장 프로그램에서 사용 가능 여부

Chrome 117 이상

권한

매니페스트 파일 권한은 필요하지 않지만 WebHID는 브라우저의 사용자 권한 흐름을 트리거합니다.

매니페스트

이 API에는 매니페스트 키가 필요하지 않습니다.

지원 컨텍스트

이 API는 거의 모든 상황에서 사용할 수 있습니다. WebHID.requestDevice() 메서드는 확장 프로그램 서비스 워커에서 사용할 수 없습니다. 자세한 내용은 다음 섹션을 참조하세요.

이 API가 확장 프로그램 서비스 워커에서 사용되면 기기 연결 세션이 서비스 워커를 활성 상태로 유지합니다.

Chrome 확장 프로그램 차이점

WebHID를 확장 서비스 워커에 사용할 수 있지만, HIDDevice 인스턴스로 확인되는 프로미스를 반환하는 WebHID.requestDevice()는 확장 프로그램 서비스 워커에서 호출할 수 없습니다. 이 문제를 해결하려면 확장 프로그램 서비스 워커가 아닌 확장 페이지에서 requestDevice()를 호출하고 확장 프로그램 서비스 워커에 메시지를 보냅니다.

다음 코드는 사용자 동작이 필요한 권한 흐름의 일부로 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();
    }
  }
});