Angular开发Chrome扩展：重载iframe时URL变更引发页面异常

我正在使用Angular开发一款Chrome扩展，通过iframe加载Angular页面。初始加载时会加载index.html，Angular应用会检查用户是否已认证；若未认证，路由会跳转到/login，此时iframe中显示登录页面，这一流程正常。

初始请求URL：chrome-extension://ejifaedjedcpmdnefibikbokapakjebh/index.html

但当我重载该iframe时，请求URL变为：chrome-extension://ejifaedjedcpmdnefibikbokapakjebh/login，此时页面提示‘项目已移动、编辑或删除’。

我的manifest.json配置 #

{
  "name": "piper",
  "description": "Piper chrome extension",
  "version": "1.0.1",
  "manifest_version": 3,
  "action": {
    "default_icon": "/assets/icons/ICON.png",
    "default_title": "Click me!"
  },
  "icons": {
    "16": "/assets/icons/ICON.png",
    "32": "/assets/icons/ICON.png",
    "48": "/assets/icons/ICON.png",
    "128": "/assets/icons/ICON.png"
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js", "runtime.js", "polyfills.js", "main.js", "scripts.js"],
      "css": ["content.css", "styles.css"]
    }
  ],
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'"
  },
  "web_accessible_resources": [
    {
      "resources": [
        "index.html",
        "toolbar.html",
        "toolbar.scss",
        "toolbar.js",
        "/assets/icons/ICON.png",
        "main.ts"
      ],
      "matches": ["<all_urls>"],
      "use_dynamic_url": true
    }
  ]
}

content.js中注入iframe的代码 #

function injectAngularApplication() {
  var angularApplicationIframe = document.createElement('iframe');
  angularApplicationIframe.src = chrome.runtime.getURL('index.html');
  angularApplicationIframe.id = 'angularApplication';
  angularApplicationIframe.allow = 'clipboard-read; clipboard-write';
  angularApplicationIframe.className = 'angular_application_iframe';

  document.body.appendChild(angularApplicationIframe);
  document.body.style.marginRight = '30%';
}

内容的提问来源于stack exchange，提问作者Nidhin Kumar