ใช้ WebUSB

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

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

Chrome 118 ขึ้นไป

สิทธิ์

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

ไฟล์ Manifest

API นี้ไม่จําเป็นต้องใช้คีย์ไฟล์ Manifest

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

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

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

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

แม้ว่า WebUSB จะรองรับโปรแกรมทำงานของบริการส่วนขยายได้ แต่ WebUSB.requestDevice() ซึ่งจะแสดงสัญญาที่แก้ไขด้วยอินสแตนซ์ 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();
    }
  }
});