使用 WebUSB

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

擴充功能的供應情形

Chrome 118 以上版本。

權限

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

資訊清單

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

輔助情境

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

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

Chrome 擴充功能差異

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

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