如何在iframe中运行Angular制作的Chrome扩展程序

Question

我正在尝试实现一个简单的Chrome扩展程序，该扩展程序的内容不在默认弹出窗口上，而是在侧边栏上呈现。我已经意识到要这样做，由于其默认的chrome扩展弹出式样式行为（必须限制其最大宽度为800px，高度为600px，并且无法设置其位置样式），因此我必须使用iframe。

Angular Chrome Extension支架项目

链接上方是Angular Chrome扩展脚手架项目的github存储库，我正在尝试使用Angular构建chrome扩展。

{

  "manifest_version": 2,

  "name": "extension test",

  "short_name": "extension test",

  "version": "1.0.0",

  "description": "extension test",

  "permissions": [

    "tabs",

    "downloads",

    "storage",

    "activeTab",

    "declarativeContent"

  ],

  "browser_action": {

    "default_popup": "index.html",

    "default_title": "extension test",

    "default_icon": {

      "16": "assets/images/favicon-16.png",

      "32": "assets/images/favicon-32.png",

      "48": "assets/images/favicon-48.png",

      "128": "assets/images/favicon-128.png"

    }

  },

  "options_ui": {

    "page": "index.html#/option",

    "open_in_tab": false

  },

  "content_scripts": [

    {

      "js": ["contentPage.js"],

      "matches": ["<all_urls>"]

    }

  ],

  "background": {

    "scripts": ["backgroundPage.js"],

    "persistent": false

  },

  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",

  "default_icon": {

    "16": "assets/images/favicon-16.png",

    "32": "assets/images/favicon-32.png",

    "48": "assets/images/favicon-48.png",

    "128": "assets/images/favicon-128.png"

  }

}

上面是我的manifest.json文件。

是否有正确的方法可以在没有默认限制的iframe上运行chrome扩展程序，而不是在其默认弹出窗口上运行？