استخدام WebUSB

تعرض واجهة برمجة التطبيقات WebUSB API على الويب الأجهزة غير العادية المتوافقة مع الناقل التسلسلي العالمي (USB). توضّح هذه الصفحة جوانب واجهة برمجة التطبيقات التي تتعلّق بالإضافات تحديدًا. راجِع MDN للحصول على تفاصيل كاملة عن WebUSB API.

مدى التوفّر في الإضافات

الإصدار 118 من Chrome أو الإصدارات الأحدث

الأذونات

ليست هناك أذونات مطلوبة لملف البيان، إلا أن WebUSB يشغّل تدفق أذونات المستخدم في المتصفح.

البيان

ما مِن مفاتيح بيان مطلوبة لواجهة برمجة التطبيقات هذه.

توفير سياقات داعمة

يمكن استخدام واجهة برمجة التطبيقات هذه في أي سياق تقريبًا، ولا يمكن استخدام طريقة WebUSB.requestDevice() في مشغّلي خدمات الإضافات. يُرجى الاطلاع على القسم التالي للحصول على التفاصيل.

عند استخدام واجهة برمجة التطبيقات هذه في مشغّل خدمات الإضافات، تُبقي جلسة اتصال الأجهزة مشغّل الخدمة نشطًا.

الاختلافات في إضافات Chrome

على الرغم من توفُّر WebUSB لمشغِّلي خدمات الإضافات، لا يمكن استدعاء WebUSB.requestDevice()، الذي يعرض وعدًا يتم حلّه باستخدام مثيل USBDevice في مشغّل خدمات الإضافات. لحلّ هذه المشكلة، يمكنك الاتصال بـ requestDevice() من صفحة إضافة غير مشغّل خدمات الإضافات وإرسال رسالة إلى مشغّل خدمات الإضافات.

يتبع الرمز التالي نمطًا معتادًا من خلال استدعاء requestDevice() كجزء من مسار الأذونات الذي يتطلب إيماءة مستخدم. وعند الحصول على الجهاز، يرسل رسالة إلى مشغّل الخدمات، والذي يمكنه بعد ذلك استرداد الجهاز باستخدام getDevices().

popup.js:

myButton.addEventListener("click", async () => {
  await navigator.usb.requestDevice({
    filters: [{ vendorId: 0x1234, productId: 0x5678 }],
  });
  chrome.runtime.sendMessage("newDevice");
});

service-work.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();
    }
  }
});