如何创建具有多个视图的Chrome扩展程序

Pet*_*ter 2 javascript google-chrome google-chrome-extension

我一直在寻找,并且找不到在Chrome扩展程序中的不同html视图之间切换的方法。我正在使用用户登录名进行创建和扩展,并希望在用户登录后切换到profile.html视图。我尝试了以下方法,但这只是打开了一个弹出窗口,可以在那里加载它了吗? html页面进入当前扩展视图?还是通过javascrip编辑扩展视图的唯一方法?

    chrome.windows.create(
      {
        tabId:      newTab.id,
        type:       "popup",
        url:        chrome.extension.getURL('user_profile.html'),
        focused: true
      }, function(window){
          //
        });
  });
Run Code Online (Sandbox Code Playgroud)

小智 5

有几种方法可以做到这一点,但最简单的方法是将其视为一个单页应用程序。您不会根据用户操作更改视图,而是根据上下文提供内容。

也就是说,我有两种方式可以定期查看此操作:

  1. 使用iFrame。我不是这个的忠实拥护者,但是如果您已有服务器端渲染的页面,那么这是最简单的解决方案。本质上,您只需要使iFrame占据所需的大小,然后更新它的源并让框架按需导航即可。
  2. 使用javascript提供所需内容。对于大多数情况,这可能是最好的解决方案。根据您所拥有的上下文,使用javascript模板来更新用户所看到的内容。这里有太多不同的(好方法)可以完成此操作以给出特定的代码,但是使用Google谷歌搜索应该很容易。