ใช้ WebHID

อุปกรณ์ที่โต้ตอบกับมนุษย์โดยตรง (HID) จะรับอินพุตจากหรือแสดงผลลัพธ์ต่อมนุษย์ และยังหมายถึงโปรโตคอล HID ซึ่งเป็นมาตรฐานการสื่อสารแบบ 2 ทิศทางระหว่างโฮสต์กับอุปกรณ์ที่ออกแบบมาเพื่อลดความซับซ้อนของกระบวนการติดตั้ง

หน้านี้จะอธิบายแง่มุมของ API สำหรับส่วนขยายโดยเฉพาะ โปรดดูรายละเอียดทั้งหมดของ WebHID API ใน MDN

คุณค้นหาตัวอย่างแอปสำหรับ WebHID ได้ในที่เก็บตัวอย่างของเรา

ความพร้อมใช้งานในส่วนขยาย

Chrome 117 ขึ้นไป

สิทธิ์

โดยไม่จำเป็นต้องมีสิทธิ์ในไฟล์ Manifest แต่ WebHID จะทริกเกอร์ขั้นตอนการขอสิทธิ์ของผู้ใช้เบราว์เซอร์

ไฟล์ Manifest

API นี้ไม่จําเป็นต้องใช้คีย์ไฟล์ Manifest

บริบทที่รองรับ

API นี้อาจใช้ในบริบทเกือบทุกรูปแบบ ใช้เมธอด WebHID.requestDevice() ในเวิร์กเกอร์บริการของส่วนขยายไม่ได้ ดูหัวข้อถัดไปสำหรับรายละเอียดเพิ่มเติม

เมื่อมีการใช้ API นี้ใน Service Worker ส่วนขยาย เซสชันการเชื่อมต่ออุปกรณ์จะทำให้โปรแกรมทำงานของบริการทำงานอยู่ตลอดเวลา

ความแตกต่างของส่วนขยาย Chrome

แม้ว่า WebHID จะพร้อมใช้งานสำหรับ Service Worker ของส่วนขยาย แต่คุณไม่สามารถเรียกใช้ WebHID.requestDevice() ใน Service Worker ของส่วนขยายได้ ซึ่งจะแสดงผลลัพธ์เป็น Promise ที่แก้ไขด้วยอินสแตนซ์ HIDDevice วิธีแก้ปัญหานี้คือ ให้เรียก requestDevice() จากหน้าส่วนขยายที่ไม่ใช่ Service Worker ของส่วนขยาย แล้วส่งข้อความไปยัง Service Worker ของส่วนขยาย

โค้ดต่อไปนี้เป็นไปตามรูปแบบทั่วไปโดยการเรียกใช้ requestDevice() ซึ่งเป็นส่วนหนึ่งของขั้นตอนการขอสิทธิ์ที่ต้องใช้ท่าทางสัมผัสของผู้ใช้ เมื่อได้รับอุปกรณ์แล้ว อุปกรณ์จะส่งข้อความไปยัง Service Worker ซึ่งจะดึงข้อมูลอุปกรณ์ได้โดยใช้ getDevices()

popup.js:

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