Connecter une extension à partir d'une PWA en mode kiosque

Les applications Chrome seront obsolètes après Chrome 102 pour Windows, Linux et macOS. Sur ChromeOS, les applications Chrome seront compatibles jusqu'à au moins janvier 2025, mais nous vous recommandons vivement de migrer vers les applications Web, car les applications Chrome sont vouées à disparaître. Auparavant, les applications Chrome disposaient de fonctionnalités supplémentaires en mode kiosque, qui ne sont actuellement pas compatibles avec les applications Web seules. Vous pouvez continuer à utiliser certaines de ces fonctionnalités en déployant une extension associée à votre application Web pour borne.

Comment les extensions sont-elles déployées ?

Les extensions sont déployées via la console d'administration Chrome sur l'écran de configuration du kiosque (accessible en accédant à Devices > Chrome > Apps & Extensions > Kiosks). Les extensions peuvent être auto-hébergées à l'aide d'un lien accessible au public ou hébergées sur le Chrome Web Store. Pour en savoir plus sur la gestion des extensions dans un environnement Enterprise ou Education, consultez ce document.

Comment puis-je appeler des API d'extension depuis mon application Web ?

Comme vous pouvez déployer des extensions associées avec votre application Web pour borne, vous pouvez profiter des fonctionnalités des extensions en appelant les API d'extension pour obtenir des informations utiles sur l'appareil et la plate-forme matérielle, ou gérer les fonctionnalités d'accessibilité de Chrome, par exemple.

Si vous utilisez des API réservées aux bornes, vous devez les activer dans le fichier manifeste. Implémentez ensuite le transfert de messages entre votre application Web kiosque et l'extension associée afin qu'elles puissent communiquer entre elles.

Activer les API d'extension réservées aux kiosques

Certaines API d'extension ne sont disponibles qu'en mode kiosque. Pour que votre extension puisse appeler ces API réservées aux bornes, vous devez ajouter le champ "kiosk_enabled" au fichier manifeste et le définir sur true :

{
    "manifest_version": 3,
    "version": "1.0",
    ...
    "kiosk_enabled": true
 }

Implémenter le transfert de messages

Configuration des extensions

Pour recevoir des messages de votre application Web et y répondre, vous devez exposer un script d'arrière-plan qui écoute les messages provenant du client (votre application Web), puis transférer ces requêtes à un appel d'API correspondant. Dans l'exemple suivant, une requête est transmise par proxy pour redémarrer l'appareil ChromeOS lorsque l'application Web envoie un objet de message personnalisé contenant un methodName de callRestart.

// message handler - extension code
chrome.runtime.onMessageExternal.addListener(function (request, sender, sendResponse) {
  if (request.methodName == 'callRestart') {
    chrome.runtime.restart();
  }
});

Le fichier manifeste de l'extension peut être configuré pour autoriser les appels de fonctions externes à l'extension via la clé externally_connectable, qui spécifie les sites et les extensions autorisés à appeler des méthodes dans l'extension. Pour en savoir plus sur les extensions Chrome et Manifest V3, consultez la documentation officielle.

{
    "background": {
       "service_worker": "background.js"
    },
    "description": "This restarts your ChromeOS device. Lucky you!",
    "manifest_version": 3,
    "name": "Restart your kiosk app",
    "version": "1.0",
    "kiosk_enabled": true,
    "externally_connectable": {
         "accepts_tls_channel_id": false,
         "matches": [ "://developer.android.com/" ]
      }
 }

Configurer l'application Web

Pour appeler l'extension depuis une application Web, vous devez connaître son ID d'extension statique. Vous trouverez cet ID sur la page chrome://extensions qui s'affiche lorsque vous installez votre extension Chrome, ou sur le Chrome Web Store une fois l'extension importée. Cela permet à votre application Web de spécifier l'extension exacte avec laquelle elle souhaite communiquer. Ensuite, appelez chrome.runtime.sendMessage et transmettez l'ID de l'extension avec un message que vous souhaitez envoyer à l'extension.

const STATIC_EXTENSION_ID = 'abcdefghijklmnopqrstuvwxyz'; // found from chrome extensions page of chrome web store.
const callExtensionAPI = function (method) {
  chrome.runtime.sendMessage(STATIC_EXTENSION_ID, {
    methodName: method,
  });
};
callExtensionAPI('callRestart');

Pour en savoir plus sur la connexion de pages Web à des extensions pour le transfert de messages, veuillez consulter cette documentation.

Remarque : Les extensions et les applications Web ne peuvent pas communiquer entre elles de manière arbitraire. L'extension ne tentera d'écouter que les messages provenant des domaines listés dans la section externally_connectable de son fichier manifeste. De même, une application Web doit connaître l'ID statique de l'extension avec laquelle elle souhaite communiquer.