Sử dụng WebUSB

API WebUSB hiển thị các thiết bị tương thích với Universal Serial Bus (USB) không tiêu chuẩn lên web. Trang này mô tả các khía cạnh của API dành riêng cho các tiện ích. Hãy tham khảo MDN để biết toàn bộ thông tin chi tiết về API WebUSB.

Khả năng sử dụng trong các tiện ích

Chrome 118 trở lên.

Quyền

Không yêu cầu quyền đối với tệp kê khai; tuy nhiên WebUSB sẽ kích hoạt luồng quyền người dùng của trình duyệt.

Tệp kê khai

Không cần khoá tệp kê khai cho API này.

Bối cảnh hỗ trợ

API này có thể được dùng trong hầu hết mọi ngữ cảnh. Không thể sử dụng phương thức WebUSB.requestDevice() trong trình chạy dịch vụ tiện ích. Xem phần tiếp theo để biết chi tiết.

Khi API này được dùng trong một trình chạy dịch vụ tiện ích, phiên kết nối thiết bị sẽ duy trì hoạt động của trình chạy dịch vụ đó.

Sự khác biệt về tiện ích của Chrome

Mặc dù WebUSB có sẵn cho trình chạy dịch vụ tiện ích, nhưng WebUSB.requestDevice() trả về một lời hứa sẽ giải quyết bằng thực thể USBDevice, nhưng bạn không thể gọi WebUSB trong trình chạy dịch vụ tiện ích. Để khắc phục vấn đề này, hãy gọi requestDevice() từ một trang tiện ích không phải trình chạy dịch vụ tiện ích rồi gửi tin nhắn cho trình chạy dịch vụ tiện ích đó.

Mã sau đây tuân theo một mẫu thông thường bằng cách gọi requestDevice() trong quy trình cấp quyền yêu cầu cử chỉ của người dùng. Sau khi được tiếp nhận, thiết bị sẽ gửi một thông báo cho trình chạy dịch vụ. Sau đó, trình chạy này có thể truy xuất thiết bị bằng cách sử dụng 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();
    }
  }
});