ใช้ WebUSB

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

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

Chrome 118 ขึ้นไป

สิทธิ์

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

ไฟล์ Manifest

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

บริบทสนับสนุน

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

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

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

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

โค้ดต่อไปนี้มีรูปแบบปกติโดยการเรียก 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();
    }
  }
});