ใช้ 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();
   
}
 
}
});