使用 WebUSB

WebUSB API 會將非標準的通用序列匯流排 (USB) 相容裝置公開至網路。本頁面將說明擴充功能專屬的 API 相關資訊。如需 WebUSB API 的完整詳細資料，請參閱 MDN。

擴充功能中的供應情形

Chrome 118 以上版本。

權限

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

資訊清單

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

支援的內容

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

如果在擴充功能 Service Worker 中使用這個 API，裝置連線工作階段會讓 Service Worker 保持運作。

Chrome 擴充功能的差異

雖然 WebUSB 支援擴充功能 Service Worker，但 WebUSB.requestDevice() 會傳回利用 USBDevice 執行個體解析的承諾，但無法在擴充功能 Service Worker 中呼叫。如要解決這個問題，請從擴充功能 Service Worker 以外的擴充功能頁面呼叫 requestDevice()，然後傳送訊息給擴充功能 Service Worker。

以下程式碼遵循典型模式，在需要使用者手勢的權限流程中呼叫 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();
    }
  }
});