WebHID का इस्तेमाल करें

ह्यूमन इंटरफ़ेस डिवाइस (एचआईडी), इंसानों से इनपुट लेता है या आउटपुट देता है. इसका एचआईडी प्रोटोकॉल भी होता है. यह होस्ट और डिवाइस के बीच दो-तरफ़ा कम्यूनिकेशन के लिए एक स्टैंडर्ड है. इसे इंस्टॉल करने की प्रोसेस को आसान बनाने के लिए डिज़ाइन किया गया है.

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

सैंपल रिपॉज़िटरी में, WebHID के लिए सैंपल ऐप्लिकेशन मौजूद होता है.

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

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

अनुमतियां

मेनिफ़ेस्ट फ़ाइल की किसी भी अनुमति की ज़रूरत नहीं होती है. हालांकि, WebHID, ब्राउज़र के उपयोगकर्ता की अनुमति के फ़्लो को ट्रिगर करता है.

मेनिफ़ेस्ट

इस एपीआई के लिए, किसी मेनिफ़ेस्ट कुंजी की ज़रूरत नहीं है.

वीडियो के विषय से जुड़ी जानकारी देना

इस एपीआई का इस्तेमाल करीब-करीब किसी भी संदर्भ में किया जा सकता है. एक्सटेंशन सर्विस वर्कर में WebHID.requestDevice() तरीके का इस्तेमाल नहीं किया जा सकता. विवरण के लिए अगला अनुभाग देखें.

जब इस एपीआई का इस्तेमाल किसी एक्सटेंशन सर्विस वर्कर में किया जाता है, तो डिवाइस कनेक्शन सेशन, सर्विस वर्कर को चालू रखता है.

Chrome एक्सटेंशन में अंतर

हालांकि, WebHID, एक्सटेंशन सर्विस वर्कर के लिए उपलब्ध है, लेकिन WebHID.requestDevice(), जो एक प्रॉमिस देता है जो HIDDevice इंस्टेंस के साथ हल होता है, उसे एक्सटेंशन सर्विस वर्कर में कॉल नहीं किया जा सकता. इससे बचने के लिए, एक्सटेंशन सर्विस वर्कर के अलावा किसी एक्सटेंशन पेज से requestDevice() को कॉल करें और एक्सटेंशन सर्विस वर्कर को मैसेज भेजें.

यह कोड, अनुमति के फ़्लो के हिस्से के तौर पर requestDevice() को कॉल करके, एक सामान्य पैटर्न को फ़ॉलो करता है. इसके लिए उपयोगकर्ता के जेस्चर की ज़रूरत होती है. डिवाइस मिलने पर, वह सर्विस वर्कर को मैसेज भेजता है, जो getDevices() का इस्तेमाल करके डिवाइस को वापस ला सकता है.

popup.js:

myButton.addEventListener("click", async () => {
  await navigator.hid.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.hid.getDevices();
    for (const device of devices) {
      // open device connection.
      await device.open();
    }
  }
});