WebUSB 사용

WebUSB API는 비표준 USB (Universal Serial Bus) 호환 기기를 웹에 노출합니다. 이 페이지에서는 확장 프로그램에만 해당하는 API 요소를 설명합니다. WebUSB API에 관한 자세한 내용은 MDN을 참고하세요.

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

Chrome 118 이상

권한

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

매니페스트

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

지원 컨텍스트

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

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

Chrome 확장 프로그램 차이점

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

다음 코드는 사용자 동작이 필요한 권한 흐름의 일부로 requestDevice()를 호출하여 일반적인 패턴을 따릅니다. 기기가 획득되면 서비스 워커에 메시지를 전송하고 서비스 워커는 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();
    }
  }
});