如何创建具有多个视图的chrome扩展

时间:2015-08-17 04:44:57

标签: 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){
          //
        });
  });

1 个答案:

答案 0 :(得分:4)

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

那说我有两种方式经常看到这个:

  1. 使用iFrame。我并不喜欢这个,但如果你有现有的服务器端渲染页面,那么这是最简单的解决方案。基本上,您只需使iFrame占用您需要的大小,然后更新它的来源并让框架按需要进行导航。
  2. 使用javascript提供所需内容。这可能是大多数情况下的最佳解决方案。根据您拥有的任何上下文,使用javascript模板更新用户看到的内容。有太多不同的(和好的)方法来实现这一点,在这里给出具体的代码,但谷歌搜索应该很容易。