基于 Ionic v5 React 的启动应用程序 - 作为 chrome 扩展启动时的空白屏幕

Question

当我创建基于 Ionic v5 React 的启动应用程序（例如 'blank' 或 'sidemenu'）时，它在加载为 chrome 扩展时不呈现。

但让我先说说什么有效：

常规网络应用程序运行良好：serve -s build
相同的入门应用，但基于 Angular - 也能按预期工作。

重现步骤：

ionic start ionic_ext blank --type=react
将 ./ionic_ext/public/manifest.json 替换为下一个宽松的扩展清单：

{
  "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'"
}

将下一个片段添加到 ./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>

ionic build
使用来自 ./ionic_ext/public/build

结果： 打开弹出窗口时，只能看到空白的弹出屏幕。 DevTools inspect（通过右键单击弹出窗口启动）没有显示控制台错误，DOM 看起来很好。

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

明确的路由规范终于解决了这个问题。
我只是将 src/App.tsx

中的“/”替换为“/index.html”

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

原因可能是 Chrome 的 build-in 扩展网络服务器的特定重定向行为。

基于 Ionic v5 React 的启动应用程序 - 作为 chrome 扩展启动时的空白屏幕

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

google-chrome-extension

reactjs

ionic-framework

ionic4

ionic5