Utiliser WebUSB

L'API WebUSB expose les appareils compatibles avec le bus universel en série (USB) non standard sur le Web. Cette page décrit les aspects de l'API propres aux extensions. Consultez MDN pour obtenir des informations complètes sur l'API WebUSB.

Disponibilité dans les extensions

Chrome 118 ou version ultérieure

Autorisations

Aucune autorisation de fichier manifeste n'est requise. mais WebUSB déclenche le flux d'autorisations de l'utilisateur dans le navigateur.

Fichier manifeste

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

Contextes d'accompagnement

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 par une instance USBDevice, ne peut pas être appelé dans un service worker d'extension. Pour contourner ce problème, appelez requestDevice() à partir d'une page d'extension autre que le service worker d'extension, puis envoyez un message à ce service.

Le code suivant suit un schéma classique 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();
    }
  }
});