WebUSB API, वेब पर ऐसे यूनिवर्सल सीरियल बस (यूएसबी) डिवाइसों को दिखाता है जो स्टैंडर्ड नहीं हैं. इस पेज पर, एपीआई के उन पहलुओं के बारे में बताया गया है जो खास तौर पर एक्सटेंशन के लिए हैं. WebUSB API के बारे में पूरी जानकारी के लिए, MDN देखें.
एक्सटेंशन में उपलब्धता
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
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();
}
}
});