שימוש ב-WebUSB

‫WebUSB API חושף לרשת מכשירים לא סטנדרטיים שתואמים לאפיק הטורי האוניברסלי (USB). בדף הזה מתוארים היבטים של ה-API שייחודיים לתוספים. פרטים מלאים על WebUSB API זמינים ב-MDN.

זמינות בתוספים

‫Chrome 118 ואילך.

הרשאות

לא נדרשות הרשאות בקובץ המניפסט, אבל WebUSB מפעיל את תהליך הרשאות המשתמש בדפדפן.

מניפסט

אין צורך במפתחות של קובץ המניפסט בשביל ה-API הזה.

הקשרים התומכים

אפשר להשתמש ב-API הזה כמעט בכל הקשר, אבל אי אפשר להשתמש בשיטה WebUSB.requestDevice() ב-service workers של תוספים. למידע נוסף, עיין בקטע הבא.

כשמשתמשים ב-API הזה ב-service worker של תוסף, סשן החיבור של המכשירים שומר על הפעילות של ה-service worker.

ההבדלים בין תוספים ל-Chrome

למרות ש-WebUSB זמין לקובצי שירות (service worker) של תוספים, אי אפשר לקרוא ל-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();
    }
  }
});