WebUSB 사용

WebUSB API는 비표준 범용 직렬 버스(USB) 호환 기기를 웹에 노출합니다. 이 페이지에서는 확장 프로그램과 관련된 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();
    }
  }
});