Sử dụng WebUSB

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

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

Chrome 118 trở lên.

Quyền

Bạn không cần có quyền đối với tệp kê khai; tuy nhiên, WebUSB sẽ kích hoạt quy trình cấp quyền cho người dùng của trình duyệt.

Tệp kê khai

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

Bối cảnh hỗ trợ

API này có thể được dùng trong hầu hết mọi bối 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 bạn dùng API này trong một trình chạy dịch vụ tiện ích, phiên kết nối thiết bị sẽ giúp trình chạy dịch vụ này hoạt động.

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ề lời hứa phân giải bằng thực thể USBDevice) không thể được gọi trong trình chạy dịch vụ tiện ích. Để giải quyết vấn đề này, hãy gọi requestDevice() từ một trang tiện ích khác với trình chạy dịch vụ tiện ích và gửi thông báo đến 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. Khi thiết bị được thu nạp, thiết bị sẽ gửi thông báo đến worker dịch vụ. Sau đó, worker dịch vụ có thể truy xuất thiết bị bằ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();
    }
  }
});