Tester le nouveau chargeur de framework d'extensions

Le framework de l'extension Looker utilisera bientôt un nouveau mécanisme de chargement. Le nouveau chargeur peut entraîner des comportements inattendus et des erreurs potentielles lors du chargement des extensions existantes. Pour que les développeurs puissent tester et mettre à jour leurs extensions, cette page explique comment tester le nouveau chargeur de framework d'extensions avant qu'il ne soit officiellement activé dans les environnements Looker.

La date de sortie de cette mise à jour n'est pas encore déterminée. À ce moment-là, un bouton permet aux clients de désactiver temporairement la nouvelle méthode de chargement. Cependant, à un moment donné, vous devrez activer la nouvelle technique de chargement pour corriger les cas de non-respect de Content Security Policy (CSP) et utiliser le préambule <!DOCTYPE html>.

Modifications susceptibles d'avoir un impact sur les extensions

Vous trouverez ci-dessous la liste des modifications du framework des extensions susceptibles d'avoir un impact sur celles-ci:

  • Pour résoudre les cas de non-respect des CSP, le code HTML est généré pour charger l'extension sur le serveur plutôt que dans le navigateur. Cette modification ne devrait pas affecter les extensions existantes.
  • La balise base a été supprimée, ce qui peut avoir un impact sur la division du code personnalisé. Le tag base a été supprimé, car son utilisation ne respectait pas le fournisseur de services de configuration (CSP). Cependant, certains développeurs ont peut-être implémenté leurs propres techniques de division du code qui s'appuient sur la balise base. Veuillez vérifier que votre répartition du code fonctionne toujours ou, si nécessaire, implémenter d'autres techniques qui ne dépendent pas de la balise base.
  • Le nouveau chargeur utilise un préambule <!DOCTYPE html>. Cela peut avoir une incidence sur les composants qui utilisent height: 100%;. Vous pouvez limiter ce comportement en utilisant height: 100vh.

Tester les extensions avec la nouvelle méthode de chargement

Avec la nouvelle technique de chargement, votre instance Looker doit exécuter Looker 22.4 ou une version ultérieure. Elle est activée via une option de démarrage. L'option de démarrage définit une URL qui permettra de charger l'extension. L'origine de cette URL doit être différente de celle du serveur Looker. Cette étape est nécessaire pour que l'extension puisse être installée en toute sécurité dans un bac à sable.

La procédure suivante vous permet de tester les extensions avec la nouvelle méthode de chargement pour un seul utilisateur, sans affecter aucun autre utilisateur du système. Pour ce faire, l'URL de chargement de l'extension est enregistrée dans l'espace de stockage de la session du navigateur. Le nouveau mécanisme reste en vigueur jusqu'à la fin de la session de l'utilisateur OU jusqu'à ce qu'il supprime la valeur de l'espace de stockage de la session. Il est normal que cette technique soit utilisée par des développeurs expérimentés.

Configurer un serveur proxy HTTP

Avant d'activer la nouvelle méthode de chargement des extensions, vous devez exécuter un serveur proxy sur votre ordinateur local, qui simule le service de chargement des extensions. Assurez-vous que Node.js est installé sur votre ordinateur local, puis exécutez la commande suivante:

npx http-server --port 4000 --proxy https://experiment.dev.looker.com --proxy-options.secure false

Remplacez https://experiment.dev.looker.com par l'URL de votre instance Looker. Vous pouvez également modifier le numéro de port, mais vous devez vous assurer qu'il n'est pas en conflit avec celui utilisé par votre serveur de développement d'extensions.

La première fois que vous exécutez cette commande, vous êtes invité à autoriser l'installation de http-server.

Configurer un serveur proxy HTTPS

Certains environnements peuvent empêcher le contenu HTTP et HTTPS mixte. Dans ce cas, un serveur proxy HTTPS doit être configuré avec un certificat. Pour configurer un serveur proxy HTTPS, vous devez générer un certificat autosigné. Une condition préalable est que openssl soit installé sur votre système. Dans le répertoire où vous prévoyez d'exécuter le serveur proxy HTTPS, exécutez la commande suivante:

openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem

Cette opération génère deux fichiers : cert.pem et key.pem.

Pour exécuter le serveur proxy HTTPS, assurez-vous que Node.js est installé sur votre ordinateur local, puis exécutez la commande suivante:

npx http-server --port 4000 -S -C cert.pem --proxy https://experiment.dev.looker.com --proxy-options.secure false

Avant d'utiliser le serveur proxy, vous devez autoriser le navigateur à utiliser le certificat autosigné. Ouvrez le navigateur et saisissez https://localhost:4000. Dans Chrome, un lien ou un bouton vous sera peut-être envoyé pour accéder au serveur. Vous devrez peut-être également saisir thisisunsafe lorsque la fenêtre du navigateur est active. Dans ce dernier cas, le texte ne s'affiche pas, mais vous pouvez continuer.

Pour en savoir plus sur la configuration de http-server afin d'utiliser https, consultez la page https://www.npmjs.com/package/http-server.

Démarrage du test

  • Si vous avez configuré un serveur proxy HTTP, utilisez l'URL suivante pour configurer votre navigateur:

        https://experiment.dev.looker.com/extensions/kitchensink::kitchensink/?LOOKER_EXTENSION_LOAD_URL=http://localhost:4000
        

    Où :

    • https://experiment.dev.looker.com est l'URL de votre instance Looker.
    • /kitchensink::kitchensink est l'ID de l'extension que vous souhaitez tester.
    • http://localhost:4000 est le serveur proxy. Modifiez le numéro de port si vous l'avez modifié précédemment dans cette procédure.
  • Si vous avez configuré un serveur proxy HTTPS, utilisez l'URL suivante pour configurer votre navigateur:

        https://experiment.dev.looker.com/extensions/kitchensink::kitchensink/?LOOKER_EXTENSION_LOAD_URL=https://localhost:4000
        

    Où :

    • https://experiment.dev.looker.com est l'URL de votre instance Looker.
    • /kitchensink::kitchensink est l'ID de l'extension que vous souhaitez tester.
    • https://localhost:4000 est le serveur proxy. Modifiez le numéro de port si vous l'avez modifié précédemment dans cette procédure.

Le paramètre LOOKER_EXTENSION_LOAD_URL sera immédiatement supprimé de l'URL. Comme indiqué précédemment, l'URL du serveur proxy est stockée dans le stockage de la session et reste active pendant toute la durée de la session.

Arrêter le test

Pour arrêter le test, saisissez l'URL suivante:

https://experiment.dev.looker.com/extensions/kitchensink::kitchensink/?LOOKER_EXTENSION_LOAD_URL=

L'URL sera supprimée du stockage de la session. Là encore, le paramètre LOOKER_EXTENSION_LOAD_URL sera supprimé de l'URL.