使用 WebHID

人機介面裝置 (HID) 會接收輸入內容或向使用者提供輸出內容。以及 HID 通訊協定，這是主機與裝置之間的雙向通訊標準，可簡化安裝程序。

本頁說明 API 專屬功能。如需 WebHID API 的完整詳細資訊，請參閱 MDN。

您可以在我們的範例存放區中找到 WebHID 的範例應用程式。

擴充功能的供應情形

Chrome 117 以上版本。

權限

應用程式不需具備資訊清單檔案權限，但 WebHID 會觸發瀏覽器的使用者權限流程。

資訊清單

這個 API 不需要資訊清單金鑰。

輔助情境

這個 API 幾乎適用於所有內容。WebHID.requestDevice() 方法無法用於擴充功能服務工作站。詳情請參閱下節。

當擴充功能服務工作站使用這個 API 時，裝置連線工作階段會讓 Service Worker 保持運作。

Chrome 擴充功能差異

雖然擴充功能服務 Worker 可以使用 WebHID，但 WebHID.requestDevice() 會傳回 promise，這個保證能與 HIDDevice 執行個體解決，但無法在擴充功能服務工作處理程序中呼叫。如要解決這個問題，請從擴充功能 Service Worker 以外的擴充功能頁面呼叫 requestDevice()，並傳送訊息給擴充功能 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();
    }
  }
});