Utiliser WebUSB

L'API WebUSB expose sur le Web des appareils compatibles USB (Universal Serial Bus) non standards. Cette page décrit les aspects de l'API spécifiques aux extensions. Reportez-vous à MDN pour obtenir des informations complètes sur l'API WebUSB.

Disponibilité dans les extensions

Chrome 118 ou version ultérieure.

Autorisations

Aucune autorisation n'est requise pour le fichier manifeste. Toutefois, WebUSB déclenche le flux d'autorisations utilisateur du navigateur.

Manifest

Aucune clé de fichier manifeste n'est nécessaire pour cette API.

Contextes complémentaires

Cette API peut être utilisée dans presque tous les contextes. La méthode WebUSB.requestDevice() ne peut pas être utilisée dans les service workers d'extension. Reportez-vous à la section suivante pour plus d'informations.

Lorsque cette API est utilisée dans un service worker d'extension, la session de connexion des appareils maintient celui-ci actif.

Différences entre les extensions Chrome

Bien que WebUSB soit disponible pour les service workers d'extension, WebUSB.requestDevice(), qui renvoie une promesse qui se résout avec une instance USBDevice, ne peut pas être appelé dans un service worker d'extension. Pour contourner ce problème, appelez requestDevice() depuis une page d'extension autre que le service worker de l'extension et envoyez un message à celui-ci.

Le code suivant suit un modèle typique en appelant requestDevice() dans le cadre d'un flux d'autorisations nécessitant un geste de l'utilisateur. Une fois l'appareil acquis, il envoie un message au service worker, qui peut ensuite le récupérer à l'aide de 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();
    }
  }
});