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