Utiliser WebUSB

L'API WebUSB expose sur le Web des appareils compatibles avec le bus universel en série (USB) non standard. Cette page décrit les aspects de l'API qui sont propres aux extensions. Pour en savoir plus sur l'API WebUSB, consultez MDN.

Disponibilité dans les extensions

Chrome 118 ou version ultérieure

Autorisations

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

Fichier manifeste

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

Contextes compatibles

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 le service worker actif.

Différences entre les extensions Chrome

Bien que WebUSB soit disponible pour les service workers d'extensions, WebUSB.requestDevice(), qui renvoie une promesse résolue 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 d'extension et envoyez un message au service worker d'extension.

Le code suivant suit un schéma typique en appelant requestDevice() dans le cadre d'un flux d'autorisations nécessitant un geste de l'utilisateur. Lorsque l'appareil est 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();
    }
  }
});