Sử dụng WebUSB

WebUSB API cho phép các thiết bị không chuẩn tương thích với Cổng buýt nối tiếp đa năng (USB) kết nối với 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 thông tin chi tiết đầy đủ về WebUSB API.

Phạm vi cung cấp trong tiện ích

Chrome 118 trở lên.

Quyề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 sự cho phép của người dùng của trình duyệt.

Tệp kê khai

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

Bối cảnh hỗ trợ

Bạn có thể sử dụng API này trong hầu hết mọi ngữ cảnh; phương thức WebUSB.requestDevice() không thể dùng trong các worker dịch vụ của 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ụ.

Điểm khác biệt giữa các tiện ích của Chrome

Mặc dù WebUSB có sẵn cho trình chạy dịch vụ của tiện ích, nhưng WebUSB.requestDevice() (trả về một lời hứa phân giải bằng một thực thể USBDevice) không thể được gọi trong trình chạy dịch vụ của tiện ích. Để khắc phục 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 một thông báo đến trình chạy dịch vụ tiện ích.

Đoạn mã sau đây tuân theo một mẫu điển hình 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 lấy, thiết bị sẽ gửi một thông báo đến trình chạy dịch vụ. Sau đó, trình chạy dịch vụ 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();
    }
  }
});