使用 WebHID

人機介面裝置 (HID) 會接收輸入內容或為人類提供輸出內容。這也指的是 HID 通訊協定，這是主機和裝置之間的雙向通訊標準，可簡化安裝程序。

本頁面將說明擴充功能專屬的 API 相關資訊。如要瞭解 WebHID API 的完整詳細資訊，請參閱 MDN。

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

擴充功能的可用性

Chrome 117 以上版本。

權限

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

資訊清單

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

支援的內容

這個 API 幾乎可用於任何情境。WebHID.requestDevice() 方法無法用於擴充功能服務 worker。詳情請參閱下節。

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

Chrome 擴充功能的差異

雖然 WebHID 可以提供給擴充功能 Service Worker，但 WebHID.requestDevice() 會傳回利用 HIDDevice 執行個體解析的承諾，但無法在擴充功能 Service Worker 中呼叫。如要解決這個問題，請從擴充功能服務 worker 以外的擴充功能頁面呼叫 requestDevice()，並傳送訊息給擴充功能服務 worker。

以下程式碼遵循一般模式，在需要使用者手勢的權限流程中呼叫 requestDevice()。取得裝置後，它會傳送訊息給服務工作者，後者可使用 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();
    }
  }
});