ใช้ WebUSB

WebUSB API จะแสดงอุปกรณ์ที่เข้ากันได้กับ Universal Serial Bus (USB) ที่ไม่ได้มาตรฐานบนเว็บ หน้านี้อธิบายลักษณะของ API ที่เฉพาะเจาะจงสำหรับส่วนขยาย โปรดดูรายละเอียดทั้งหมดของ WebUSB API ได้ที่ MDN

ความพร้อมใช้งานในส่วนขยาย

Chrome 118 ขึ้นไป

สิทธิ์

ไม่จำเป็นต้องมีสิทธิ์ในไฟล์ Manifest แต่ WebUSB จะทริกเกอร์ขั้นตอนการให้สิทธิ์จากผู้ใช้ของเบราว์เซอร์

ไฟล์ Manifest

ไม่จำเป็นต้องใช้คีย์ Manifest สำหรับ API นี้

บริบทที่รองรับ

คุณใช้ API นี้ได้ในเกือบทุกบริบท แต่จะใช้เมธอด WebUSB.requestDevice() ใน Service Worker ของส่วนขยายไม่ได้ ดูรายละเอียดเพิ่มเติมได้ในส่วนถัดไป

เมื่อใช้ API นี้ใน Service Worker ของส่วนขยาย เซสชันการเชื่อมต่ออุปกรณ์จะทำให้ Service Worker ทำงานอยู่

ความแตกต่างของส่วนขยาย Chrome

แม้ว่า WebUSB จะพร้อมใช้งานสำหรับ Service Worker ของส่วนขยาย แต่คุณจะเรียก WebUSB.requestDevice() ซึ่งแสดงผล Promise ที่แสดงผลอินสแตนซ์ USBDevice ไม่ได้ใน Service Worker ของส่วนขยาย หากต้องการหลีกเลี่ยงปัญหานี้ ให้เรียก requestDevice() จากหน้าส่วนขยายอื่นที่ไม่ใช่ Service Worker ของส่วนขยาย แล้วส่งข้อความไปยัง Service Worker ของส่วนขยาย

โค้ดต่อไปนี้เป็นไปตามรูปแบบทั่วไปโดยการเรียก requestDevice() ซึ่งเป็นส่วนหนึ่งของขั้นตอนการขอสิทธิ์ที่ต้องมีการโต้ตอบจากผู้ใช้ เมื่อได้รับอุปกรณ์แล้ว ระบบจะส่งข้อความไปยัง Service Worker ซึ่งจะดึงข้อมูลอุปกรณ์ได้โดยใช้ 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();
    }
  }
});