When I open DevTools in a window started from io.Connect Desktop (for example, from our toolbar), I see a lot of extra JavaScript/TypeScript sources that I didn’t write.
Where is this code coming from, and how does it fit into the io.Connect architecture?
That code comes from:
- Preload scripts configured in
system.json or the app definition, and
- io.Connect JavaScript libraries that expose global factory functions like
IODesktop() and IOWorkspaces().
1. Preload scripts
io.Connect Desktop lets you define preload scripts at two levels:
- System-wide using the
"preloadScripts" property of the "windows" top-level key in system.json.
- Per app using the
"preloadScripts" property of the "details" top-level key in the app definition. See the docs.
They are executed before the actual web app is loaded and before each <iframe> on the page, and allow injecting io.Connect functionality into third-party web apps over which you have little to no control.
To see which preload scripts are active in a given window Open DevTools → Console and run:
// List currently known preload scripts
iodesktop.preloadScripts
To match those scripts to your configuration
Open your system.json and look for:
{
"windows": {
"preloadScripts": { ... }
}
}
And open the app definition(s) for the app in question and look for:
{
"details": {
"preloadScripts": [ ... ]
}
}
2. The JavaScript API that is auto-injected by the platform
io.Connect Desktop can auto-inject the @interopio/desktop JavaScript library into app windows. It provides essential functionality your apps use to talk to the platform (Interop, Shared Contexts, Channels, Window Management, etc.). For auto injection, io.Connect Desktop ships prebuilt @interopio/desktop bundles.
Auto injection is configured with autoInjectAPI:
- On app level under the
"details.autoInjectAPI" key in the app definition.
- On system level under the
"windows.autoInjectAPI" key in system.json.