WebUSB का इस्तेमाल करना

WebUSB API, बिना स्टैंडर्ड वाले यूनिवर्सल सीरियल बस (यूएसबी) के साथ काम करने वाले डिवाइसों को वेब पर दिखाता है. इस पेज पर, एपीआई के उन पहलुओं के बारे में बताया गया है जो खास तौर पर एक्सटेंशन के लिए हैं. WebUSB API के बारे में पूरी जानकारी के लिए एमडीएन देखें.

एक्सटेंशन में उपलब्धता

Chrome 118 या उसके बाद का वर्शन.

अनुमतियां

मेनिफ़ेस्ट फ़ाइल की किसी अनुमति की ज़रूरत नहीं होती है. हालांकि, 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-worker.js (सर्विस-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();
    }
  }
});