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