DEV Community

interop.io profile image Toni Petov
Toni Petov for interop.io

Posted on • Originally published at community.interop.io

Running a Web Page in Chrome inside io.Connect Desktop

Running a Web Page in Chrome inside io.CD

This guide shows two common approaches for running a web page in Chrome inside io.CD. Each approach is provided as a ready-to-use example JSON snippet you can adapt for your environment.

The two approaches covered here are:

  • Native Chrome (exe): launches the system Chrome executable and opens the target URL via Chrome CLI parameters.
  • Embedded io.CD HTML window (window, mode: html): hosts the page inside an io.CD workspace window and provides tighter workspace integration.

Quick contract

  • Inputs: an app config JSON object for io.CD.
  • Outputs: a running app instance (native Chrome process or io.CD window) that loads the target web page. -- Success criteria: page loads and the io.CD API injection succeeds when using the embedded io.CD HTML mode.

When to pick which approach

  • Use the native Chrome (type: "exe") when you need to wrap an external @interop/browser-platform web application and run it within an io.CD workspace.
  • Use the io.CD internal HTML window (type: "window", mode: "html") when you want the page embedded in the io.CD workspace with workspace behaviors (tabbing, snapping, loader, devTools integration, etc.).

Key differences (summary)

Type

  • exe (native Chrome): "type": "exe" — uses details.command and details.parameters to launch Chrome.
  • window (io.CD HTML): "type": "window" — uses details.mode: "html" and details.url.

Launch path / command

  • exe: provide the path to the system Chrome binary and CLI parameters (e.g. chrome.exe + --app=).
  • window: provide the url to load — no external Chrome command required.

Example configs

Below are compact example JSON objects you can adapt. They use placeholders for environment-specific values (replace with your actual paths and URLs).

Example A — Native Chrome (exe) approach

{
  "type": "exe",
  "name": "Example App - Chrome (native)",
  "autoStart": false,
  "runPriority": 930,
  "details": {
    "path": "C:\\Program Files\\Google\\Chrome\\Application\\",
    "command": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
    "parameters": "-ignore-gpu-blocklist -enable-gpu-rasterization --app=<REPLACE_WITH_YOUR_APP_URL>",
    "useShellExecute": false,
    "windowStyle": "Normal"
  },
  "customProperties": { "includeInWorkspaces": true }
}
Enter fullscreen mode Exit fullscreen mode

Example B — Embedded io.CD window (html) approach

{
  "type": "window",
  "name": "Example App - io.CD Workspace",
  "autoStart": false,
  "details": {
    "mode": "html",
    "url": "<REPLACE_WITH_YOUR_APP_URL>",
    "width": 1024,
    "height": 575
  },
  "customProperties": { "includeInWorkspaces": true }
}
Enter fullscreen mode Exit fullscreen mode

Note: merge these objects into your apps array and update icons, captions, and other metadata as required.

Note about useShellExecute:

  • useShellExecute tells io.CD to launch the native app via the OS shell (for example, when starting a BAT/CMD script). It's optional for normal native apps; only set it to true when a shell is required. If useShellExecute is true, io.CD can't track the process directly and you'll need to set trackingType to AGM if you still need platform events (shutdown, lifecycle). For most Chrome launches (direct executable), you can omit useShellExecute.

Important tips & gotchas

Cross-origin restrictions

If the target site sets strict Content-Security-Policy or X-Frame-Options headers, embedding in mode: "html" may be blocked. Use the native Chrome approach if embedding fails.

References

Top comments (0)