如何创建一个chrome扩展与多个视图

How to create a chrome extension with multiple views

本文关键字：扩展 视图 chrome 何创建 创建 一个      更新时间：2023-09-26

我一直在寻找一段时间，无法找到一种在chrome扩展中切换不同html视图的方法。我正在创建和扩展与用户登录，并希望切换到profile.html视图一旦用户登录。我已经尝试了下面的方式，但这只是打开一个弹出窗口，有没有办法做到这一点，它将html页面加载到当前扩展视图?还是通过javascript编辑扩展视图的唯一方法?

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

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

这就是说，有两种方法我经常看到这样做:

  1. iFrames使用。我不是这种方法的超级粉丝，但如果您有现有的服务器端渲染页面，这是最简单的解决方案。从本质上讲，你只需要让iFrame占用你需要的大小，然后更新它的源，让框架按照需要导航。
  2. 使用javascript提供所需的内容。这可能是大多数情况下的最佳解决方案。基于你所拥有的上下文，使用javascript模板来更新用户所看到的内容。有太多不同的(和好的)方法来实现这一点，在这里给出具体的代码，但谷歌周围应该很容易。
相关文章：