angular - ERR_FILE_NOT_FOUND 刷新自定义 Google Chrome 新标签扩展程序时

Question

我正在尝试使用 Angular 开发 Google Chrome 新标签扩展。一切都运行良好。每次打开新标签页时，我都可以加载扩展程序。但是，当我尝试刷新/重新加载页面时，出现了 ERR_FILE_NOT_FOUND 错误。到目前为止，我尝试将基本 URL 从 / 更改为 /index.html，这是 this thread 中建议的。在 StackOverflow 中，但没有运气。

这是我的manifest.json

{
    "name": "AnExtension!",
    "description": "Descr",
    "version": "1.0",
    "manifest_version": 2,
    "chrome_url_overrides": {
        "newtab": "index.html"
    },
    "permissions": [
        "storage",
        "bookmarks"
      ],
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

我也试过用 React 创建一个扩展(只是用了什么 create-react-app)但是没有这样的问题。重新加载/刷新工作正常。

Answer 1

通过以下修改，我设法在基于 Angular 9 的新标签页 Web 扩展中实现了这一点。

1. 像这样设置基本 href:

   <base href="./index.html" />

2. 通过在 app.routing.module.ts 中设置以下内容更改为基于哈希的路由:

   RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules, useHash: true })

如果没有此设置，我会发现两个问题。在 Chrome 上重新加载新标签给出了 ERR_FILE_NOT_FOUND根据原始问题的错误。此外，在 Firefox 上，新的标签扩展显示了 moz-extension://...。打开新选项卡时，地址栏中的 URL 而不是空白地址栏。