Ionic 5 start app - React based one doesn't work as chrome extension, but Angular does

Ionic Framework Ionic React
1

Hi,

I’m facing problem when Angular based starter app works fine as chrome extension, but
same React-based shows blank screen, but no errors found in extension console, also expected DOM structure exists.

Also regular browser app works fine (serve -s build).

Steps to reproduce:

  1. ionic start ionic_ext blank --type=react
  2. replace ./ionic_ext/public/manifest.json with 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'"
}
  1. 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>
  1. ionic build --engine=browser
  2. Load unpacked extension from ./ionic_ext/public/build

Result: when activating popup I can see just blank screen. Inspect shows no console errors, DOM looks 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

Already spent 2 days for that… no luck…

2

Explicit route specification fixed the issue.
I just replaced “/” with “/index.html”

<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.