[FAQ] Extending Gue JavaScript API behavior globally using a preload script

io.Connect Desktop
1

Question

We have many desktop/web apps that call the Glue JavaScript API directly. We want to add extra behavior (e.g. logging, forwarding events to another system, additional validation, etc.) or enhance them with newer methods for all these calls, but we do not want to modify each individual app. We also want this to keep the existing code working across container upgrades to newer io.Connect Desktop versions without breaking unexpectedly. How to achieve that?

Solution

To extend or intercept Glue JavaScript API calls globally without modifying each individual application use a preload script wrapper function that is injected globally and runs in every app window.

Use the "preloadScripts" property of the "windows" top-level key in the system.json file:

{
    "windows": {
        "preloadScripts": [
            "https://my-domain.com/my-script.js", //if the script is hosted remotely
            "file:///%GDDIR%/assets/preload/my-script.js" //if the script is stored locally
        ]
    }
}

In the script you can add an event listener for the “Glue42” event, and add the code inside the handler function. It will xecutes your custom logic and then calls the original implementation. Here’s an example with metrics:

window.addEventListener("Glue42", (е) => {
    setTimeout(() => {
        const originalCustomMetric = window.glue.metrics.CustomMetric;
        window.glue.metrics.CustomMetric = function (...args) {
            console.log(...args);
            return originalCustomMetric.apply(this, args);
        };
    }, 0);
});

It’s important to wrap it with a timeout, so it waits for the Glue library to be initialized.