[FAQ] Preload scripts and auto-injected libraries in io.Connect Desktop

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.