如何创建具有多个视图的Chrome扩展 [英] How to create a chrome extension with multiple views

问题描述

我一直在寻找，并且找不到在Chrome扩展中切换不同html视图的方法。我创建和扩展用户登录，并希望切换到一个用户登录时，一个profile.html视图。我已经尝试了下面的方式，但这只是打开一个弹出窗口，是否有做它加载的地方html页面进入当前的扩展视图？或者是通过javascrip编辑扩展视图的唯一方法？

I've been looking for sometime and cannot find a way to switch between different html views in a chrome extension. I am creating and extension with user log in and want to switch to a profile.html view once the user logs in. I've tried the way below but this just opens a popup window, is there away to do it where it loads the html page into the current extension view? Or is the only way to edit the extension view through javascrip?

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

推荐答案

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

There are several ways to do this, but the easiest way is to think of it as a single page app. You don't change views based on user action, you serve up content based on context.

也就是说我有两种方法可以按常规执行：

That said there are two ways I have seen this done routinely:

1. 使用iFrames。我不是这个的最大粉丝，但是如果你有现有的服务器端渲染页面，这是最简单的解决方案。从本质上讲，您只需让iFrame占用您需要的大小，然后更新它的来源并让框架按照需要进行导航。


2. 使用javascript提供所需的内容。这可能是大多数情况下的最佳解决方案。根据您拥有的任何环境，使用javascript模板更新用户所看到的内容。有很多不同的（和很好的）方法可以完成这个工作，以在这里给出特定的代码，但是谷歌搜索应该很容易。

这篇关于如何创建具有多个视图的Chrome扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！