Ionic v5 react based start app - blank screen when launched as chrome extension

Question

When I create Ionic v5 react based start app (e.g. 'blank' or 'sidemenu'), it doesn't renders when loaded as chrome extension.

But let me say first what DOES work:

1. Regular web app works fine: serve -s build
2. The same starter app, but Angular-based - also works as expected.

Steps to reproduce:

1. ionic start ionic_ext blank --type=react
2. replace ./ionic_ext/public/manifest.json with next relaxed extension manifest:

{
  "manifest_version": 2,
  "name": "Hello Ionic Ext",
  "description" : "Hello Ionic Ext Demo",
  "version": "1.0",
  "browser_action": {
    "default_popup": "index.html",
    "default_icon": "assets/icon/icon.png"
  },
  "permissions": ["http://localhost/*"],
  
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

3. Add next snippet to ./ionic_ext/public/index.html head:

<style type="text/css">
    body {
      overflow: hidden;
      min-width: 600px;
      max-width: auto;
      width: 600px;
    }
    html {
      overflow: hidden;
      min-width: 600px;
      max-width: auto;
      min-height: 700px;
      height: 700px;
    }
  </style>

4. ionic build
5. Load unpacked extension using Chrome from ./ionic_ext/public/build

Result: When open popup, can see just blank popup screen. DevTools inspect (launched by right-clicking the popup) shows no console errors, DOM looks just fine.

My package versions:

ionic 6.11.8
node  12.9.1
chrome 85.0.4183.102 (Official Build) (64-bit)

OS:  Ubuntu 19.10   x86_64 x86_64 GNU/Linux

Answer 1

Explicit route specification finally fixed the issue.
I just replaced “/” with “/index.html” in src/App.tsx

<IonRouterOutlet id="main">
  ...
     <Route exact path="/index.html" render={() => <Redirect to="/home" />} />
</IonRouterOutlet>

The reason may be specific redirect behavior of Chrome’s build-in extension webserver.